Skip to content

Instantly share code, notes, and snippets.

@43trh
Forked from nite/js.ipynb
Created March 24, 2025 16:53
Show Gist options
  • Select an option

  • Save 43trh/b39a044e9d87efbd00d3c2c3bb170ea5 to your computer and use it in GitHub Desktop.

Select an option

Save 43trh/b39a044e9d87efbd00d3c2c3bb170ea5 to your computer and use it in GitHub Desktop.

Revisions

  1. @nite nite revised this gist Apr 1, 2019. 1 changed file with 0 additions and 8 deletions.
    8 changes: 0 additions & 8 deletions js2.ipynb
    Original file line number Diff line number Diff line change
    @@ -59,14 +59,6 @@
    "name": "stderr",
    "output_type": "stream",
    "text": [
    "/Users/andyc/miniconda3/envs/tca/lib/python3.6/site-packages/ipykernel_launcher.py:2: FutureWarning: Sorting because non-concatenation axis is not aligned. A future version\n",
    "of pandas will change to not sort by default.\n",
    "\n",
    "To accept the future behavior, pass 'sort=False'.\n",
    "\n",
    "To retain the current behavior and silence the warning, pass 'sort=True'.\n",
    "\n",
    " \n"
    ]
    }
    ],
  2. @nite nite revised this gist Apr 1, 2019. No changes.
  3. @nite nite revised this gist Apr 1, 2019. 1 changed file with 273 additions and 0 deletions.
    273 changes: 273 additions & 0 deletions js2.ipynb
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,273 @@
    {
    "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": [
    "/Users/andyc/miniconda3/envs/tca/lib/python3.6/site-packages/ipykernel_launcher.py:2: FutureWarning: Sorting because non-concatenation axis is not aligned. A future version\n",
    "of pandas will change to not sort by default.\n",
    "\n",
    "To accept the future behavior, pass 'sort=False'.\n",
    "\n",
    "To retain the current behavior and silence the warning, pass 'sort=True'.\n",
    "\n",
    " \n"
    ]
    }
    ],
    "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
    }
  4. @nite nite revised this gist Apr 1, 2019. No changes.
  5. @nite nite revised this gist Apr 1, 2019. No changes.
  6. @nite nite revised this gist Apr 1, 2019. 1 changed file with 0 additions and 179 deletions.
    179 changes: 0 additions & 179 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -1,179 +0,0 @@
    {
    "cells": [
    {
    "cell_type": "code",
    "execution_count": 15,
    "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": 16,
    "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": 17,
    "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": 18,
    "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",
    "})()"
    ]
    }
    ],
    "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
    }
  7. @nite nite created this gist Apr 1, 2019.
    179 changes: 179 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,179 @@
    {
    "cells": [
    {
    "cell_type": "code",
    "execution_count": 15,
    "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": 16,
    "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": 17,
    "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": 18,
    "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",
    "})()"
    ]
    }
    ],
    "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
    }
    179 changes: 179 additions & 0 deletions js.ipynb
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,179 @@
    {
    "cells": [
    {
    "cell_type": "code",
    "execution_count": 15,
    "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": 16,
    "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": 17,
    "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": 18,
    "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",
    "})()"
    ]
    }
    ],
    "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
    }