Skip to content

Instantly share code, notes, and snippets.

@nite
Last active April 1, 2019 21:40
Show Gist options
  • Save nite/2e1f0be26b493f034108d30b9f1cc994 to your computer and use it in GitHub Desktop.
Save nite/2e1f0be26b493f034108d30b9f1cc994 to your computer and use it in GitHub Desktop.
Jupyter Notebook with client-side javascript interactive data visualisation in d3 & Plotly plots, plus a http fetch
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
{
"cells": [
{
"cell_type": "code",
"execution_count": 28,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"require.config({\n",
" paths: {\n",
" d3: 'https://d3js.org/d3.v5.min',\n",
" plotly: 'https://cdn.plot.ly/plotly-latest'\n",
" }\n",
"});\n",
"require(['d3','plotly'], (d3,plotly) => {\n",
" window.d3 = d3;\n",
" window.plotly = window.Plotly = plotly;\n",
"})\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"require.config({\n",
" paths: {\n",
" d3: 'https://d3js.org/d3.v5.min',\n",
" plotly: 'https://cdn.plot.ly/plotly-latest'\n",
" }\n",
"});\n",
"require(['d3','plotly'], (d3,plotly) => {\n",
" window.d3 = d3;\n",
" window.plotly = window.Plotly = plotly;\n",
"})"
]
},
{
"cell_type": "code",
"execution_count": 31,
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd"
]
},
{
"cell_type": "code",
"execution_count": 69,
"metadata": {},
"outputs": [
{
"name": "stderr",
"output_type": "stream",
"text": [
]
}
],
"source": [
"import glob, os \n",
"df = pd.concat(map(pd.read_csv, glob.glob(os.path.join('dutch-energy/Electricity/', \"*.csv\"))))\n"
]
},
{
"cell_type": "code",
"execution_count": 71,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"(3565793, 14)"
]
},
"execution_count": 71,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"df.shape"
]
},
{
"cell_type": "code",
"execution_count": 59,
"metadata": {},
"outputs": [],
"source": [
"import urllib.request\n",
"import zipfile\n",
"\n",
"urllib.request.urlretrieve('http://api.worldbank.org/v2/en/topic/6?downloadformat=csv', 'forests.zip')\n",
"zip = zipfile.ZipFile('forests.zip')\n",
"zip.extractall()\n"
]
},
{
"cell_type": "code",
"execution_count": 62,
"metadata": {},
"outputs": [],
"source": [
"df = pd.read_csv('API_6_DS2_en_csv_v2_10518155.csv', skiprows=4)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from IPython.display import Javascript\n",
"Javascript('window.df={}'.format(df.head(1000).to_json(orient='records')))"
]
},
{
"cell_type": "code",
"execution_count": 67,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"Plotly.plot( element[0], [{\n",
" x: [1, 2, 3, 4, 5],\n",
" y: [1, 2, 4, 8, 16] }], {\n",
" margin: { t: 0 } \n",
"});\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"Plotly.plot( element[0], [{\n",
" x: [1, 2, 3, 4, 5],\n",
" y: [1, 2, 4, 8, 16] }], {\n",
" margin: { t: 0 } \n",
"});"
]
},
{
"cell_type": "code",
"execution_count": 68,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"var data = [11, 2, 4, 8, 16, 8, 4, 2, 1]\n",
"\n",
"var svg = d3.select(element.get(0)).append('svg')\n",
" .attr('width', 400)\n",
" .attr('height', 200);\n",
"svg.selectAll('circle')\n",
" .data(data)\n",
" .enter()\n",
" .append('circle')\n",
" .attr(\"cx\", function(d, i) {return 40 * (i + 1);})\n",
" .attr(\"cy\", function(d, i) {return 100 + 30 * (i % 3 - 1);})\n",
" .style(\"fill\", \"#1570a4\")\n",
" .transition().duration(2000)\n",
" .attr(\"r\", function(d) {return 2*d;})\n",
";\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"var data = [11, 2, 4, 8, 16, 8, 4, 2, 1]\n",
"\n",
"var svg = d3.select(element.get(0)).append('svg')\n",
" .attr('width', 400)\n",
" .attr('height', 200);\n",
"svg.selectAll('circle')\n",
" .data(data)\n",
" .enter()\n",
" .append('circle')\n",
" .attr(\"cx\", function(d, i) {return 40 * (i + 1);})\n",
" .attr(\"cy\", function(d, i) {return 100 + 30 * (i % 3 - 1);})\n",
" .style(\"fill\", \"#1570a4\")\n",
" .transition().duration(2000)\n",
" .attr(\"r\", function(d) {return 2*d;})\n",
";"
]
},
{
"cell_type": "code",
"execution_count": 66,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"(async () => {\n",
" let res = await fetch('http://localhost:6001/status-check');\n",
" res = await res.json()\n",
" console.log(res.result);\n",
"})()\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"(async () => {\n",
" let res = await fetch('http://localhost:6001/status-check');\n",
" res = await res.json()\n",
" console.log(res.result);\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.6.7"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
@nite
Copy link
Author

nite commented Apr 1, 2019

Manually download & extract something like https://www.kaggle.com/lucabasa/dutch-energy/version/1 to test out for the 2nd version, which includes marshalling a dataframe for use in clientside javascript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment