Last active
November 24, 2022 15:04
-
-
Save aialenti/8cf4702ae8be7f79936b4c75f1a4024a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "cells": [ | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "# Hello World" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 294, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "// Import ECharts, the Javascript charting library\n", | |
| "require.config({\n", | |
| " paths: {\n", | |
| " ech: 'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min'\n", | |
| " }\n", | |
| "});\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "// Import eCharts, the Javascript charting library\n", | |
| "require.config({\n", | |
| " paths: {\n", | |
| " ech: 'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min'\n", | |
| " }\n", | |
| "});" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 295, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "import json\n", | |
| "import pandas as pd\n", | |
| "import numpy as np\n", | |
| "\n", | |
| "COLUMN = \"retail_and_recreation_percent_change_from_baseline\"\n", | |
| "DATA_LOCATION = \"<PATH TO FILES>\"\n", | |
| "\n", | |
| "def get_data():\n", | |
| " # Get the raw data\n", | |
| " raw_data = pd.read_csv(\"{}Global_Mobility_Report.csv\".format(DATA_LOCATION))\n", | |
| " \n", | |
| " # Take only metrics by state (no sub regions). \n", | |
| " # Note that we only want the records where sub_region_1 is not available\n", | |
| " raw_data = raw_data.fillna(\"NA\")\n", | |
| " raw_data = raw_data.loc[raw_data[\"sub_region_1\"] == 'NA']\n", | |
| "\n", | |
| " # Drop the columns that are not needed\n", | |
| " raw_data = raw_data.drop([\"country_region_code\", \"sub_region_1\", \"sub_region_2\"], axis=1) \n", | |
| " \n", | |
| " # Create the JSON we will use in the Javascript code\n", | |
| " countries = np.unique(raw_data[\"country_region\"])\n", | |
| " final_dict = {\n", | |
| " \"dates\": list(raw_data.loc[raw_data[\"country_region\"]==\"Afghanistan\"].sort_values(\"date\")[\"date\"].values),\n", | |
| " \"country_data\":[]\n", | |
| " \n", | |
| " }\n", | |
| " \n", | |
| " # Create one element of the \"country_data\" array for each country\n", | |
| " for _c in countries:\n", | |
| " _tmp_data = raw_data.loc[raw_data[\"country_region\"] == _c].sort_values(\"date\")\n", | |
| " _data = _tmp_data[COLUMN]\n", | |
| " final_dict[\"country_data\"].append({\n", | |
| " \"name\": _c,\n", | |
| " \"data\": list(_data.values)\n", | |
| " })\n", | |
| "\n", | |
| " # Return the JSON dumpe\n", | |
| " return json.dumps(final_dict)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 296, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "// The output of get_data will be stored in the following function\n", | |
| "window.outputVar = null\n", | |
| "\n", | |
| "IPython.notebook.kernel.execute(\n", | |
| " \"get_data()\", \n", | |
| " {\n", | |
| " iopub: {\n", | |
| " output: function(response) {\n", | |
| " // Get output as plain text\n", | |
| " var output = response.content.data[\"text/plain\"];\n", | |
| " console.log(output)\n", | |
| " \n", | |
| " // Remove unwanted characters\n", | |
| " output = output.substring(1, output.length-1).replace(\"\\\\'\",\"'\")\n", | |
| " \n", | |
| " // Set the variable\n", | |
| " window.outputVar = JSON.parse(output)\n", | |
| " }\n", | |
| " }\n", | |
| " },\n", | |
| " {\n", | |
| " silent: false, \n", | |
| " store_history: false, \n", | |
| " stop_on_error: true\n", | |
| " }\n", | |
| ")\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "// The output of get_data will be stored in the following function\n", | |
| "window.outputVar = null\n", | |
| "\n", | |
| "IPython.notebook.kernel.execute(\n", | |
| " \"get_data()\", \n", | |
| " {\n", | |
| " iopub: {\n", | |
| " output: function(response) {\n", | |
| " // Get output as plain text\n", | |
| " var output = response.content.data[\"text/plain\"];\n", | |
| " console.log(output)\n", | |
| " \n", | |
| " // Remove unwanted characters\n", | |
| " output = output.substring(1, output.length-1).replace(\"\\\\'\",\"'\")\n", | |
| " \n", | |
| " // Set the variable\n", | |
| " window.outputVar = JSON.parse(output)\n", | |
| " }\n", | |
| " }\n", | |
| " },\n", | |
| " {\n", | |
| " silent: false, \n", | |
| " store_history: false, \n", | |
| " stop_on_error: true\n", | |
| " }\n", | |
| ")\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 297, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "window.buildChart = function(cellElement){\n", | |
| "(function(element) {\n", | |
| " // Execute the following code after requiring `ech`\n", | |
| " require(['ech'], function(ech) {\n", | |
| " \n", | |
| " // The `ech` variable contains echarts\n", | |
| " var echarts = ech\n", | |
| " \n", | |
| " // Append to the current \"Cell Element\" the chart's container\n", | |
| " cellElement.append(\"<div id='main' style='height:500px;'>hi</div>\")\n", | |
| " \n", | |
| " // Init Highcharts\n", | |
| " var myChart = echarts.init(document.getElementById('main'));\n", | |
| " \n", | |
| " // Create data object\n", | |
| " var data = window.outputVar\n", | |
| " \n", | |
| " // Save the dates in a separate variable\n", | |
| " var dates = data.dates\n", | |
| " \n", | |
| " var series = []\n", | |
| " for(var _i=0; _i<data.country_data.length; _i++){\n", | |
| " var _name = data.country_data[_i][\"name\"]\n", | |
| " var _data = data.country_data[_i][\"data\"]\n", | |
| " \n", | |
| " series.push({\n", | |
| " name: _name,\n", | |
| " type: 'line',\n", | |
| " data: _data\n", | |
| " })\n", | |
| " }\n", | |
| " \n", | |
| " \n", | |
| " myChart.setOption({\n", | |
| " title: {\n", | |
| " text: 'Google COVID-19 Mobility'\n", | |
| " },\n", | |
| " tooltip: {\n", | |
| " trigger: 'item'\n", | |
| " },\n", | |
| " grid: {\n", | |
| " left: '3%',\n", | |
| " right: '4%',\n", | |
| " bottom: '3%',\n", | |
| " containLabel: true\n", | |
| " },\n", | |
| " xAxis: {\n", | |
| " type: 'category',\n", | |
| " data: dates // We can get this array directly from the `get_data()` output\n", | |
| " },\n", | |
| " yAxis: {\n", | |
| " type: 'value'\n", | |
| " },\n", | |
| " series: series // We just need to create this\n", | |
| " })\n", | |
| " })\n", | |
| "})(element);\n", | |
| "}\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "window.buildChart = function(cellElement){\n", | |
| "(function(element) {\n", | |
| " // Execute the following code after requiring `ech`\n", | |
| " require(['ech'], function(ech) {\n", | |
| " \n", | |
| " // The `ech` variable contains echarts\n", | |
| " var echarts = ech\n", | |
| " \n", | |
| " // Append to the current \"Cell Element\" the chart's container\n", | |
| " cellElement.append(\"<div id='main' style='height:500px;'>hi</div>\")\n", | |
| " \n", | |
| " // Init Highcharts\n", | |
| " var myChart = echarts.init(document.getElementById('main'));\n", | |
| " \n", | |
| " // Create data object\n", | |
| " var data = window.outputVar\n", | |
| " \n", | |
| " // Save the dates in a separate variable\n", | |
| " var dates = data.dates\n", | |
| " \n", | |
| " var series = []\n", | |
| " for(var _i=0; _i<data.country_data.length; _i++){\n", | |
| " var _name = data.country_data[_i][\"name\"]\n", | |
| " var _data = data.country_data[_i][\"data\"]\n", | |
| " \n", | |
| " series.push({\n", | |
| " name: _name,\n", | |
| " type: 'line',\n", | |
| " data: _data\n", | |
| " })\n", | |
| " }\n", | |
| " \n", | |
| " \n", | |
| " myChart.setOption({\n", | |
| " title: {\n", | |
| " text: 'Google COVID-19 Mobility'\n", | |
| " },\n", | |
| " tooltip: {\n", | |
| " trigger: 'item'\n", | |
| " },\n", | |
| " grid: {\n", | |
| " left: '3%',\n", | |
| " right: '4%',\n", | |
| " bottom: '3%',\n", | |
| " containLabel: true\n", | |
| " },\n", | |
| " xAxis: {\n", | |
| " type: 'category',\n", | |
| " data: dates // We can get this array directly from the `get_data()` output\n", | |
| " },\n", | |
| " yAxis: {\n", | |
| " type: 'value'\n", | |
| " },\n", | |
| " series: series // We just need to create this\n", | |
| " })\n", | |
| " })\n", | |
| "})(element);\n", | |
| "}" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 298, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "window.buildChart(element)\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "window.buildChart(element)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "# Add events" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 299, | |
| "metadata": { | |
| "scrolled": true | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "import json\n", | |
| "import pandas as pd\n", | |
| "import numpy as np\n", | |
| "\n", | |
| "COLUMNS = [\"retail_and_recreation_percent_change_from_baseline\",\n", | |
| " \"grocery_and_pharmacy_percent_change_from_baseline\",\n", | |
| " \"parks_percent_change_from_baseline\",\n", | |
| " \"transit_stations_percent_change_from_baseline\",\n", | |
| " \"workplaces_percent_change_from_baseline\",\n", | |
| " \"residential_percent_change_from_baseline\"]\n", | |
| "DATA_LOCATION = \"/Users/anialent/Projects/notebook-javascript/data/\"\n", | |
| "\n", | |
| "def get_data_all():\n", | |
| " # Get the raw data\n", | |
| " raw_data = pd.read_csv(\"{}Global_Mobility_Report.csv\".format(DATA_LOCATION))\n", | |
| " \n", | |
| " # Take only metrics by state (no sub regions). \n", | |
| " # Note that we only want the records where sub_region_1 is not available\n", | |
| " raw_data = raw_data.fillna(\"NA\")\n", | |
| " raw_data = raw_data.loc[raw_data[\"sub_region_1\"] == 'NA']\n", | |
| "\n", | |
| " # Drop the columns that are not needed\n", | |
| " raw_data = raw_data.drop([\"country_region_code\", \"sub_region_1\", \"sub_region_2\"], axis=1) \n", | |
| " \n", | |
| " # Create the JSON we will use in the Javascript code\n", | |
| " countries = np.unique(raw_data[\"country_region\"])\n", | |
| " final_dict = {\n", | |
| " \"dates\": list(raw_data.loc[raw_data[\"country_region\"]==\"Afghanistan\"].sort_values(\"date\")[\"date\"].values),\n", | |
| " \"country_data\":[]\n", | |
| " \n", | |
| " }\n", | |
| " \n", | |
| " # Create one element of the \"country_data\" array for each country\n", | |
| " for _c in countries:\n", | |
| " _tmp_data = raw_data.loc[raw_data[\"country_region\"] == _c].sort_values(\"date\")\n", | |
| " \n", | |
| " # Create the new element in the final dict for the country data\n", | |
| " final_dict[\"country_data\"].append({\n", | |
| " \"name\": _c\n", | |
| " })\n", | |
| " \n", | |
| " # Create one property for each KPI\n", | |
| " for _col in COLUMNS:\n", | |
| " _data = _tmp_data[_col]\n", | |
| " final_dict[\"country_data\"][len(final_dict[\"country_data\"])-1][_col] = list(_data.values)\n", | |
| "\n", | |
| " # Return the JSON dumpe\n", | |
| " return json.dumps(final_dict)\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 300, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "// The output of get_data will be stored in the following function\n", | |
| "window.outputVarAll = null\n", | |
| "\n", | |
| "IPython.notebook.kernel.execute(\n", | |
| " \"get_data_all()\", \n", | |
| " {\n", | |
| " iopub: {\n", | |
| " output: function(response) {\n", | |
| " // Get output as plain text\n", | |
| " var output = response.content.data[\"text/plain\"];\n", | |
| " console.log(output)\n", | |
| " \n", | |
| " // Remove unwanted characters\n", | |
| " output = output.substring(1, output.length-1).replace(\"\\\\'\",\"'\")\n", | |
| " \n", | |
| " // Set the variable\n", | |
| " window.outputVarAll = JSON.parse(output)\n", | |
| " }\n", | |
| " }\n", | |
| " },\n", | |
| " {\n", | |
| " silent: false, \n", | |
| " store_history: false, \n", | |
| " stop_on_error: true\n", | |
| " }\n", | |
| ")\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "// The output of get_data will be stored in the following function\n", | |
| "window.outputVarAll = null\n", | |
| "\n", | |
| "IPython.notebook.kernel.execute(\n", | |
| " \"get_data_all()\", \n", | |
| " {\n", | |
| " iopub: {\n", | |
| " output: function(response) {\n", | |
| " // Get output as plain text\n", | |
| " var output = response.content.data[\"text/plain\"];\n", | |
| " console.log(output)\n", | |
| " \n", | |
| " // Remove unwanted characters\n", | |
| " output = output.substring(1, output.length-1).replace(\"\\\\'\",\"'\")\n", | |
| " \n", | |
| " // Set the variable\n", | |
| " window.outputVarAll = JSON.parse(output)\n", | |
| " }\n", | |
| " }\n", | |
| " },\n", | |
| " {\n", | |
| " silent: false, \n", | |
| " store_history: false, \n", | |
| " stop_on_error: true\n", | |
| " }\n", | |
| ")\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 301, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "// This time we have to pass some default paramters (countries selection and column to display)\n", | |
| "window.buildChartSelect = function(cellElement, filteredCountries=[],\n", | |
| " column=\"retail_and_recreation_percent_change_from_baseline\"){\n", | |
| " (function(element) {\n", | |
| " // Execute the following code after requiring `ech`\n", | |
| " require(['ech'], function(ech) {\n", | |
| " \n", | |
| " // The `ech` variable contains echarts\n", | |
| " var echarts = ech\n", | |
| " \n", | |
| " // Append to the current \"Cell Element\" the chart's container\n", | |
| " cellElement.append(\"<div id='main2' style='height:500px;'>hi</div>\")\n", | |
| " \n", | |
| " // Init Highcharts\n", | |
| " var myChart = echarts.init(document.getElementById('main2'));\n", | |
| "\n", | |
| " // Create data object\n", | |
| " var data = window.outputVarAll\n", | |
| " \n", | |
| " // Save the dates in a separate variable\n", | |
| " var dates = data.dates\n", | |
| " \n", | |
| " // Generate the series according to the filters\n", | |
| " var series = []\n", | |
| " for(var _i=0; _i<data.country_data.length; _i++){\n", | |
| " if((filteredCountries.length > 0 && filteredCountries.indexOf(data.country_data[_i][\"name\"])>=0) \n", | |
| " || filteredCountries.length === 0){\n", | |
| " // the `series object` will only contain the selected countries (all countries by default)\n", | |
| " var _name = data.country_data[_i][\"name\"] \n", | |
| " \n", | |
| " // the series object will contain only the selected column\n", | |
| " var _data = data.country_data[_i][column] \n", | |
| "\n", | |
| " series.push({\n", | |
| " name: _name,\n", | |
| " type: 'line',\n", | |
| " data: _data\n", | |
| " })\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " myChart.setOption({\n", | |
| " title: {\n", | |
| " text: 'Google COVID-19 Mobility'\n", | |
| " },\n", | |
| " tooltip: {\n", | |
| " trigger: 'item'\n", | |
| " },\n", | |
| " grid: {\n", | |
| " left: '3%',\n", | |
| " right: '4%',\n", | |
| " bottom: '3%',\n", | |
| " containLabel: true\n", | |
| " },\n", | |
| " xAxis: {\n", | |
| " type: 'category',\n", | |
| " data: dates\n", | |
| " },\n", | |
| " yAxis: {\n", | |
| " type: 'value'\n", | |
| " },\n", | |
| " series: series\n", | |
| " })\n", | |
| " })\n", | |
| " })(element);\n", | |
| "}\n", | |
| "\n", | |
| "window.controlsOnChange = function(cellElement){\n", | |
| " // Get the selected countries\n", | |
| " var select = document.getElementById(\"countries\");\n", | |
| " console.log(select)\n", | |
| " var selected = [];\n", | |
| " for (var i = 0; i < select.length; i++) {\n", | |
| " if (select.options[i].selected) selected.push(select.options[i].value);\n", | |
| " }\n", | |
| " \n", | |
| " // Get the selected KPI\n", | |
| " var kpis = document.getElementById(\"kpis\");\n", | |
| " var column = kpis.options[kpis.selectedIndex].value;\n", | |
| " console.log(column)\n", | |
| " // Remove previous visual\n", | |
| " document.getElementById(\"main2\").remove()\n", | |
| " window.buildChartSelect(cellElement, selected, column)\n", | |
| "}\n", | |
| "\n", | |
| "window.buildControls = function(cellElement){\n", | |
| " var data = window.outputVar\n", | |
| " \n", | |
| " // Generate the `select` element for the countries\n", | |
| " var controlHTML = document.createElement(\"select\");\n", | |
| " controlHTML.setAttribute(\"style\", \"height:150px;\");\n", | |
| " controlHTML.setAttribute(\"id\", \"countries\");\n", | |
| " controlHTML.setAttribute(\"multiple\", \"multiple\");\n", | |
| " \n", | |
| " // Generate the inner HTML\n", | |
| " var controlInnerHTML = \"\"\n", | |
| " for(var _i=0; _i<data.country_data.length; _i++){\n", | |
| " var _name = data.country_data[_i][\"name\"]\n", | |
| " controlInnerHTML += `<option value=\"${_name}\">${_name}</option>`\n", | |
| " }\n", | |
| " // Set the inner HTML\n", | |
| " controlHTML.innerHTML = controlInnerHTML\n", | |
| " \n", | |
| " // !!! Enable events on the HTML object: on input change, we want to refresh the chart\n", | |
| " controlHTML.addEventListener('change', function() {\n", | |
| " window.controlsOnChange(cellElement)\n", | |
| " });\n", | |
| " \n", | |
| " // Append the new HTML object to the cell\n", | |
| " cellElement.append(controlHTML)\n", | |
| " \n", | |
| " // Generate the `select` elment to control which KPI to display\n", | |
| " var COLUMNS = [\"retail_and_recreation_percent_change_from_baseline\",\n", | |
| " \"grocery_and_pharmacy_percent_change_from_baseline\",\n", | |
| " \"parks_percent_change_from_baseline\",\n", | |
| " \"transit_stations_percent_change_from_baseline\",\n", | |
| " \"workplaces_percent_change_from_baseline\",\n", | |
| " \"residential_percent_change_from_baseline\"]\n", | |
| " \n", | |
| " // Generate the HTML element\n", | |
| " var controlKPIHTML = document.createElement(\"select\");\n", | |
| " controlKPIHTML.setAttribute(\"id\", \"kpis\");\n", | |
| " \n", | |
| " // Generate the options\n", | |
| " var controlKPIInnerHTML = \"\"\n", | |
| " for(var _i=0; _i<COLUMNS.length; _i++){\n", | |
| " var _name = COLUMNS[_i]\n", | |
| " controlKPIInnerHTML += `<option value=\"${_name}\">${_name}</option>`\n", | |
| " }\n", | |
| " controlKPIHTML.innerHTML = controlKPIInnerHTML\n", | |
| " \n", | |
| " // !!! Enable events on the HTML object: on input change, we want to refresh the chart\n", | |
| " controlKPIHTML.addEventListener('change', function() {\n", | |
| " window.controlsOnChange(cellElement)\n", | |
| " });\n", | |
| " cellElement.append(controlKPIHTML)\n", | |
| "}\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "// This time we have to pass some default paramters (countries selection and column to display)\n", | |
| "window.buildChartSelect = function(cellElement, filteredCountries=[],\n", | |
| " column=\"retail_and_recreation_percent_change_from_baseline\"){\n", | |
| " (function(element) {\n", | |
| " // Execute the following code after requiring `ech`\n", | |
| " require(['ech'], function(ech) {\n", | |
| " \n", | |
| " // The `ech` variable contains echarts\n", | |
| " var echarts = ech\n", | |
| " \n", | |
| " // Append to the current \"Cell Element\" the chart's container\n", | |
| " cellElement.append(\"<div id='main2' style='height:500px;'>hi</div>\")\n", | |
| " \n", | |
| " // Init Highcharts\n", | |
| " var myChart = echarts.init(document.getElementById('main2'));\n", | |
| "\n", | |
| " // Create data object\n", | |
| " var data = window.outputVarAll\n", | |
| " \n", | |
| " // Save the dates in a separate variable\n", | |
| " var dates = data.dates\n", | |
| " \n", | |
| " // Generate the series according to the filters\n", | |
| " var series = []\n", | |
| " for(var _i=0; _i<data.country_data.length; _i++){\n", | |
| " if((filteredCountries.length > 0 && filteredCountries.indexOf(data.country_data[_i][\"name\"])>=0) \n", | |
| " || filteredCountries.length === 0){\n", | |
| " // the `series object` will only contain the selected countries (all countries by default)\n", | |
| " var _name = data.country_data[_i][\"name\"] \n", | |
| " \n", | |
| " // the series object will contain only the selected column\n", | |
| " var _data = data.country_data[_i][column] \n", | |
| "\n", | |
| " series.push({\n", | |
| " name: _name,\n", | |
| " type: 'line',\n", | |
| " data: _data\n", | |
| " })\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " myChart.setOption({\n", | |
| " title: {\n", | |
| " text: 'Google COVID-19 Mobility'\n", | |
| " },\n", | |
| " tooltip: {\n", | |
| " trigger: 'item'\n", | |
| " },\n", | |
| " grid: {\n", | |
| " left: '3%',\n", | |
| " right: '4%',\n", | |
| " bottom: '3%',\n", | |
| " containLabel: true\n", | |
| " },\n", | |
| " xAxis: {\n", | |
| " type: 'category',\n", | |
| " data: dates\n", | |
| " },\n", | |
| " yAxis: {\n", | |
| " type: 'value'\n", | |
| " },\n", | |
| " series: series\n", | |
| " })\n", | |
| " })\n", | |
| " })(element);\n", | |
| "}\n", | |
| "\n", | |
| "window.controlsOnChange = function(cellElement){\n", | |
| " // Get the selected countries\n", | |
| " var select = document.getElementById(\"countries\");\n", | |
| " console.log(select)\n", | |
| " var selected = [];\n", | |
| " for (var i = 0; i < select.length; i++) {\n", | |
| " if (select.options[i].selected) selected.push(select.options[i].value);\n", | |
| " }\n", | |
| " \n", | |
| " // Get the selected KPI\n", | |
| " var kpis = document.getElementById(\"kpis\");\n", | |
| " var column = kpis.options[kpis.selectedIndex].value;\n", | |
| " console.log(column)\n", | |
| " // Remove previous visual\n", | |
| " document.getElementById(\"main2\").remove()\n", | |
| " window.buildChartSelect(cellElement, selected, column)\n", | |
| "}\n", | |
| "\n", | |
| "window.buildControls = function(cellElement){\n", | |
| " var data = window.outputVar\n", | |
| " \n", | |
| " // Generate the `select` element for the countries\n", | |
| " var controlHTML = document.createElement(\"select\");\n", | |
| " controlHTML.setAttribute(\"style\", \"height:150px;\");\n", | |
| " controlHTML.setAttribute(\"id\", \"countries\");\n", | |
| " controlHTML.setAttribute(\"multiple\", \"multiple\");\n", | |
| " \n", | |
| " // Generate the inner HTML\n", | |
| " var controlInnerHTML = \"\"\n", | |
| " for(var _i=0; _i<data.country_data.length; _i++){\n", | |
| " var _name = data.country_data[_i][\"name\"]\n", | |
| " controlInnerHTML += `<option value=\"${_name}\">${_name}</option>`\n", | |
| " }\n", | |
| " // Set the inner HTML\n", | |
| " controlHTML.innerHTML = controlInnerHTML\n", | |
| " \n", | |
| " // !!! Enable events on the HTML object: on input change, we want to refresh the chart\n", | |
| " controlHTML.addEventListener('change', function() {\n", | |
| " window.controlsOnChange(cellElement)\n", | |
| " });\n", | |
| " \n", | |
| " // Append the new HTML object to the cell\n", | |
| " cellElement.append(controlHTML)\n", | |
| " \n", | |
| " // Generate the `select` elment to control which KPI to display\n", | |
| " var COLUMNS = [\"retail_and_recreation_percent_change_from_baseline\",\n", | |
| " \"grocery_and_pharmacy_percent_change_from_baseline\",\n", | |
| " \"parks_percent_change_from_baseline\",\n", | |
| " \"transit_stations_percent_change_from_baseline\",\n", | |
| " \"workplaces_percent_change_from_baseline\",\n", | |
| " \"residential_percent_change_from_baseline\"]\n", | |
| " \n", | |
| " // Generate the HTML element\n", | |
| " var controlKPIHTML = document.createElement(\"select\");\n", | |
| " controlKPIHTML.setAttribute(\"id\", \"kpis\");\n", | |
| " \n", | |
| " // Generate the options\n", | |
| " var controlKPIInnerHTML = \"\"\n", | |
| " for(var _i=0; _i<COLUMNS.length; _i++){\n", | |
| " var _name = COLUMNS[_i]\n", | |
| " controlKPIInnerHTML += `<option value=\"${_name}\">${_name}</option>`\n", | |
| " }\n", | |
| " controlKPIHTML.innerHTML = controlKPIInnerHTML\n", | |
| " \n", | |
| " // !!! Enable events on the HTML object: on input change, we want to refresh the chart\n", | |
| " controlKPIHTML.addEventListener('change', function() {\n", | |
| " window.controlsOnChange(cellElement)\n", | |
| " });\n", | |
| " cellElement.append(controlKPIHTML)\n", | |
| "}" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 302, | |
| "metadata": { | |
| "scrolled": false | |
| }, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "window.buildChartSelect(element)\n", | |
| "window.buildControls(element)\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| "window.buildChartSelect(element)\n", | |
| "window.buildControls(element)\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [] | |
| } | |
| ], | |
| "metadata": { | |
| "kernelspec": { | |
| "display_name": "Python 3", | |
| "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.7.4" | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 2 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment