{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "### Import necessary modules" ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [ { "name": "stderr", "output_type": "stream", "text": [ ":228: RuntimeWarning: scipy._lib.messagestream.MessageStream size changed, may indicate binary incompatibility. Expected 56 from C header, got 64 from PyObject\n" ] } ], "source": [ "import numpy as np\n", "import pandas as pd\n", "import scipy as sp\n", "import matplotlib.pyplot as plt\n", "import sklearn as sk\n", "import datetime\n", "import calendar\n", "from jupyter_dash import JupyterDash\n", "import dash\n", "from dash import Dash, html, dcc, Input, Output\n", "import plotly.express as px\n", "from plotly.subplots import make_subplots\n", "import plotly.graph_objects as go\n", "import requests\n", "import io\n", "from plotly.subplots import make_subplots" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Set up Google Cloud BigQuery Request" ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "zsh:1: command not found: gcloud\r\n" ] } ], "source": [ "from google.cloud import bigquery\n", "!export GOOGLE_APPLICATION_CREDENTIALS=\"cse6242project-377400-2f98c9def7f8.json\"\n", "!gcloud auth activate-service-account --key-file cse6242project-377400-2f98c9def7f8.json" ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [], "source": [ "import os\n", "\n", "os.environ[\"GOOGLE_APPLICATION_CREDENTIALS\"]=\"cse6242project-377400-2f98c9def7f8.json\"" ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [], "source": [ "import pandas as pd" ] }, { "cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [], "source": [ "# Initialize a BigQuery client\n", "client = bigquery.Client()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Request Data From BigQuery" ] }, { "cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [], "source": [ "table_ref = client.dataset('cse6242gbq').table('counts_table')\n", "table = client.get_table(table_ref)\n", "\n", "schema_df = pd.DataFrame([field.to_api_repr() for field in table.schema])" ] }, { "cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
datetimeviewcarmotorcyclelarge_vehicle
02023-02-1500:19:27View_from_Tuas_Checkpoint000
12023-02-1502:17:38View_from_Tuas_Checkpoint000
22023-02-1503:12:21View_from_Tuas_Checkpoint000
32023-02-1504:15:08View_from_Tuas_Checkpoint000
42023-02-1505:13:14View_from_Tuas_Checkpoint000
\n", "
" ], "text/plain": [ " date time view car motorcycle \\\n", "0 2023-02-15 00:19:27 View_from_Tuas_Checkpoint 0 0 \n", "1 2023-02-15 02:17:38 View_from_Tuas_Checkpoint 0 0 \n", "2 2023-02-15 03:12:21 View_from_Tuas_Checkpoint 0 0 \n", "3 2023-02-15 04:15:08 View_from_Tuas_Checkpoint 0 0 \n", "4 2023-02-15 05:13:14 View_from_Tuas_Checkpoint 0 0 \n", "\n", " large_vehicle \n", "0 0 \n", "1 0 \n", "2 0 \n", "3 0 \n", "4 0 " ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "query = \"\"\"\n", " SELECT * \n", " FROM `cse6242project-377400.cse6242gbq.counts_table` \n", " \"\"\"\n", "df = client.query(query).to_dataframe()\n", "df.head(5)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Data Preprocessing" ] }, { "cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [], "source": [ "df = df.sort_values(by=['date']).reset_index(drop=True) #sort the dataframe\n", "df['date'] = pd.to_datetime(df['date'], format = \"%Y-%m-%d\") #convert to required format\n", "df['day'] = df['date'].dt.day_name()\n", "\n", "#Map new labels to view column\n", "df['vehicle'] = df['car'] + df['large_vehicle'] + df['motorcycle']\n", "transfer = {\"View_from_Second_Link_at_Tuas_to_sg\": 'Johor-Tuas', \n", " \"View_from_Second_Link_at_Tuas_to_jh\": 'Tuas-Johor',\n", " \"View_from_Tuas_Checkpoint_to_sg\": 'Johor-Tuas',\n", " \"View_from_Tuas_Checkpoint_to_jh\": 'Tuas-Johor',\n", " \"View_from_Woodlands_Causeway_Towards_Johor_to_sg\": 'Johor-Woodlands',\n", " \"View_from_Woodlands_Causeway_Towards_Johor_to_jh\": 'Woodlands-Johor',\n", " \"View_from_Woodlands_Checkpoint_Towards_BKE_to_sg\": 'Johor-Woodlands',\n", " \"View_from_Woodlands_Checkpoint_Towards_BKE_to_jh\": 'Woodlands-Johor'}\n", "\n", "new_table = df.replace({'view':transfer})\n", "\n", "#Filter the data\n", "options = ['Johor-Woodlands','Woodlands-Johor','Johor-Tuas','Tuas-Johor']\n", "final_df = new_table[new_table['view'].isin(options)]" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create data processing functions" ] }, { "cell_type": "code", "execution_count": 9, "metadata": {}, "outputs": [], "source": [ "from datetime import datetime, timedelta\n", "\n", "#As data is scraped at different times every hour, any values before 30 minutes after the hour will be rounded down\n", "# and any values after 30 minutes will be rounded up. I.e 11:50 -> 12:00 and 9:10 -> 9:00\n", "\n", "def hour_rounder(t):\n", " if int(t.minute)>= 30:\n", " time_1 = str(int(t.hour)+1)\n", " if len(time_1) == 1:\n", " return \"0\"+time_1+\":00\"\n", " else:\n", " return str(time_1)+\":00\"\n", " else:\n", " if len(str(t.hour)) == 1:\n", " return \"0\"+str(t.hour)+\":00\"\n", " else:\n", " return str(t.hour)+\":00\"" ] }, { "cell_type": "code", "execution_count": 10, "metadata": {}, "outputs": [], "source": [ "def peak_hours(t):\n", " peak = ['07:00', \"08:00\", '09:00', \"17:00\", \"18:00\", \"19:00\"]\n", " if t in peak:\n", " return 1\n", " else:\n", " return 0" ] }, { "cell_type": "code", "execution_count": 11, "metadata": {}, "outputs": [], "source": [ "def weekend(w):\n", " end = ['Saturday', 'Sunday']\n", " if w in end:\n", " return 1\n", " else:\n", " return 0" ] }, { "cell_type": "code", "execution_count": 12, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Thursday\n" ] } ], "source": [ "def convert_date(date):\n", " return datetime.strptime(date, \"%Y-%m-%d\").strftime('%A') \n", "print(convert_date(\"2013-04-11\")) " ] }, { "cell_type": "code", "execution_count": 13, "metadata": { "scrolled": false }, "outputs": [ { "name": "stderr", "output_type": "stream", "text": [ "/var/folders/w8/7fvtd_nn7235fgdf50g59c5h0000gn/T/ipykernel_82351/124420089.py:2: SettingWithCopyWarning: \n", "A value is trying to be set on a copy of a slice from a DataFrame.\n", "Try using .loc[row_indexer,col_indexer] = value instead\n", "\n", "See the caveats in the documentation: https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#returning-a-view-versus-a-copy\n", " final_df.loc[:,'hour'] = final_df.loc[:,'time'].apply(hour_rounder)\n" ] } ], "source": [ "#Apply hour_rounder function to dataframe\n", "final_df.loc[:,'hour'] = final_df.loc[:,'time'].apply(hour_rounder)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Group the data by the average vehicle count per view, day of the week and hour" ] }, { "cell_type": "code", "execution_count": 14, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
dayhourviewvehicle
0Friday00:00Johor-Tuas0
1Friday01:00Johor-Tuas1
2Friday02:00Johor-Tuas1
\n", "
" ], "text/plain": [ " day hour view vehicle\n", "0 Friday 00:00 Johor-Tuas 0\n", "1 Friday 01:00 Johor-Tuas 1\n", "2 Friday 02:00 Johor-Tuas 1" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "final_table = final_df.groupby(['view', 'day', 'hour']).mean().reset_index().loc[:,['day', 'hour','view', 'vehicle']]\n", "final_table['vehicle'] = final_table['vehicle'].apply(lambda x: round(x))\n", "display(final_table.head(3))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create function to convert vehicle counts to categories:\n", "- Between 0-2 vehicles -> \"No Traffic\"\n", "- Between 2-4 vehicles -> \"Low Traffic\"\n", "- Between 4-6 vehicles -> \"Minimal Traffic\"\n", "- Between 6-8 vehicles -> \"Moderate Traffic\"\n", "- 8+ vehicles -> \"Heavy Traffic\"\n" ] }, { "cell_type": "code", "execution_count": 15, "metadata": {}, "outputs": [], "source": [ "def vehicle_cat(v):\n", " if v >= 0 and v < 2:\n", " return 0\n", " elif v >= 2 and v < 4:\n", " return 1\n", " elif v >= 4 and v < 6:\n", " return 2\n", " elif v >= 6 and v < 8:\n", " return 3\n", " else:\n", " return 4 " ] }, { "cell_type": "code", "execution_count": 16, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
dayhourviewvehiclepeakweekendcat
0Friday00:00Johor-Tuas0000
1Friday01:00Johor-Tuas1000
2Friday02:00Johor-Tuas1000
\n", "
" ], "text/plain": [ " day hour view vehicle peak weekend cat\n", "0 Friday 00:00 Johor-Tuas 0 0 0 0\n", "1 Friday 01:00 Johor-Tuas 1 0 0 0\n", "2 Friday 02:00 Johor-Tuas 1 0 0 0" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "#Prep data for Model\n", "final_table.loc[:,'peak'] = final_table.loc[:,'hour'].apply(peak_hours)\n", "final_table.loc[:,'peak'] = final_table.loc[:,'peak'].astype('category')\n", "final_table.loc[:,'weekend'] = final_table.loc[:,'day'].apply(weekend)\n", "final_table.loc[:,'weekend'] = final_table.loc[:,'weekend'].astype('category')\n", "final_table.loc[:,'cat'] = final_table.loc[:,'vehicle'].apply(vehicle_cat)\n", "final_table.loc[:,'cat'] = final_table.loc[:,'cat'].astype('category')\n", "display(final_table.head(3))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Neural Network Machine Learning Model: Training and Testing" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Split the data and create dummy variables for each category" ] }, { "cell_type": "code", "execution_count": 17, "metadata": {}, "outputs": [], "source": [ "from sklearn.neural_network import MLPClassifier\n", "from sklearn.model_selection import cross_val_score, GridSearchCV, cross_validate, train_test_split\n", "from sklearn.metrics import accuracy_score, classification_report" ] }, { "cell_type": "code", "execution_count": 18, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
day_Fridayday_Mondayday_Saturdayday_Sundayday_Thursdayday_Tuesdayday_Wednesdayhour_00:00hour_01:00hour_02:00...hour_21:00hour_22:00hour_23:00hour_24:00view_Johor-Tuasview_Johor-Woodlandsview_Tuas-Johorview_Woodlands-Johorpeakweekend
01000000100...0000100000
11000000010...0000100000
21000000001...0000100000
\n", "

3 rows × 38 columns

\n", "
" ], "text/plain": [ " day_Friday day_Monday day_Saturday day_Sunday day_Thursday \\\n", "0 1 0 0 0 0 \n", "1 1 0 0 0 0 \n", "2 1 0 0 0 0 \n", "\n", " day_Tuesday day_Wednesday hour_00:00 hour_01:00 hour_02:00 ... \\\n", "0 0 0 1 0 0 ... \n", "1 0 0 0 1 0 ... \n", "2 0 0 0 0 1 ... \n", "\n", " hour_21:00 hour_22:00 hour_23:00 hour_24:00 view_Johor-Tuas \\\n", "0 0 0 0 0 1 \n", "1 0 0 0 0 1 \n", "2 0 0 0 0 1 \n", "\n", " view_Johor-Woodlands view_Tuas-Johor view_Woodlands-Johor peak weekend \n", "0 0 0 0 0 0 \n", "1 0 0 0 0 0 \n", "2 0 0 0 0 0 \n", "\n", "[3 rows x 38 columns]" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "X = final_table.loc[:,['day', 'hour','view']]\n", "Y = final_table.loc[:,'cat']\n", "\n", "X = pd.get_dummies(X)\n", "X.loc[:,['peak', 'weekend']] = final_table.loc[:,['peak', 'weekend']]\n", "display(X.head(3))\n", "\n", "x_train, x_test, y_train, y_test = train_test_split(X, Y, train_size=0.7,\n", " test_size=0.3,\n", " shuffle=True, random_state=13)" ] }, { "cell_type": "code", "execution_count": 19, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "0.7238095238095238\n", "[130 40 19 14 7]\n", "[120 49 18 10 13]\n" ] } ], "source": [ "#create basic model\n", "clf = MLPClassifier(solver='lbfgs', alpha=0.65, hidden_layer_sizes=(4,3), random_state=2, max_iter=5000)\n", "clf.fit(x_train, y_train)\n", "y_pred = clf.predict(x_test)\n", "print(accuracy_score(y_test, y_pred))" ] }, { "cell_type": "code", "execution_count": 20, "metadata": { "scrolled": false }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "{'alpha': 1.5, 'hidden_layer_sizes': (5, 3), 'solver': 'lbfgs'}\n", "0.7341047759309911\n" ] } ], "source": [ "#Create GridSearch grid to find optimal parameters\n", "parameters = {\"solver\":['lbfgs', 'adam', 'sgd'],\n", " 'alpha':[0.005, 0.05, 0.5,1,1.5, 2],\n", " 'hidden_layer_sizes':[(4,3), (5,3), (6,3)]}\n", "grid = GridSearchCV(clf, parameters).fit(x_train, y_train)\n", "print(grid.best_params_)\n", "print(grid.best_score_)" ] }, { "cell_type": "code", "execution_count": 21, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "0.7380952380952381\n", "[124 41 30 9 6]\n", "[120 49 18 10 13]\n" ] } ], "source": [ "clf = MLPClassifier(solver=grid.best_params_['solver'], alpha=grid.best_params_['alpha'], \n", " hidden_layer_sizes=grid.best_params_['hidden_layer_sizes'], \n", " random_state=8, max_iter=4000)\n", "\n", "clf.fit(x_train, y_train)\n", "y_pred = clf.predict(x_test)\n", "print(accuracy_score(y_test, y_pred))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create function to process user inputs from Dash Dropdowns\n", "- This function takes date, hour and direction from the users input.\n", "- Date is converted to the day of the week and determines if it is a weekday or weekend\n", "- Hour is converted to string and determines if it is during peak hours\n", "- This row is applied to the NN model that was created above and a predicted category is returned" ] }, { "cell_type": "code", "execution_count": 22, "metadata": {}, "outputs": [], "source": [ "h = '17:00'\n", "v = 'Woodlands-Johor'\n", "\n", "def create_row(date_d, hour, view):\n", " if date_d is None:\n", " date_d = \"2023-04-11\"\n", " if hour is None:\n", " hour = \"09:00\"\n", " if view is None:\n", " view = \"Johor-Tuas\"\n", " \n", " features = x_train.columns\n", " d_dict = {}\n", " day = datetime.strptime(date_d, \"%Y-%m-%d\").strftime('%A')\n", " hour = str(hour)\n", " view = str(view)\n", " col_day = \"day_\" + day\n", " col_hour = 'hour_'+h\n", " col_view = 'view_'+view\n", " \n", " for i in features:\n", " if i == col_day or i == col_hour or i == col_view:\n", " d_dict[i] = [1]\n", " else:\n", " d_dict[i] = [0]\n", " end = ['Saturday', 'Sunday']\n", " peak = ['07:00', \"08:00\", '09:00', \"17:00\", \"18:00\", \"19:00\"]\n", " \n", " if day in end:\n", " d_dict['weekend'] = 1\n", " if hour in peak:\n", " d_dict['peak'] = 1 \n", " result = pd.DataFrame.from_dict(d_dict, orient='columns')\n", " for i in features:\n", " result[i] = result[i].astype('category')\n", " return result " ] }, { "cell_type": "code", "execution_count": 23, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "[2]\n", "[1]\n" ] } ], "source": [ "#Test the function\n", "print(clf.predict(create_row(\"2013-04-15\", h, v))) \n", "print(clf.predict(create_row(\"2013-04-17\", None, None))) " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create the figures to be loaded to the dashboard" ] }, { "cell_type": "code", "execution_count": 24, "metadata": { "scrolled": false }, "outputs": [], "source": [ "paths = [\"M 0.2 0.35 L 0.48 0.52 L 0.52 0.50\",\n", " \"M 0.25 0.75 L 0.475 0.52 L 0.52 0.52\",\n", " \"M 0.5 0.9 L 0.485 0.52 L 0.515 0.52\",\n", " \"M 0.75 0.75 L 0.485 0.52 L 0.52 0.51\",\n", " \"M 0.8 0.35 L 0.48 0.50 L 0.52 0.52\"]\n", "\n", "figs = []\n", "values_ = [\"No Traffic on Johor-Singapore Causeway\", \"Low Traffic on Johor-Singapore Causeway\", \"Johor-Singapore Causeway Slightly Busy\", \n", " \"Johor-Singapore Causeway Moderately Busy\", \"Busiest Time to Travel on Johor-Singapore Causeway\"]\n", "\n", "for i in range(5):\n", " plot_bgcolor = \"#def\"\n", " colors = [\"#f25829\", \"#f2a529\", \"#eff229\", \"#85e043\", \"#2bad4e\",\"rgba(0,0,0,0)\"] \n", " quadrant_text = [\"Heavy\", \"Moderate\", \"Mild\", \"Low\", \"None\",\"\"]\n", " n_quadrants = len(colors) - 1\n", " figure_1 = go.Figure(\n", " data=[\n", " go.Pie(\n", " values=[14,14,14,14,14,30],\n", " rotation=130,\n", " hole=0.75,\n", " marker_colors=colors,\n", " marker_line={\"width\":2, \"color\":\"white\"},\n", " textinfo=\"none\",\n", " text=quadrant_text,\n", " hoverinfo=\"text\"\n", " ),\n", " ],\n", " layout=go.Layout(\n", " showlegend=False,\n", " margin=dict(b=0,t=30,l=10,r=10),\n", " width=500,\n", " height=350,\n", " paper_bgcolor=\"rgba(0,0,0,0)\",\n", " annotations=[\n", " go.layout.Annotation(\n", " text=f\"{values_[i]}\",\n", " x=0.5, xanchor=\"center\", xref=\"paper\",\n", " y=0.1, yanchor=\"bottom\", yref=\"paper\",\n", " showarrow=False,\n", " font= {\"size\":15, \"color\":\"#333\"}\n", " )\n", " ]\n", " )\n", " )\n", " figure_1.update_layout(shapes=[dict(type='path',\n", " path=paths[i],\n", " fillcolor=\"#333\"), \n", " go.layout.Shape(\n", " type=\"circle\",\n", " x0=0.48, x1=0.52,\n", " y0=0.48, y1=0.54,\n", " fillcolor=\"#333\",\n", " line_color=\"#333\",\n", " )])\n", " figs.append(figure_1)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create function that takes the dropdown inputs and applies the NN model and returns the associated figure" ] }, { "cell_type": "code", "execution_count": 25, "metadata": {}, "outputs": [], "source": [ "# x = list of [model, date, hour, view]\n", "def predicted_figure(x):\n", " \n", " result = create_row(x[1], x[2], x[3])\n", " pred_val = clf.predict(result)[0]\n", " \n", " return figs[pred_val]\n" ] }, { "cell_type": "code", "execution_count": 26, "metadata": {}, "outputs": [ { "data": { "text/html": [ " \n", " " ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "hole": 0.75, "hoverinfo": "text", "marker": { "colors": [ "#f25829", "#f2a529", "#eff229", "#85e043", "#2bad4e", "rgba(0,0,0,0)" ], "line": { "color": "white", "width": 2 } }, "rotation": 130, "text": [ "Heavy", "Moderate", "Mild", "Low", "None", "" ], "textinfo": "none", "type": "pie", "values": [ 14, 14, 14, 14, 14, 30 ] } ], "layout": { "annotations": [ { "font": { "color": "#333", "size": 15 }, "showarrow": false, "text": "Johor-Singapore Causeway Slightly Busy", "x": 0.5, "xanchor": "center", "xref": "paper", "y": 0.1, "yanchor": "bottom", "yref": "paper" } ], "height": 350, "margin": { "b": 0, "l": 10, "r": 10, "t": 30 }, "paper_bgcolor": "rgba(0,0,0,0)", "shapes": [ { "fillcolor": "#333", "path": "M 0.5 0.9 L 0.485 0.52 L 0.515 0.52", "type": "path" }, { "fillcolor": "#333", "line": { "color": "#333" }, "type": "circle", "x0": 0.48, "x1": 0.52, "y0": 0.48, "y1": 0.54 } ], "showlegend": false, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "width": 500 } }, "text/html": [ "
" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "#Test the function\n", "b = [clf, \"2023-04-27\", \"09:00\", \"Johor-Tuas\"]\n", "predicted_figure(b)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### The dashboard starting values will be automatically to today's date" ] }, { "cell_type": "code", "execution_count": 27, "metadata": {}, "outputs": [], "source": [ "from datetime import date\n", "t = str(date.today()).split('-')\n", "today = []\n", "\n", "for i in t:\n", " if t[0] =='0':\n", " today.append(int(t[1:]))\n", " else:\n", " today.append(int(i))" ] }, { "cell_type": "code", "execution_count": 28, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "hole": 0.75, "hoverinfo": "text", "marker": { "colors": [ "#f25829", "#f2a529", "#eff229", "#85e043", "#2bad4e", "rgba(0,0,0,0)" ], "line": { "color": "white", "width": 2 } }, "rotation": 130, "text": [ "Heavy", "Moderate", "Mild", "Low", "None", "" ], "textinfo": "none", "type": "pie", "values": [ 14, 14, 14, 14, 14, 30 ] } ], "layout": { "annotations": [ { "font": { "color": "#333", "size": 15 }, "showarrow": false, "text": "Busiest Time to Travel on Johor-Singapore Causeway", "x": 0.5, "xanchor": "center", "xref": "paper", "y": 0.1, "yanchor": "bottom", "yref": "paper" } ], "height": 350, "margin": { "b": 0, "l": 10, "r": 10, "t": 30 }, "paper_bgcolor": "rgba(0,0,0,0)", "shapes": [ { "fillcolor": "#333", "path": "M 0.8 0.35 L 0.48 0.50 L 0.52 0.52", "type": "path" }, { "fillcolor": "#333", "line": { "color": "#333" }, "type": "circle", "x0": 0.48, "x1": 0.52, "y0": 0.48, "y1": 0.54 } ], "showlegend": false, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "width": 500 } }, "text/html": [ "
" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "starter_variables = [clf, str(date.today()), \"07:00\", \"Tuas-Johor\"]\n", "fig = predicted_figure(starter_variables)\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create starter barplots for each direction for the initial dashboard" ] }, { "cell_type": "code", "execution_count": 29, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "marker": { "color": [ "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#85e043", "#2bad4e", "#eff229", "#2bad4e", "#85e043", "#85e043", "#85e043", "#eff229", "#eff229", "#85e043", "#85e043", "#2bad4e", "#85e043", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e" ] }, "name": "Johor-Tuas", "showlegend": false, "type": "bar", "x": [ "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00" ], "xaxis": "x", "y": [ 0, 1, 1, 1, 0, 1, 1, 2, 1, 4, 1, 2, 3, 3, 4, 4, 2, 2, 1, 2, 1, 1, 1, 1, 1 ], "yaxis": "y" }, { "marker": { "color": [ "#85e043", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#85e043", "#f2a529", "#eff229", "#f25829", "#f2a529", "#f2a529", "#f2a529", "#f25829", "#f25829", "#f25829", "#f2a529", "#f2a529", "#f25829", "#f25829", "#eff229", "#85e043", "#85e043", "#2bad4e", "#85e043" ] }, "name": "Tuas-Johor", "showlegend": false, "type": "bar", "x": [ "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00" ], "xaxis": "x2", "y": [ 2, 1, 1, 1, 0, 1, 2, 6, 4, 9, 6, 6, 6, 8, 10, 9, 6, 6, 9, 8, 4, 2, 3, 1, 2 ], "yaxis": "y2" }, { "marker": { "color": [ "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#85e043", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#85e043", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e" ] }, "name": "Johor-Woodlands", "showlegend": false, "type": "bar", "x": [ "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00" ], "xaxis": "x3", "y": [ 0, 0, 0, 0, 0, 0, 1, 1, 1, 3, 1, 0, 0, 1, 1, 2, 0, 1, 1, 1, 1, 0, 0, 0, 0 ], "yaxis": "y3" }, { "marker": { "color": [ "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#85e043", "#85e043", "#eff229", "#85e043", "#85e043", "#85e043", "#85e043", "#85e043", "#85e043", "#eff229", "#f2a529", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e", "#2bad4e" ] }, "name": "Johor-Woodlands", "showlegend": false, "type": "bar", "x": [ "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00" ], "xaxis": "x4", "y": [ 0, 0, 0, 0, 0, 0, 0, 1, 1, 3, 2, 4, 3, 3, 3, 2, 2, 2, 4, 6, 0, 0, 0, 0, 0 ], "yaxis": "y4" } ], "layout": { "annotations": [ { "font": { "size": 16 }, "showarrow": false, "text": "Johor-Tuas", "x": 0.225, "xanchor": "center", "xref": "paper", "y": 0.375, "yanchor": "bottom", "yref": "paper" }, { "font": { "size": 16 }, "showarrow": false, "text": "Tuas-Johor", "x": 0.775, "xanchor": "center", "xref": "paper", "y": 0.375, "yanchor": "bottom", "yref": "paper" }, { "font": { "size": 16 }, "showarrow": false, "text": "Johor-Woodlands", "x": 0.225, "xanchor": "center", "xref": "paper", "y": 1, "yanchor": "bottom", "yref": "paper" }, { "font": { "size": 16 }, "showarrow": false, "text": "Johor-Woodlands", "x": 0.775, "xanchor": "center", "xref": "paper", "y": 1, "yanchor": "bottom", "yref": "paper" } ], "paper_bgcolor": "rgba(0,0,0,0)", "plot_bgcolor": "rgba(0,0,0,0)", "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "title": { "text": "Predicted 24 Hour Traffic Trend on: Monday, 17 April, 2023" }, "xaxis": { "anchor": "y", "domain": [ 0, 0.45 ], "tickangle": 45 }, "xaxis2": { "anchor": "y2", "domain": [ 0.55, 1 ], "tickangle": 45 }, "xaxis3": { "anchor": "y3", "domain": [ 0, 0.45 ], "tickangle": 45 }, "xaxis4": { "anchor": "y4", "domain": [ 0.55, 1 ], "tickangle": 45 }, "yaxis": { "anchor": "x", "domain": [ 0, 0.375 ] }, "yaxis2": { "anchor": "x2", "domain": [ 0, 0.375 ], "matches": "y", "showticklabels": false }, "yaxis3": { "anchor": "x3", "domain": [ 0.625, 1 ], "matches": "y" }, "yaxis4": { "anchor": "x4", "domain": [ 0.625, 1 ], "matches": "y", "showticklabels": false } } }, "text/html": [ "
" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "day_today = convert_date(str(date.today()))\n", "df_filter = final_table[final_table['day']==day_today]\n", "\n", "color_map = {0:\"#2bad4e\", 1:\"#85e043\", 2:\"#eff229\", 3:\"#f2a529\", 4:\"#f25829\"}\n", "\n", "\n", "bar_day = make_subplots(shared_yaxes=\"all\", rows=2, cols=2, start_cell=\"bottom-left\", subplot_titles=(\"Johor-Tuas\", \n", " \"Tuas-Johor\", \n", " \"Johor-Woodlands\",\n", " \"Johor-Woodlands\"))\n", "f1 = df_filter[df_filter['view']=='Johor-Tuas']\n", "c1 = pd.Series(f1['cat']).map(color_map)\n", "bar_day.add_trace(go.Bar(x=f1['hour'], y=f1['vehicle'], name='Johor-Tuas', showlegend=False, marker={'color':c1}),\n", " row=1, col=1)\n", "\n", "f2 = df_filter[df_filter['view']=='Tuas-Johor']\n", "c2 = pd.Series(f2['cat']).map(color_map)\n", "bar_day.add_trace(go.Bar(x=f2['hour'], y=f2['vehicle'], name='Tuas-Johor', showlegend=False, marker={'color':c2}),\n", " row=1, col=2)\n", "f3 = df_filter[df_filter['view']=='Johor-Woodlands']\n", "c3 = pd.Series(f3['cat']).map(color_map)\n", "bar_day.add_trace(go.Bar(x=f3['hour'], y=f3['vehicle'], name='Johor-Woodlands', showlegend=False, marker={'color':c3}),\n", " row=2, col=1)\n", "f4 = df_filter[df_filter['view']=='Woodlands-Johor']\n", "c4 = pd.Series(f4['cat']).map(color_map)\n", "bar_day.add_trace(go.Bar(x=f4['hour'], y=f4['vehicle'], name='Johor-Woodlands', showlegend=False, marker={'color':c4}),\n", " row=2, col=2)\n", "\n", "val_d = date.today().strftime(\"%d %B, %Y\")\n", "day_d = date.today().strftime(\"%A\")\n", "tex = \"Predicted 24 Hour Traffic Trend on: \" + day_d + \", \" + str(val_d)\n", "\n", "\n", "bar_day.update_layout(title_text=tex, paper_bgcolor=\"rgba(0,0,0,0)\", plot_bgcolor=\"rgba(0,0,0,0)\")\n", "bar_day.update_xaxes(tickangle=45)\n", "\n", "bar_day.show()\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Create the Dashboard:" ] }, { "cell_type": "code", "execution_count": 37, "metadata": { "scrolled": false }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Dash is running on http://0.0.0.0:8053/\n", "\n", "Dash app running on http://0.0.0.0:8053/\n" ] } ], "source": [ "app = JupyterDash(__name__)\n", "\n", "app.title = 'CSE6242 Dashboard'\n", "app.layout = html.Div([\n", " html.Div([\n", " dcc.DatePickerSingle(\n", " id='my_date_picker_single',\n", " min_date_allowed=date(2023, 4, 11),\n", " max_date_allowed=date(2024, 4, 11),\n", " initial_visible_month=date(today[0],today[1], today[2]),\n", " date=date(today[0],today[1], today[2])\n", " ),\n", " html.Div(id='output-container-date-picker-single')],\n", " style={'width':'20%','height':'20px', \n", " 'padding-left':'20%',\n", " 'display':'inline-block',\n", " \"align-items\":'center', \n", " 'justify-content':'center'}),\n", " html.Div([dcc.Dropdown(id='hours_dropdown_id',\n", " options=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', \n", " '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00',\n", " '20:00', '21:00', '22:00', '23:00'],\n", " value='07:00', clearable=False),html.Label(\"Estimated Leave Time\")],\n", " style={'width':'17%','height':'20px', 'padding-left':'0%',\n", " 'display':'inline-block'}),\n", " html.Div([dcc.Dropdown(id='direction_id',\n", " options=['Johor-Tuas','Johor-Woodlands',\n", " 'Tuas-Johor', 'Woodlands-Johor'],\n", " value=\"Tuas-Johor\", clearable=False),html.Label(\"Direction\")],\n", " style={'width':'15%','height':'20px', 'padding-left':'5%','display':'inline-block',\"align-items\":'center', \n", " 'justify-content':'center'}),\n", " html.Div(dcc.Graph(id='final_output', figure=fig),\n", " style={'width':'100%', 'display': \"flex\", \"align-items\":'center', \n", " 'justify-content':'center'}),\n", " html.Div(dcc.Graph(id='final_bargraph', figure=bar_day))])\n", "\n", "\n", "@app.callback(Output('output-container-date-picker-single', 'children'),\n", " Input('my_date_picker_single', 'date'))\n", "def update_output(date_value):\n", " string_prefix = 'Travel Day: '\n", " if date_value is not None:\n", " date_object = date.fromisoformat(date_value)\n", " date_string = convert_date(date_value)\n", " return string_prefix + date_string\n", " \n", "@app.callback(Output('final_output', \"figure\"),\n", " Input('my_date_picker_single', 'date'),\n", " Input('hours_dropdown_id', 'value'),\n", " Input('direction_id', 'value'))\n", "def update_final_output_hour(my_date_picker_single, hours_dropdown_id, direction_id):\n", " starter_variables[1] = str(my_date_picker_single)\n", " starter_variables[2] = str(hours_dropdown_id)\n", " starter_variables[3] = str(direction_id)\n", " fig = predicted_figure(starter_variables)\n", " return fig\n", "\n", "@app.callback(Output('final_bargraph', \"figure\"),\n", " Input('my_date_picker_single', 'date'))\n", "def update_bar_graph(my_date_picker_single):\n", " day = convert_date(str(my_date_picker_single))\n", " df_filter = final_table[final_table['day']==day]\n", " color_map = {0:\"#2bad4e\", 1:\"#85e043\", 2:\"#eff229\", 3:\"#f2a529\", 4:\"#f25829\"}\n", "\n", " bar_day = make_subplots(shared_yaxes=\"all\", rows=2, cols=2, start_cell=\"bottom-left\",\n", " subplot_titles=(\"Johor-Tuas\", \"Tuas-Johor\",\n", " \"Johor-Woodlands\",\"Johor-Woodlands\"))\n", " f1 = df_filter[df_filter['view']=='Johor-Tuas']\n", " c1 = pd.Series(f1['cat']).map(color_map)\n", " bar_day.add_trace(go.Bar(x=f1['hour'], y=f1['vehicle'], name='Johor-Tuas', showlegend=False, marker={'color':c1}),\n", " row=1, col=1)\n", "\n", " f2 = df_filter[df_filter['view']=='Tuas-Johor']\n", " c2 = pd.Series(f2['cat']).map(color_map)\n", " bar_day.add_trace(go.Bar(x=f2['hour'], y=f2['vehicle'], name='Tuas-Johor', showlegend=False, marker={'color':c2}),\n", " row=1, col=2)\n", " f3 = df_filter[df_filter['view']=='Johor-Woodlands']\n", " c3 = pd.Series(f3['cat']).map(color_map)\n", " bar_day.add_trace(go.Bar(x=f3['hour'], y=f3['vehicle'], name='Johor-Woodlands', showlegend=False, marker={'color':c3}),\n", " row=2, col=1)\n", " f4 = df_filter[df_filter['view']=='Woodlands-Johor']\n", " c4 = pd.Series(f4['cat']).map(color_map)\n", " bar_day.add_trace(go.Bar(x=f4['hour'], y=f4['vehicle'], name='Johor-Woodlands', showlegend=False, marker={'color':c4}),\n", " row=2, col=2)\n", " val_d = datetime.strptime(my_date_picker_single, \"%Y-%m-%d\").strftime(\"%d %B, %Y\")\n", " tex = \"Predicted 24 Hour Traffic Trend on: \" + day + \", \" + str(val_d)\n", "\n", " bar_day.update_layout(title_text=tex, paper_bgcolor=\"rgba(0,0,0,0)\", plot_bgcolor=\"rgba(0,0,0,0)\")\n", " bar_day.update_xaxes(tickangle=45)\n", "\n", " return bar_day\n", " \n", " \n", "app.run_server(host=\"0.0.0.0\", port=8053, debug=True)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.9.12" } }, "nbformat": 4, "nbformat_minor": 2 }