diff --git "a/notebooks/Causin_Final_Notebook.ipynb" "b/notebooks/Causin_Final_Notebook.ipynb" new file mode 100644--- /dev/null +++ "b/notebooks/Causin_Final_Notebook.ipynb" @@ -0,0 +1,4512 @@ +{ + "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 +}