Last active
January 5, 2018 06:53
-
-
Save jacobbridges/52b88708f9757ef799083528ebcf433b to your computer and use it in GitHub Desktop.
This file contains 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": [ | |
"### Jupyter and JS\n", | |
"\n", | |
"Jupyter uses [requirejs](http://requirejs.org/) to manage its Javascript libraries, which means we can \"require\" Highcharts into the notebook.\n", | |
"\n", | |
"Since Highcharts does not expose itself according to the requirejs standard, I have made it into a shim. The exporting feature is a separate file in the Highcharts [source](http://code.highcharts.com/), so I loaded it as a separate shim. " | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 1, | |
"metadata": { | |
"ExecuteTime": { | |
"end_time": "2017-01-30T16:20:09.241298", | |
"start_time": "2017-01-30T16:20:09.214886" | |
}, | |
"collapsed": false | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"application/javascript": [ | |
"require.config({\n", | |
" paths: {\n", | |
" highcharts: \"https://code.highcharts.com/highcharts\",\n", | |
" highcharts_exports: \"https://code.highcharts.com/modules/exporting\",\n", | |
" jquery: \"https://code.jquery.com/jquery-3.1.1.min\",\n", | |
" },\n", | |
" shim: {\n", | |
" highcharts: {\n", | |
" exports: \"Highcharts\",\n", | |
" deps: [\"jquery\"]\n", | |
" },\n", | |
" highcharts_exports: {\n", | |
" exports: \"Highcharts\",\n", | |
" deps: [\"highcharts\"]\n", | |
" }\n", | |
" }\n", | |
"});" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
} | |
], | |
"source": [ | |
"%%javascript\n", | |
"require.config({\n", | |
" paths: {\n", | |
" highcharts: \"http://code.highcharts.com/highcharts\",\n", | |
" highcharts_exports: \"http://code.highcharts.com/modules/exporting\",\n", | |
" jquery: \"https://code.jquery.com/jquery-3.1.1.min\",\n", | |
" },\n", | |
" shim: {\n", | |
" highcharts: {\n", | |
" exports: \"Highcharts\",\n", | |
" deps: [\"jquery\"]\n", | |
" },\n", | |
" highcharts_exports: {\n", | |
" exports: \"Highcharts\",\n", | |
" deps: [\"highcharts\"]\n", | |
" }\n", | |
" }\n", | |
"});" | |
] | |
}, | |
{ | |
"cell_type": "markdown", | |
"metadata": {}, | |
"source": [ | |
"### Python to Javascript\n", | |
"\n", | |
"To translate the data from the Python realm into the Javascript realm felt a little \"hacky\", but it works. This takes the Python variable `chart_data` and binds it to Javascript's global `window` variable as `window.chartData`. If anyone has a prettier method please tweet me ([@codeweavr](http://twitter.com/codeweavr)) and I will edit this post with your recommendations." | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 2, | |
"metadata": { | |
"ExecuteTime": { | |
"end_time": "2017-01-30T16:20:09.373445", | |
"start_time": "2017-01-30T16:20:09.243769" | |
}, | |
"collapsed": false | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"application/javascript": [ | |
"window.chartData=[{\"data\": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], \"name\": \"Tokyo\"}, {\"data\": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], \"name\": \"New York\"}, {\"data\": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], \"name\": \"Berlin\"}, {\"data\": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], \"name\": \"London\"}];" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"execution_count": 2, | |
"metadata": {}, | |
"output_type": "execute_result" | |
} | |
], | |
"source": [ | |
"import json\n", | |
"from IPython.display import Javascript\n", | |
"\n", | |
"chart_data = [\n", | |
" {\n", | |
" 'name': 'Tokyo',\n", | |
" 'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]\n", | |
" }, \n", | |
" {\n", | |
" 'name': 'New York',\n", | |
" 'data': [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]\n", | |
" }, \n", | |
" {\n", | |
" 'name': 'Berlin',\n", | |
" 'data': [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]\n", | |
" }, \n", | |
" {\n", | |
" 'name': 'London',\n", | |
" 'data': [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]\n", | |
" }\n", | |
"]\n", | |
"\n", | |
"Javascript(\"window.chartData={};\".format(json.dumps(chart_data)))" | |
] | |
}, | |
{ | |
"cell_type": "markdown", | |
"metadata": {}, | |
"source": [ | |
"# The Graph\n", | |
"\n", | |
"To display the graph, I used the %%Javascript cell magic method and used the Highcharts demo code:" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 3, | |
"metadata": { | |
"ExecuteTime": { | |
"end_time": "2017-01-30T16:20:09.505978", | |
"start_time": "2017-01-30T16:20:09.374514" | |
}, | |
"collapsed": false | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"application/javascript": [ | |
"// Since I append the div later, sometimes there are multiple divs.\n", | |
"$(\"#container\").remove();\n", | |
"\n", | |
"// Make the cdiv to contain the chart.\n", | |
"element.append('<div id=\"container\" style=\"height: 400px; margin: 0 auto\"></div>');\n", | |
"\n", | |
"// Require highcarts and make the chart.\n", | |
"require(['highcharts_exports'], function(Highcharts) {\n", | |
" $('#container').highcharts({\n", | |
" title: {\n", | |
" text: 'Monthly Average Temperature',\n", | |
" x: -20 //center\n", | |
" },\n", | |
" subtitle: {\n", | |
" text: 'Source: WorldClimate.com',\n", | |
" x: -20\n", | |
" },\n", | |
" xAxis: {\n", | |
" categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n", | |
" 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n", | |
" },\n", | |
" yAxis: {\n", | |
" title: {\n", | |
" text: 'Temperature (°C)'\n", | |
" },\n", | |
" plotLines: [{\n", | |
" value: 0,\n", | |
" width: 1,\n", | |
" color: '#808080'\n", | |
" }]\n", | |
" },\n", | |
" tooltip: {\n", | |
" valueSuffix: '°C'\n", | |
" },\n", | |
" legend: {\n", | |
" layout: 'vertical',\n", | |
" align: 'right',\n", | |
" verticalAlign: 'middle',\n", | |
" borderWidth: 0\n", | |
" },\n", | |
" // This is where I used the chart_data from Python\n", | |
" series: window.chartData\n", | |
" });\n", | |
"});" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
} | |
], | |
"source": [ | |
"%%javascript\n", | |
"// Since I append the div later, sometimes there are multiple divs.\n", | |
"$(\"#container\").remove();\n", | |
"\n", | |
"// Make the cdiv to contain the chart.\n", | |
"element.append('<div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>');\n", | |
"\n", | |
"// Require highcarts and make the chart.\n", | |
"require(['highcharts_exports'], function(Highcharts) {\n", | |
" $('#container').highcharts({\n", | |
" title: {\n", | |
" text: 'Monthly Average Temperature',\n", | |
" x: -20 //center\n", | |
" },\n", | |
" subtitle: {\n", | |
" text: 'Source: WorldClimate.com',\n", | |
" x: -20\n", | |
" },\n", | |
" xAxis: {\n", | |
" categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n", | |
" 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n", | |
" },\n", | |
" yAxis: {\n", | |
" title: {\n", | |
" text: 'Temperature (°C)'\n", | |
" },\n", | |
" plotLines: [{\n", | |
" value: 0,\n", | |
" width: 1,\n", | |
" color: '#808080'\n", | |
" }]\n", | |
" },\n", | |
" tooltip: {\n", | |
" valueSuffix: '°C'\n", | |
" },\n", | |
" legend: {\n", | |
" layout: 'vertical',\n", | |
" align: 'right',\n", | |
" verticalAlign: 'middle',\n", | |
" borderWidth: 0\n", | |
" },\n", | |
" // This is where I used the chart_data from Python\n", | |
" series: window.chartData\n", | |
" });\n", | |
"});" | |
] | |
} | |
], | |
"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.5.2" | |
} | |
}, | |
"nbformat": 4, | |
"nbformat_minor": 1 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment