Jupyter Notebook with client-side javascript interactive data visualisation in d3 & Plotly plots, plus a http fetch

js.ipynb

js2.ipynb

{
 "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
}

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