-
-
Save gnestor/f1893e0226ced227e910f11b769adc06 to your computer and use it in GitHub Desktop.
Demo notebook for @jupyterlab/javascript-extension: https://github.com/jupyterlab/jupyterlab/pull/4515
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": [ | |
| "# javascript-extension" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "## Running Javascript from a notebook in JupyterLab\n", | |
| "\n", | |
| "We can use `IPython.display.Javascript`:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 29, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "console.log(\"hello\");" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "execution_count": 29, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "from IPython.display import Javascript\n", | |
| "\n", | |
| "Javascript('console.log(\"hello\");')" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "We can also use the `%%javascript` magic provided by ipython:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 30, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| " console.log('hello')" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| " console.log('hello')" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "## Globals\n", | |
| "\n", | |
| "javascript-extension exposes the folloiwing globals:\n", | |
| "\n", | |
| "* `window`\n", | |
| "* `document`\n", | |
| "* `element`: The DOM node of the cell's output\n", | |
| "\n", | |
| "We can access properties on `window`:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 31, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| " console.log(window.location.href)" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| " console.log(window.location.href)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "We can append elements to the output element:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 32, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| " element.innerHTML = '<pre>hello</pre>'" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| " element.innerHTML = '<pre>hello</pre>'" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "## Using Javascript libraries\n", | |
| "\n", | |
| "We can add d3.js to the _window_:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 33, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| " var script = document.createElement('script');\n", | |
| " script.type = 'text/javascript';\n", | |
| " script.src = '//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js';\n", | |
| " document.head.appendChild(script);\n", | |
| " console.log(window.d3)" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "%%javascript\n", | |
| " var script = document.createElement('script');\n", | |
| " script.type = 'text/javascript';\n", | |
| " script.src = '//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js';\n", | |
| " document.head.appendChild(script);\n", | |
| " console.log(window.d3)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "We can use d3.js to append an svg animation to the output:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 34, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "\n", | |
| "var svg = d3.select(element)\n", | |
| " .append(\"svg\")\n", | |
| " .attr(\"width\", 300)\n", | |
| " .attr(\"height\", 300); \n", | |
| "\n", | |
| "svg.append(\"circle\")\n", | |
| " .style(\"stroke\", \"gray\")\n", | |
| " .style(\"fill\", \"cyan\")\n", | |
| " .attr(\"r\", 130)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .attr(\"cy\", 150)\n", | |
| " .transition()\n", | |
| " .delay(100)\n", | |
| " .duration(10000) \n", | |
| " .attr(\"r\", 10)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .style(\"fill\", \"blue\"); \n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "execution_count": 34, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "svg_script = '''\n", | |
| "var svg = d3.select(element)\n", | |
| " .append(\"svg\")\n", | |
| " .attr(\"width\", 300)\n", | |
| " .attr(\"height\", 300); \n", | |
| "\n", | |
| "svg.append(\"circle\")\n", | |
| " .style(\"stroke\", \"gray\")\n", | |
| " .style(\"fill\", \"cyan\")\n", | |
| " .attr(\"r\", 130)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .attr(\"cy\", 150)\n", | |
| " .transition()\n", | |
| " .delay(100)\n", | |
| " .duration(10000) \n", | |
| " .attr(\"r\", 10)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .style(\"fill\", \"blue\"); \n", | |
| "'''\n", | |
| "\n", | |
| "Javascript(svg_script)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "We can use d3.js to visualize data (from a URL) to the output:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 35, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "\n", | |
| "var parseDate = d3.timeParse(\"%m/%d/%Y %H:%M:%S %p\"),\n", | |
| " formatCount = d3.format(\",.0f\");\n", | |
| "\n", | |
| "var margin = {top: 10, right: 30, bottom: 30, left: 30},\n", | |
| " width = 960 - margin.left - margin.right,\n", | |
| " height = 500 - margin.top - margin.bottom;\n", | |
| "\n", | |
| "var x = d3.scaleTime()\n", | |
| " .domain([new Date(2015, 0, 1), new Date(2016, 0, 1)])\n", | |
| " .rangeRound([0, width]);\n", | |
| "\n", | |
| "var y = d3.scaleLinear()\n", | |
| " .range([height, 0]);\n", | |
| "\n", | |
| "var histogram = d3.histogram()\n", | |
| " .value(function(d) { return d.date; })\n", | |
| " .domain(x.domain())\n", | |
| " .thresholds(x.ticks(d3.timeWeek));\n", | |
| "\n", | |
| "var svg = d3.select(element).append(\"svg\")\n", | |
| " .attr(\"width\", width + margin.left + margin.right)\n", | |
| " .attr(\"height\", height + margin.top + margin.bottom)\n", | |
| " .append(\"g\")\n", | |
| " .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n", | |
| "\n", | |
| "svg.append(\"g\")\n", | |
| " .attr(\"class\", \"axis axis--x\")\n", | |
| " .attr(\"transform\", \"translate(0,\" + height + \")\")\n", | |
| " .call(d3.axisBottom(x));\n", | |
| "\n", | |
| "d3.csv(\"https://gist.githubusercontent.com/mbostock/b2fee5dae98555cf78c9e4c5074b87c3/raw/ef984920d0d607ab06af4b5a325d09cbd6c43bd5/homicides.csv\", type, function(error, data) {\n", | |
| " if (error) throw error;\n", | |
| "\n", | |
| " var bins = histogram(data);\n", | |
| "\n", | |
| " y.domain([0, d3.max(bins, function(d) { return d.length; })]);\n", | |
| "\n", | |
| " var bar = svg.selectAll(\".bar\")\n", | |
| " .data(bins)\n", | |
| " .enter().append(\"g\")\n", | |
| " .attr(\"class\", \"bar\")\n", | |
| " .attr(\"transform\", function(d) { return \"translate(\" + x(d.x0) + \",\" + y(d.length) + \")\"; });\n", | |
| "\n", | |
| " bar.append(\"rect\")\n", | |
| " .attr(\"x\", 1)\n", | |
| " .attr(\"width\", function(d) { return x(d.x1) - x(d.x0) - 1; })\n", | |
| " .attr(\"height\", function(d) { return height - y(d.length); });\n", | |
| "\n", | |
| " bar.append(\"text\")\n", | |
| " .attr(\"dy\", \".75em\")\n", | |
| " .attr(\"y\", 6)\n", | |
| " .attr(\"x\", function(d) { return (x(d.x1) - x(d.x0)) / 2; })\n", | |
| " .attr(\"text-anchor\", \"middle\")\n", | |
| " .text(function(d) { return formatCount(d.length); });\n", | |
| "});\n", | |
| "\n", | |
| "function type(d) {\n", | |
| " d.date = parseDate(d.date);\n", | |
| " return d;\n", | |
| "}\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "execution_count": 35, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "d3_script = '''\n", | |
| "var parseDate = d3.timeParse(\"%m/%d/%Y %H:%M:%S %p\"),\n", | |
| " formatCount = d3.format(\",.0f\");\n", | |
| "\n", | |
| "var margin = {top: 10, right: 30, bottom: 30, left: 30},\n", | |
| " width = 960 - margin.left - margin.right,\n", | |
| " height = 500 - margin.top - margin.bottom;\n", | |
| "\n", | |
| "var x = d3.scaleTime()\n", | |
| " .domain([new Date(2015, 0, 1), new Date(2016, 0, 1)])\n", | |
| " .rangeRound([0, width]);\n", | |
| "\n", | |
| "var y = d3.scaleLinear()\n", | |
| " .range([height, 0]);\n", | |
| "\n", | |
| "var histogram = d3.histogram()\n", | |
| " .value(function(d) { return d.date; })\n", | |
| " .domain(x.domain())\n", | |
| " .thresholds(x.ticks(d3.timeWeek));\n", | |
| "\n", | |
| "var svg = d3.select(element).append(\"svg\")\n", | |
| " .attr(\"width\", width + margin.left + margin.right)\n", | |
| " .attr(\"height\", height + margin.top + margin.bottom)\n", | |
| " .append(\"g\")\n", | |
| " .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n", | |
| "\n", | |
| "svg.append(\"g\")\n", | |
| " .attr(\"class\", \"axis axis--x\")\n", | |
| " .attr(\"transform\", \"translate(0,\" + height + \")\")\n", | |
| " .call(d3.axisBottom(x));\n", | |
| "\n", | |
| "d3.csv(\"https://gist.githubusercontent.com/mbostock/b2fee5dae98555cf78c9e4c5074b87c3/raw/ef984920d0d607ab06af4b5a325d09cbd6c43bd5/homicides.csv\", type, function(error, data) {\n", | |
| " if (error) throw error;\n", | |
| "\n", | |
| " var bins = histogram(data);\n", | |
| "\n", | |
| " y.domain([0, d3.max(bins, function(d) { return d.length; })]);\n", | |
| "\n", | |
| " var bar = svg.selectAll(\".bar\")\n", | |
| " .data(bins)\n", | |
| " .enter().append(\"g\")\n", | |
| " .attr(\"class\", \"bar\")\n", | |
| " .attr(\"transform\", function(d) { return \"translate(\" + x(d.x0) + \",\" + y(d.length) + \")\"; });\n", | |
| "\n", | |
| " bar.append(\"rect\")\n", | |
| " .attr(\"x\", 1)\n", | |
| " .attr(\"width\", function(d) { return x(d.x1) - x(d.x0) - 1; })\n", | |
| " .attr(\"height\", function(d) { return height - y(d.length); });\n", | |
| "\n", | |
| " bar.append(\"text\")\n", | |
| " .attr(\"dy\", \".75em\")\n", | |
| " .attr(\"y\", 6)\n", | |
| " .attr(\"x\", function(d) { return (x(d.x1) - x(d.x0)) / 2; })\n", | |
| " .attr(\"text-anchor\", \"middle\")\n", | |
| " .text(function(d) { return formatCount(d.length); });\n", | |
| "});\n", | |
| "\n", | |
| "function type(d) {\n", | |
| " d.date = parseDate(d.date);\n", | |
| " return d;\n", | |
| "}\n", | |
| "'''\n", | |
| "\n", | |
| "Javascript(d3_script)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "Use d3.js to visualize data (from Python) to the output:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 36, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "\n", | |
| "var parseDate = d3.timeParse(\"%m/%d/%Y %H:%M:%S %p\"),\n", | |
| " formatCount = d3.format(\",.0f\");\n", | |
| "\n", | |
| "var margin = {top: 10, right: 30, bottom: 30, left: 30},\n", | |
| " width = 960 - margin.left - margin.right,\n", | |
| " height = 500 - margin.top - margin.bottom;\n", | |
| "\n", | |
| "var x = d3.scaleTime()\n", | |
| " .domain([new Date(2015, 0, 1), new Date(2016, 0, 1)])\n", | |
| " .rangeRound([0, width]);\n", | |
| "\n", | |
| "var y = d3.scaleLinear()\n", | |
| " .range([height, 0]);\n", | |
| "\n", | |
| "var histogram = d3.histogram()\n", | |
| " .value(function(d) { return d.date; })\n", | |
| " .domain(x.domain())\n", | |
| " .thresholds(x.ticks(d3.timeWeek));\n", | |
| "\n", | |
| "var svg = d3.select(element).append(\"svg\")\n", | |
| " .attr(\"width\", width + margin.left + margin.right)\n", | |
| " .attr(\"height\", height + margin.top + margin.bottom)\n", | |
| " .append(\"g\")\n", | |
| " .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n", | |
| "\n", | |
| "svg.append(\"g\")\n", | |
| " .attr(\"class\", \"axis axis--x\")\n", | |
| " .attr(\"transform\", \"translate(0,\" + height + \")\")\n", | |
| " .call(d3.axisBottom(x));\n", | |
| " \n", | |
| "var data = [{\"id\":10097071,\"case\":\"HY285524\",\"date\":1433281279000},{\"id\":21907,\"case\":\"HY291065\",\"date\":1433649000000},{\"id\":21908,\"case\":\"HY291065\",\"date\":1433649000000},{\"id\":10156667,\"case\":\"HY345298\",\"date\":1437189420000},{\"id\":10244875,\"case\":\"HY433114\",\"date\":1442883000000},{\"id\":22430,\"case\":\"HY551683\",\"date\":1451225100000},{\"id\":10047709,\"case\":\"HY237154\",\"date\":1430085516000},{\"id\":22335,\"case\":\"HY346207\",\"date\":1436025600000},{\"id\":22336,\"case\":\"HY346207\",\"date\":1436025600000},{\"id\":22337,\"case\":\"HY346207\",\"date\":1436025600000},{\"id\":22338,\"case\":\"HZ148668\",\"date\":1449768600000},{\"id\":22362,\"case\":\"HY392281\",\"date\":1441382940000},{\"id\":22387,\"case\":\"HY471497\",\"date\":1445614920000},{\"id\":22407,\"case\":\"HY471252\",\"date\":1445608860000},{\"id\":21714,\"case\":\"HY102349\",\"date\":1420264200000},{\"id\":21715,\"case\":\"HY105400\",\"date\":1420495860000},{\"id\":21716,\"case\":\"HY105478\",\"date\":1420505340000},{\"id\":21717,\"case\":\"HY106072\",\"date\":1420558680000},{\"id\":21718,\"case\":\"HY106072\",\"date\":1420566780000},{\"id\":21719,\"case\":\"HY108387\",\"date\":1420752600000},{\"id\":21721,\"case\":\"HY109537\",\"date\":1420849500000},{\"id\":21722,\"case\":\"HY106555\",\"date\":1420820400000},{\"id\":21723,\"case\":\"HY114053\",\"date\":1421187000000},{\"id\":21724,\"case\":\"HY113713\",\"date\":1421170800000},{\"id\":21725,\"case\":\"HY115036\",\"date\":1421256120000},{\"id\":21727,\"case\":\"HY117698\",\"date\":1421436120000},{\"id\":21728,\"case\":\"HY118469\",\"date\":1421501160000},{\"id\":21729,\"case\":\"HY118913\",\"date\":1421521800000},{\"id\":21730,\"case\":\"HY119535\",\"date\":1421583600000},{\"id\":21731,\"case\":\"HY121768\",\"date\":1421750640000},{\"id\":21732,\"case\":\"HY122767\",\"date\":1421800920000},{\"id\":21733,\"case\":\"HY122962\",\"date\":1421832300000},{\"id\":21734,\"case\":\"HY123702\",\"date\":1421869140000},{\"id\":21735,\"case\":\"HY126186\",\"date\":1422041100000},{\"id\":21736,\"case\":\"HY126149\",\"date\":1422044280000},{\"id\":21737,\"case\":\"HY126583\",\"date\":1422065580000},{\"id\":21738,\"case\":\"HY128133\",\"date\":1422359640000},{\"id\":21739,\"case\":\"HY130523\",\"date\":1422392400000},{\"id\":21741,\"case\":\"HY132431\",\"date\":1422497160000},{\"id\":21742,\"case\":\"HY132441\",\"date\":1422501600000},{\"id\":21743,\"case\":\"HY134398\",\"date\":1422640320000},{\"id\":21744,\"case\":\"HY135181\",\"date\":1422705720000},{\"id\":21745,\"case\":\"HY136615\",\"date\":1422823980000},{\"id\":21746,\"case\":\"HY136871\",\"date\":1422868560000},{\"id\":21748,\"case\":\"HY139558\",\"date\":1423066020000},{\"id\":21749,\"case\":\"HY126100\",\"date\":1422643980000},{\"id\":21750,\"case\":\"HY135441\",\"date\":1422919980000},{\"id\":21752,\"case\":\"HY144738\",\"date\":1423437960000},{\"id\":21753,\"case\":\"HY146099\",\"date\":1423517460000},{\"id\":21755,\"case\":\"HY144198\",\"date\":1423397700000},{\"id\":21756,\"case\":\"HY146134\",\"date\":1423518960000},{\"id\":21757,\"case\":\"HY145267\",\"date\":1423480200000},{\"id\":21758,\"case\":\"HY147395\",\"date\":1423607100000},{\"id\":21759,\"case\":\"HY152127\",\"date\":1423974060000},{\"id\":21760,\"case\":\"HK649858\",\"date\":1423526400000},{\"id\":21761,\"case\":\"HY157257\",\"date\":1424402220000},{\"id\":21762,\"case\":\"HY158116\",\"date\":1424457660000},{\"id\":21763,\"case\":\"HY159217\",\"date\":1424540640000},{\"id\":21764,\"case\":\"HY160139\",\"date\":1424618400000},{\"id\":21765,\"case\":\"HY163030\",\"date\":1424846220000},{\"id\":21767,\"case\":\"HY163914\",\"date\":1424893500000},{\"id\":21768,\"case\":\"HY163571\",\"date\":1424876940000},{\"id\":21769,\"case\":\"HY169646\",\"date\":1425324000000},{\"id\":21772,\"case\":\"HY174696\",\"date\":1425693120000},{\"id\":21773,\"case\":\"HY174696\",\"date\":1425693120000},{\"id\":21774,\"case\":\"HY175374\",\"date\":1425746460000},{\"id\":21775,\"case\":\"HY176662\",\"date\":1425839580000},{\"id\":21776,\"case\":\"HY177178\",\"date\":1425893760000},{\"id\":21777,\"case\":\"HY177586\",\"date\":1425912720000},{\"id\":21778,\"case\":\"HY177958\",\"date\":1425930060000},{\"id\":21779,\"case\":\"HY178055\",\"date\":1425930780000},{\"id\":21780,\"case\":\"HY185125\",\"date\":1426394940000},{\"id\":21781,\"case\":\"HY185434\",\"date\":1426425660000},{\"id\":21782,\"case\":\"HY185689\",\"date\":1426447620000},{\"id\":21783,\"case\":\"HY185689\",\"date\":1426447680000},{\"id\":21784,\"case\":\"HY186207\",\"date\":1426475460000},{\"id\":21785,\"case\":\"HY186207\",\"date\":1426475460000},{\"id\":21786,\"case\":\"HY190080\",\"date\":1426726140000},{\"id\":21787,\"case\":\"HY190108\",\"date\":1426731960000},{\"id\":21788,\"case\":\"HY190397\",\"date\":1426764000000},{\"id\":21789,\"case\":\"HY191107\",\"date\":1426799940000},{\"id\":21790,\"case\":\"HY192076\",\"date\":1426871640000},{\"id\":21791,\"case\":\"HY193065\",\"date\":1426941120000},{\"id\":21792,\"case\":\"HY193536\",\"date\":1427017980000},{\"id\":21793,\"case\":\"HY194555\",\"date\":1427059980000},{\"id\":21794,\"case\":\"HY196184\",\"date\":1427180100000},{\"id\":21795,\"case\":\"HY198255\",\"date\":1427307840000},{\"id\":21796,\"case\":\"HY199452\",\"date\":1427392740000},{\"id\":21797,\"case\":\"HY199846\",\"date\":1427421840000},{\"id\":21798,\"case\":\"HY201146\",\"date\":1427508780000},{\"id\":21799,\"case\":\"HY202270\",\"date\":1427596020000},{\"id\":21800,\"case\":\"HY203776\",\"date\":1427727000000},{\"id\":21801,\"case\":\"HY204746\",\"date\":1427799300000},{\"id\":21802,\"case\":\"HY204877\",\"date\":1427804340000},{\"id\":21803,\"case\":\"HY206710\",\"date\":1427915100000},{\"id\":21804,\"case\":\"HY207131\",\"date\":1427935860000},{\"id\":21805,\"case\":\"HY207153\",\"date\":1427941560000},{\"id\":21806,\"case\":\"HY208263\",\"date\":1428008880000},{\"id\":21807,\"case\":\"HY208837\",\"date\":1428062880000},{\"id\":21808,\"case\":\"HY209027\",\"date\":1428071820000},{\"id\":21809,\"case\":\"HY210099\",\"date\":1428149880000},{\"id\":21810,\"case\":\"HY210359\",\"date\":1428167220000},{\"id\":21811,\"case\":\"HY214108\",\"date\":1428461580000},{\"id\":21812,\"case\":\"HY214352\",\"date\":1428493020000},{\"id\":21813,\"case\":\"HY214581\",\"date\":1428503100000},{\"id\":21814,\"case\":\"HY217489\",\"date\":1428707760000},{\"id\":21815,\"case\":\"HY218517\",\"date\":1428787620000},{\"id\":21817,\"case\":\"HY201343\",\"date\":1428044400000},{\"id\":21818,\"case\":\"HY132431\",\"date\":1423119600000},{\"id\":21819,\"case\":\"HY222476\",\"date\":1429067760000},{\"id\":21820,\"case\":\"HY226249\",\"date\":1429318500000},{\"id\":21821,\"case\":\"HY226327\",\"date\":1429320120000},{\"id\":21822,\"case\":\"HY227673\",\"date\":1429421880000},{\"id\":21823,\"case\":\"HY227705\",\"date\":1429425300000},{\"id\":21824,\"case\":\"HY227705\",\"date\":1429425300000},{\"id\":21825,\"case\":\"HY229848\",\"date\":1429568220000},{\"id\":21826,\"case\":\"HY229305\",\"date\":1429545240000},{\"id\":21827,\"case\":\"HY229969\",\"date\":1429583700000},{\"id\":21828,\"case\":\"HY231077\",\"date\":1429654260000},{\"id\":21829,\"case\":\"HY230461\",\"date\":1429624140000},{\"id\":21830,\"case\":\"HY233228\",\"date\":1429812600000},{\"id\":21831,\"case\":\"HY233901\",\"date\":1429870800000},{\"id\":21832,\"case\":\"HY234893\",\"date\":1429917660000},{\"id\":21833,\"case\":\"HY234991\",\"date\":1429928760000},{\"id\":21835,\"case\":\"HY236576\",\"date\":1430054100000},{\"id\":21836,\"case\":\"HY239281\",\"date\":1430235000000},{\"id\":21839,\"case\":\"HY240475\",\"date\":1430316060000},{\"id\":21840,\"case\":\"HY240344\",\"date\":1430311500000},{\"id\":21842,\"case\":\"HY241278\",\"date\":1430379420000},{\"id\":21843,\"case\":\"HY242429\",\"date\":1430441040000},{\"id\":21844,\"case\":\"HY243252\",\"date\":1430504100000},{\"id\":21845,\"case\":\"HY243592\",\"date\":1430523000000},{\"id\":21846,\"case\":\"HY243229\",\"date\":1430500440000},{\"id\":21848,\"case\":\"HY243229\",\"date\":1430501640000},{\"id\":21849,\"case\":\"HY244929\",\"date\":1430615100000},{\"id\":21852,\"case\":\"HY248286\",\"date\":1430844540000},{\"id\":21853,\"case\":\"HY251159\",\"date\":1431029700000},{\"id\":21854,\"case\":\"HY253376\",\"date\":1431177720000},{\"id\":21855,\"case\":\"HY254085\",\"date\":1431218100000},{\"id\":21856,\"case\":\"HY250608\",\"date\":1431003840000},{\"id\":21857,\"case\":\"HY213507\",\"date\":1431241200000},{\"id\":21858,\"case\":\"HY254429\",\"date\":1431254520000},{\"id\":21860,\"case\":\"HY259141\",\"date\":1431547500000},{\"id\":21861,\"case\":\"HY259141\",\"date\":1431559380000},{\"id\":21862,\"case\":\"HY260356\",\"date\":1431631440000},{\"id\":21863,\"case\":\"HY262032\",\"date\":1431739200000},{\"id\":21866,\"case\":\"HY265180\",\"date\":1431951360000},{\"id\":21867,\"case\":\"HY267833\",\"date\":1432122240000},{\"id\":21868,\"case\":\"HY268571\",\"date\":1432152720000},{\"id\":21874,\"case\":\"HY267522\",\"date\":1432133580000},{\"id\":21875,\"case\":\"HY269141\",\"date\":1432210320000},{\"id\":21876,\"case\":\"HY271504\",\"date\":1432345560000},{\"id\":21877,\"case\":\"HY270036\",\"date\":1432315980000},{\"id\":21878,\"case\":\"HY271518\",\"date\":1432349460000},{\"id\":21879,\"case\":\"HY271945\",\"date\":1432386900000},{\"id\":21880,\"case\":\"HY272649\",\"date\":1432425660000},{\"id\":21881,\"case\":\"HY272708\",\"date\":1432428480000},{\"id\":21882,\"case\":\"HY272716\",\"date\":1432431300000},{\"id\":21883,\"case\":\"HY273328\",\"date\":1432488300000},{\"id\":21884,\"case\":\"HY273377\",\"date\":1432485900000},{\"id\":21885,\"case\":\"HY273621\",\"date\":1432498800000},{\"id\":21886,\"case\":\"HY274367\",\"date\":1432564380000},{\"id\":21887,\"case\":\"HY274555\",\"date\":1432583160000},{\"id\":21888,\"case\":\"HY274690\",\"date\":1432586280000},{\"id\":21889,\"case\":\"HY242453\",\"date\":1432405140000},{\"id\":21890,\"case\":\"HY278426\",\"date\":1432824000000},{\"id\":21891,\"case\":\"HY278426\",\"date\":1432824000000},{\"id\":21892,\"case\":\"HY279192\",\"date\":1432864800000},{\"id\":21893,\"case\":\"HY280615\",\"date\":1432951440000},{\"id\":21894,\"case\":\"HY280557\",\"date\":1432947960000},{\"id\":21895,\"case\":\"HY280528\",\"date\":1432950060000},{\"id\":21896,\"case\":\"HY282127\",\"date\":1433076540000},{\"id\":21897,\"case\":\"HY282612\",\"date\":1433101680000},{\"id\":21898,\"case\":\"HY282604\",\"date\":1433102280000},{\"id\":21899,\"case\":\"HY283497\",\"date\":1433170800000},{\"id\":21900,\"case\":\"HY280584\",\"date\":1432999440000},{\"id\":21901,\"case\":\"HY283451\",\"date\":1433255340000},{\"id\":21902,\"case\":\"HY286550\",\"date\":1433350200000},{\"id\":21903,\"case\":\"HY288244\",\"date\":1433457060000},{\"id\":21904,\"case\":\"HY289299\",\"date\":1433535840000},{\"id\":21905,\"case\":\"HY289570\",\"date\":1433546820000},{\"id\":21906,\"case\":\"HY289763\",\"date\":1433556780000},{\"id\":21909,\"case\":\"HY293164\",\"date\":1433793120000},{\"id\":21910,\"case\":\"HY294819\",\"date\":1433897040000},{\"id\":21911,\"case\":\"HY295935\",\"date\":1433968500000},{\"id\":21912,\"case\":\"HY295320\",\"date\":1434037500000},{\"id\":21913,\"case\":\"HY297544\",\"date\":1434069900000},{\"id\":21914,\"case\":\"HY297548\",\"date\":1434073500000},{\"id\":21915,\"case\":\"HY259141\",\"date\":1433894460000},{\"id\":21916,\"case\":\"HY297895\",\"date\":1434110400000},{\"id\":21917,\"case\":\"HY298981\",\"date\":1434174480000},{\"id\":21918,\"case\":\"HY300195\",\"date\":1434242100000},{\"id\":21923,\"case\":\"HY300040\",\"date\":1434240300000},{\"id\":21924,\"case\":\"HY283395\",\"date\":1434213900000},{\"id\":21925,\"case\":\"HY301340\",\"date\":1434320160000},{\"id\":21926,\"case\":\"HY301103\",\"date\":1434330660000},{\"id\":21927,\"case\":\"HY302907\",\"date\":1434429060000},{\"id\":21928,\"case\":\"HY304267\",\"date\":1434494640000},{\"id\":21929,\"case\":\"HY303888\",\"date\":1434478320000},{\"id\":21930,\"case\":\"HY305676\",\"date\":1434584280000},{\"id\":21931,\"case\":\"HY305722\",\"date\":1434587040000},{\"id\":21932,\"case\":\"HY306393\",\"date\":1434639720000},{\"id\":21933,\"case\":\"HY306882\",\"date\":1434666780000},{\"id\":21934,\"case\":\"HY306914\",\"date\":1434667560000},{\"id\":21935,\"case\":\"HY308808\",\"date\":1434801720000},{\"id\":21936,\"case\":\"HY309544\",\"date\":1434842100000},{\"id\":21937,\"case\":\"HY309931\",\"date\":1434881400000},{\"id\":21939,\"case\":\"HY312799\",\"date\":1435068360000},{\"id\":21940,\"case\":\"HY313340\",\"date\":1435093020000},{\"id\":21941,\"case\":\"HY313549\",\"date\":1435106940000},{\"id\":21942,\"case\":\"HY314835\",\"date\":1435192500000},{\"id\":21943,\"case\":\"HY315707\",\"date\":1435253100000},{\"id\":21944,\"case\":\"HY317686\",\"date\":1435378080000},{\"id\":21945,\"case\":\"HY318463\",\"date\":1435434180000},{\"id\":21946,\"case\":\"HY319421\",\"date\":1435502280000},{\"id\":21947,\"case\":\"HY317652\",\"date\":1435414800000},{\"id\":21948,\"case\":\"HY320151\",\"date\":1435551060000},{\"id\":21950,\"case\":\"HY321551\",\"date\":1435631280000},{\"id\":21951,\"case\":\"HY322797\",\"date\":1435707480000},{\"id\":21952,\"case\":\"HY324033\",\"date\":1435789080000},{\"id\":21953,\"case\":\"HY324513\",\"date\":1435865400000},{\"id\":21954,\"case\":\"HY325121\",\"date\":1435871160000},{\"id\":21955,\"case\":\"HY325525\",\"date\":1435886400000},{\"id\":21956,\"case\":\"HY325478\",\"date\":1435885200000},{\"id\":21957,\"case\":\"HY326221\",\"date\":1435944660000},{\"id\":21958,\"case\":\"HY327907\",\"date\":1436059140000},{\"id\":21959,\"case\":\"HY328200\",\"date\":1436079600000},{\"id\":21960,\"case\":\"HY328200\",\"date\":1436076600000},{\"id\":21961,\"case\":\"HY328047\",\"date\":1436069040000},{\"id\":21962,\"case\":\"HY328791\",\"date\":1436115600000},{\"id\":21963,\"case\":\"HY328164\",\"date\":1436072400000},{\"id\":21964,\"case\":\"HY327794\",\"date\":1436061360000},{\"id\":21965,\"case\":\"HY330255\",\"date\":1436203920000},{\"id\":21966,\"case\":\"HY330978\",\"date\":1436266260000},{\"id\":21967,\"case\":\"HY332064\",\"date\":1436324940000},{\"id\":21968,\"case\":\"HY332515\",\"date\":1436376660000},{\"id\":21969,\"case\":\"HY334393\",\"date\":1436479080000},{\"id\":21970,\"case\":\"HY334449\",\"date\":1436480640000},{\"id\":21971,\"case\":\"HY335770\",\"date\":1436572500000},{\"id\":21972,\"case\":\"HY335913\",\"date\":1436585940000},{\"id\":21973,\"case\":\"HY335962\",\"date\":1436585400000},{\"id\":21974,\"case\":\"HY336431\",\"date\":1436625480000},{\"id\":21975,\"case\":\"HY336496\",\"date\":1436625480000},{\"id\":21976,\"case\":\"HY337858\",\"date\":1436721660000},{\"id\":21977,\"case\":\"HY338482\",\"date\":1436763480000},{\"id\":21978,\"case\":\"HY342105\",\"date\":1436985000000},{\"id\":21979,\"case\":\"HY342285\",\"date\":1436994000000},{\"id\":21980,\"case\":\"HY342488\",\"date\":1437005820000},{\"id\":21982,\"case\":\"HY343941\",\"date\":1437108180000},{\"id\":21983,\"case\":\"HY344413\",\"date\":1437143400000},{\"id\":21984,\"case\":\"HY344710\",\"date\":1437153780000},{\"id\":21985,\"case\":\"HY344710\",\"date\":1437153780000},{\"id\":21988,\"case\":\"HY345202\",\"date\":1437182400000},{\"id\":21989,\"case\":\"HY345337\",\"date\":1437195540000},{\"id\":21990,\"case\":\"HY346232\",\"date\":1437264060000},{\"id\":21991,\"case\":\"HY348984\",\"date\":1437435600000},{\"id\":21992,\"case\":\"HY350286\",\"date\":1437514740000},{\"id\":21993,\"case\":\"HY354142\",\"date\":1437763500000},{\"id\":21994,\"case\":\"HY354568\",\"date\":1437785220000},{\"id\":21995,\"case\":\"HY355695\",\"date\":1437866520000},{\"id\":21996,\"case\":\"HY355926\",\"date\":1437878040000},{\"id\":21997,\"case\":\"HY355926\",\"date\":1437878040000},{\"id\":21998,\"case\":\"HY356151\",\"date\":1437905640000},{\"id\":21999,\"case\":\"HY356849\",\"date\":1437942480000},{\"id\":22001,\"case\":\"HY359179\",\"date\":1438095480000},{\"id\":22002,\"case\":\"HY346207\",\"date\":1436025600000},{\"id\":22006,\"case\":\"HY361399\",\"date\":1438228800000},{\"id\":22011,\"case\":\"HY362660\",\"date\":1438301400000},{\"id\":22012,\"case\":\"HY365437\",\"date\":1438479480000},{\"id\":22013,\"case\":\"HY365746\",\"date\":1438491600000},{\"id\":22014,\"case\":\"HY365558\",\"date\":1438508400000},{\"id\":22015,\"case\":\"HY281912\",\"date\":1437117180000},{\"id\":22016,\"case\":\"HY369622\",\"date\":1438757700000},{\"id\":22017,\"case\":\"HY370813\",\"date\":1438818540000},{\"id\":22018,\"case\":\"HY370898\",\"date\":1438828140000},{\"id\":22019,\"case\":\"HY335410\",\"date\":1436547840000},{\"id\":22020,\"case\":\"HY371882\",\"date\":1438887120000},{\"id\":22021,\"case\":\"HY371882\",\"date\":1438890180000},{\"id\":22022,\"case\":\"HY372265\",\"date\":1438915320000},{\"id\":22023,\"case\":\"HY373507\",\"date\":1438991520000},{\"id\":22024,\"case\":\"HY362815\",\"date\":1438560060000},{\"id\":22025,\"case\":\"HY364159\",\"date\":1438646460000},{\"id\":22026,\"case\":\"HY375951\",\"date\":1439162760000},{\"id\":22027,\"case\":\"HY374842\",\"date\":1439214540000},{\"id\":22028,\"case\":\"HY378773\",\"date\":1439335980000},{\"id\":22029,\"case\":\"HY380282\",\"date\":1439435400000},{\"id\":22030,\"case\":\"HY380866\",\"date\":1439480520000},{\"id\":22031,\"case\":\"HY382200\",\"date\":1439565600000},{\"id\":22032,\"case\":\"HY383014\",\"date\":1439606220000},{\"id\":22033,\"case\":\"HY382553\",\"date\":1439648220000},{\"id\":22034,\"case\":\"HY383024\",\"date\":1439607900000},{\"id\":22035,\"case\":\"HY384750\",\"date\":1439733120000},{\"id\":22036,\"case\":\"HY385366\",\"date\":1439763960000},{\"id\":22037,\"case\":\"HY386808\",\"date\":1439847900000},{\"id\":22038,\"case\":\"HY386779\",\"date\":1439848740000},{\"id\":22039,\"case\":\"HY385366\",\"date\":1439827680000},{\"id\":22040,\"case\":\"HY388840\",\"date\":1439993340000},{\"id\":22041,\"case\":\"HY389714\",\"date\":1440038940000},{\"id\":22042,\"case\":\"HY391099\",\"date\":1440124560000},{\"id\":22044,\"case\":\"HY392002\",\"date\":1440181440000},{\"id\":22045,\"case\":\"HY392566\",\"date\":1440218580000},{\"id\":22046,\"case\":\"HY393536\",\"date\":1440281040000},{\"id\":22047,\"case\":\"HY393931\",\"date\":1440310380000},{\"id\":22048,\"case\":\"HY394808\",\"date\":1440363060000},{\"id\":22049,\"case\":\"HY394828\",\"date\":1440365400000},{\"id\":22050,\"case\":\"HX266828\",\"date\":1440062220000},{\"id\":22051,\"case\":\"HY396147\",\"date\":1440449100000},{\"id\":22052,\"case\":\"HY397193\",\"date\":1440526800000},{\"id\":22053,\"case\":\"HY395938\",\"date\":1440528780000},{\"id\":22054,\"case\":\"HY397524\",\"date\":1440543420000},{\"id\":22055,\"case\":\"HY398643\",\"date\":1440621000000},{\"id\":22056,\"case\":\"HY397947\",\"date\":1440589020000},{\"id\":22057,\"case\":\"HY397947\",\"date\":1440598020000},{\"id\":22059,\"case\":\"HY401623\",\"date\":1440821220000},{\"id\":22060,\"case\":\"HY402811\",\"date\":1440900300000},{\"id\":22061,\"case\":\"HY402725\",\"date\":1440904500000},{\"id\":22062,\"case\":\"HY404385\",\"date\":1441018800000},{\"id\":22063,\"case\":\"HY405177\",\"date\":1441055040000},{\"id\":22064,\"case\":\"HY405238\",\"date\":1441059660000},{\"id\":22065,\"case\":\"HY406264\",\"date\":1441144500000},{\"id\":22066,\"case\":\"HY406754\",\"date\":1441155600000},{\"id\":22067,\"case\":\"HY406781\",\"date\":1441158300000},{\"id\":22068,\"case\":\"HY406845\",\"date\":1441161660000},{\"id\":22069,\"case\":\"HY406845\",\"date\":1441162500000},{\"id\":22070,\"case\":\"HY407022\",\"date\":1441186800000},{\"id\":22071,\"case\":\"HY407978\",\"date\":1441228920000},{\"id\":22072,\"case\":\"HY402928\",\"date\":1441195440000},{\"id\":22073,\"case\":\"HY408008\",\"date\":1441233180000},{\"id\":22074,\"case\":\"HY407689\",\"date\":1441216980000},{\"id\":22075,\"case\":\"HY408120\",\"date\":1441237800000},{\"id\":22077,\"case\":\"HY408225\",\"date\":1441258500000},{\"id\":22078,\"case\":\"HY410760\",\"date\":1441406100000},{\"id\":22080,\"case\":\"HY410903\",\"date\":1441427940000},{\"id\":22081,\"case\":\"HY410924\",\"date\":1441412460000},{\"id\":22082,\"case\":\"HY412263\",\"date\":1441506540000},{\"id\":22083,\"case\":\"HY412330\",\"date\":1441508520000},{\"id\":22085,\"case\":\"HY414436\",\"date\":1441657560000},{\"id\":22090,\"case\":\"HY317118\",\"date\":1435302000000},{\"id\":22086,\"case\":\"HY413844\",\"date\":1441628160000},{\"id\":22087,\"case\":\"HY414739\",\"date\":1441689000000},{\"id\":22088,\"case\":\"HY416191\",\"date\":1441779600000},{\"id\":22089,\"case\":\"HY418059\",\"date\":1441898400000},{\"id\":22091,\"case\":\"HY422047\",\"date\":1442173680000},{\"id\":22092,\"case\":\"HY422170\",\"date\":1442190600000},{\"id\":22094,\"case\":\"HY422267\",\"date\":1442196660000},{\"id\":22095,\"case\":\"HY423657\",\"date\":1442271840000},{\"id\":22096,\"case\":\"HY422355\",\"date\":1442191380000},{\"id\":22097,\"case\":\"HY423835\",\"date\":1442292480000},{\"id\":22098,\"case\":\"HY426270\",\"date\":1442442300000},{\"id\":22099,\"case\":\"HY425242\",\"date\":1442390400000},{\"id\":22100,\"case\":\"HY400038\",\"date\":1440796800000},{\"id\":22101,\"case\":\"HY427585\",\"date\":1442534700000},{\"id\":22102,\"case\":\"HY429510\",\"date\":1442660100000},{\"id\":22103,\"case\":\"HY430052\",\"date\":1442688420000},{\"id\":22104,\"case\":\"HY430167\",\"date\":1442692860000},{\"id\":22105,\"case\":\"HY430656\",\"date\":1442732640000},{\"id\":22106,\"case\":\"HY430544\",\"date\":1442723280000},{\"id\":22107,\"case\":\"HY430817\",\"date\":1442747100000},{\"id\":22108,\"case\":\"HY431514\",\"date\":1442783760000},{\"id\":22109,\"case\":\"HY430209\",\"date\":1442786760000},{\"id\":22110,\"case\":\"HY431578\",\"date\":1442788560000},{\"id\":22111,\"case\":\"HY432757\",\"date\":1442862720000},{\"id\":22112,\"case\":\"HY433852\",\"date\":1442938740000},{\"id\":22113,\"case\":\"HY435847\",\"date\":1443053160000},{\"id\":22114,\"case\":\"HY429076\",\"date\":1443034320000},{\"id\":22115,\"case\":\"HY436629\",\"date\":1443111180000},{\"id\":22116,\"case\":\"HY437443\",\"date\":1443174900000},{\"id\":22117,\"case\":\"HY439020\",\"date\":1443271500000},{\"id\":22118,\"case\":\"HX354510\",\"date\":1431326700000},{\"id\":22119,\"case\":\"HY439900\",\"date\":1443333180000},{\"id\":22120,\"case\":\"HY440415\",\"date\":1443364920000},{\"id\":22121,\"case\":\"HY439941\",\"date\":1443367140000},{\"id\":22122,\"case\":\"HY442160\",\"date\":1443471000000},{\"id\":22123,\"case\":\"HY442160\",\"date\":1443470880000},{\"id\":22124,\"case\":\"HY441412\",\"date\":1443439020000},{\"id\":22125,\"case\":\"HY442430\",\"date\":1443491100000},{\"id\":22126,\"case\":\"HY442430\",\"date\":1443488700000},{\"id\":22127,\"case\":\"HY442430\",\"date\":1443497700000},{\"id\":22128,\"case\":\"HY443182\",\"date\":1443538560000},{\"id\":22129,\"case\":\"HY444358\",\"date\":1443622320000},{\"id\":22130,\"case\":\"HY444338\",\"date\":1443625800000},{\"id\":22131,\"case\":\"HY445645\",\"date\":1443737340000},{\"id\":22132,\"case\":\"HR679297\",\"date\":1443731700000},{\"id\":22133,\"case\":\"HY449587\",\"date\":1443989880000},{\"id\":22134,\"case\":\"HY451886\",\"date\":1444164360000},{\"id\":22136,\"case\":\"HY453219\",\"date\":1444238280000},{\"id\":22137,\"case\":\"HY454710\",\"date\":1444337520000},{\"id\":22138,\"case\":\"HY455431\",\"date\":1444397100000},{\"id\":22139,\"case\":\"HY456343\",\"date\":1444447200000},{\"id\":22140,\"case\":\"HY456368\",\"date\":1444450320000},{\"id\":22141,\"case\":\"HY448756\",\"date\":1444155540000},{\"id\":22142,\"case\":\"HY457542\",\"date\":1444541400000},{\"id\":22143,\"case\":\"HY458595\",\"date\":1444619100000},{\"id\":22144,\"case\":\"HY460909\",\"date\":1444773000000},{\"id\":22146,\"case\":\"HY461959\",\"date\":1444844580000},{\"id\":22147,\"case\":\"HY462383\",\"date\":1444865280000},{\"id\":22148,\"case\":\"HY463786\",\"date\":1444959300000},{\"id\":22149,\"case\":\"HY463892\",\"date\":1444983120000},{\"id\":22150,\"case\":\"HY466381\",\"date\":1445134020000},{\"id\":22151,\"case\":\"HY466977\",\"date\":1445185560000},{\"id\":22152,\"case\":\"HY468621\",\"date\":1445290020000},{\"id\":22153,\"case\":\"HY473963\",\"date\":1445635620000},{\"id\":22154,\"case\":\"HY474220\",\"date\":1445648280000},{\"id\":22155,\"case\":\"HY473471\",\"date\":1445656860000},{\"id\":22157,\"case\":\"HY474981\",\"date\":1445708400000},{\"id\":22158,\"case\":\"HY475493\",\"date\":1445741160000},{\"id\":22159,\"case\":\"HY476639\",\"date\":1445828580000},{\"id\":22160,\"case\":\"HY476607\",\"date\":1445824500000},{\"id\":22161,\"case\":\"HY480705\",\"date\":1446214440000},{\"id\":22162,\"case\":\"HY310631\",\"date\":1445212860000},{\"id\":22163,\"case\":\"HY483064\",\"date\":1446253860000},{\"id\":22164,\"case\":\"HY484627\",\"date\":1446377580000},{\"id\":22165,\"case\":\"HY486445\",\"date\":1446480900000},{\"id\":22166,\"case\":\"HY486607\",\"date\":1446488460000},{\"id\":22167,\"case\":\"HY487514\",\"date\":1446557760000},{\"id\":22168,\"case\":\"HY487916\",\"date\":1446578880000},{\"id\":22169,\"case\":\"HY490839\",\"date\":1446756120000},{\"id\":22170,\"case\":\"HY492138\",\"date\":1446855720000},{\"id\":22171,\"case\":\"HY492469\",\"date\":1446866640000},{\"id\":22172,\"case\":\"HY493451\",\"date\":1446931860000},{\"id\":22173,\"case\":\"HY493495\",\"date\":1446938520000},{\"id\":22174,\"case\":\"HY495347\",\"date\":1447079100000},{\"id\":22175,\"case\":\"HY497309\",\"date\":1447225200000},{\"id\":22176,\"case\":\"HY498291\",\"date\":1447281360000},{\"id\":22177,\"case\":\"HY498323\",\"date\":1447289820000},{\"id\":22178,\"case\":\"HY498680\",\"date\":1447326600000},{\"id\":22179,\"case\":\"HY501231\",\"date\":1447506240000},{\"id\":22180,\"case\":\"HY505611\",\"date\":1447807020000},{\"id\":22183,\"case\":\"HY509513\",\"date\":1448069820000},{\"id\":22184,\"case\":\"HY510470\",\"date\":1448137860000},{\"id\":22185,\"case\":\"HY511115\",\"date\":1448213280000},{\"id\":22186,\"case\":\"HY511394\",\"date\":1448224440000},{\"id\":22187,\"case\":\"HY511439\",\"date\":1448227080000},{\"id\":22188,\"case\":\"HY512586\",\"date\":1448304780000},{\"id\":22189,\"case\":\"HY514161\",\"date\":1448420160000},{\"id\":22190,\"case\":\"HY515241\",\"date\":1448496360000},{\"id\":22191,\"case\":\"HY515665\",\"date\":1448548140000},{\"id\":22192,\"case\":\"HY516152\",\"date\":1448600400000},{\"id\":22193,\"case\":\"HY516538\",\"date\":1448632680000},{\"id\":22194,\"case\":\"HY517759\",\"date\":1448732700000},{\"id\":22195,\"case\":\"HY517997\",\"date\":1448745480000},{\"id\":22196,\"case\":\"HY518079\",\"date\":1448756220000},{\"id\":22197,\"case\":\"HY518110\",\"date\":1448763300000},{\"id\":22198,\"case\":\"HY518961\",\"date\":1448828160000},{\"id\":22200,\"case\":\"HY520411\",\"date\":1448934720000},{\"id\":22201,\"case\":\"HY519962\",\"date\":1448995380000},{\"id\":22202,\"case\":\"HY522926\",\"date\":1449121980000},{\"id\":22203,\"case\":\"G032677\",\"date\":1432944000000},{\"id\":22204,\"case\":\"HY518381\",\"date\":1448788620000},{\"id\":22205,\"case\":\"HY223326\",\"date\":1429120200000},{\"id\":22206,\"case\":\"HY524769\",\"date\":1449246240000},{\"id\":22207,\"case\":\"HY525017\",\"date\":1449258480000},{\"id\":22208,\"case\":\"HY525517\",\"date\":1449299160000},{\"id\":22209,\"case\":\"HY526691\",\"date\":1449385860000},{\"id\":22212,\"case\":\"HY175983\",\"date\":1425783600000},{\"id\":22213,\"case\":\"HY175983\",\"date\":1426982400000},{\"id\":22214,\"case\":\"HY528984\",\"date\":1449675840000},{\"id\":22215,\"case\":\"HY405070\",\"date\":1442273580000},{\"id\":22216,\"case\":\"HY402004\",\"date\":1440841320000},{\"id\":22217,\"case\":\"HY402004\",\"date\":1440841320000},{\"id\":22218,\"case\":\"HY533782\",\"date\":1449874080000},{\"id\":22219,\"case\":\"HY535398\",\"date\":1450003260000},{\"id\":22220,\"case\":\"HV565069\",\"date\":1443225600000},{\"id\":22221,\"case\":\"HY378628\",\"date\":1439251260000},{\"id\":22222,\"case\":\"HY538907\",\"date\":1450241100000},{\"id\":22223,\"case\":\"HY539340\",\"date\":1450312920000},{\"id\":22224,\"case\":\"HY540283\",\"date\":1450345380000},{\"id\":22225,\"case\":\"HY540904\",\"date\":1450372500000},{\"id\":22226,\"case\":\"HY540982\",\"date\":1450374780000},{\"id\":22227,\"case\":\"HY543765\",\"date\":1450593720000},{\"id\":22228,\"case\":\"HY543781\",\"date\":1450594320000},{\"id\":22229,\"case\":\"HY544303\",\"date\":1450658100000},{\"id\":22230,\"case\":\"HY543741\",\"date\":1450711140000},{\"id\":22231,\"case\":\"HY547693\",\"date\":1450881000000},{\"id\":22232,\"case\":\"HY548051\",\"date\":1450895700000},{\"id\":22234,\"case\":\"HY549155\",\"date\":1450975800000},{\"id\":22236,\"case\":\"HY549737\",\"date\":1451046240000},{\"id\":22237,\"case\":\"HY550929\",\"date\":1451159220000},{\"id\":22238,\"case\":\"HY551081\",\"date\":1451169600000},{\"id\":22239,\"case\":\"HY551250\",\"date\":1451182560000},{\"id\":22240,\"case\":\"HY551250\",\"date\":1451196300000},{\"id\":22242,\"case\":\"HY287885\",\"date\":1433781900000},{\"id\":22243,\"case\":\"HY554270\",\"date\":1451428740000},{\"id\":22244,\"case\":\"HY550751\",\"date\":1451260860000},{\"id\":22248,\"case\":\"HY533967\",\"date\":1450147680000},{\"id\":22257,\"case\":\"HY388410\",\"date\":1439948340000},{\"id\":22258,\"case\":\"HY487374\",\"date\":1446549540000},{\"id\":22265,\"case\":\"HY505905\",\"date\":1447839360000},{\"id\":21981,\"case\":\"F218264\",\"date\":1436579100000},{\"id\":22235,\"case\":\"HY549247\",\"date\":1450984140000},{\"id\":10222837,\"case\":\"HY409243\",\"date\":1441308492000},{\"id\":22182,\"case\":\"HY509229\",\"date\":1448053680000}];\n", | |
| "\n", | |
| "var bins = histogram(data);\n", | |
| "\n", | |
| "y.domain([0, d3.max(bins, function(d) { return d.length; })]);\n", | |
| "\n", | |
| "var bar = svg.selectAll(\".bar\")\n", | |
| " .data(bins)\n", | |
| " .enter().append(\"g\")\n", | |
| " .attr(\"class\", \"bar\")\n", | |
| " .attr(\"transform\", function(d) { return \"translate(\" + x(d.x0) + \",\" + y(d.length) + \")\"; });\n", | |
| "\n", | |
| "bar.append(\"rect\")\n", | |
| " .attr(\"x\", 1)\n", | |
| " .attr(\"width\", function(d) { return x(d.x1) - x(d.x0) - 1; })\n", | |
| " .attr(\"height\", function(d) { return height - y(d.length); });\n", | |
| "\n", | |
| "bar.append(\"text\")\n", | |
| " .attr(\"dy\", \".75em\")\n", | |
| " .attr(\"y\", 6)\n", | |
| " .attr(\"x\", function(d) { return (x(d.x1) - x(d.x0)) / 2; })\n", | |
| " .attr(\"text-anchor\", \"middle\")\n", | |
| " .text(function(d) { return formatCount(d.length); });\n", | |
| "\n", | |
| "function type(d) {\n", | |
| " d.date = parseDate(d.date);\n", | |
| " return d;\n", | |
| "}\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ] | |
| }, | |
| "execution_count": 36, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "import pandas as pd\n", | |
| "from string import Template\n", | |
| "\n", | |
| "data = pd.read_csv(\n", | |
| " 'https://gist.githubusercontent.com/mbostock/b2fee5dae98555cf78c9e4c5074b87c3/raw/ef984920d0d607ab06af4b5a325d09cbd6c43bd5/homicides.csv', \n", | |
| " parse_dates=[2],\n", | |
| ")\n", | |
| "\n", | |
| "d3_script = Template('''\n", | |
| "var parseDate = d3.timeParse(\"%m/%d/%Y %H:%M:%S %p\"),\n", | |
| " formatCount = d3.format(\",.0f\");\n", | |
| "\n", | |
| "var margin = {top: 10, right: 30, bottom: 30, left: 30},\n", | |
| " width = 960 - margin.left - margin.right,\n", | |
| " height = 500 - margin.top - margin.bottom;\n", | |
| "\n", | |
| "var x = d3.scaleTime()\n", | |
| " .domain([new Date(2015, 0, 1), new Date(2016, 0, 1)])\n", | |
| " .rangeRound([0, width]);\n", | |
| "\n", | |
| "var y = d3.scaleLinear()\n", | |
| " .range([height, 0]);\n", | |
| "\n", | |
| "var histogram = d3.histogram()\n", | |
| " .value(function(d) { return d.date; })\n", | |
| " .domain(x.domain())\n", | |
| " .thresholds(x.ticks(d3.timeWeek));\n", | |
| "\n", | |
| "var svg = d3.select(element).append(\"svg\")\n", | |
| " .attr(\"width\", width + margin.left + margin.right)\n", | |
| " .attr(\"height\", height + margin.top + margin.bottom)\n", | |
| " .append(\"g\")\n", | |
| " .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n", | |
| "\n", | |
| "svg.append(\"g\")\n", | |
| " .attr(\"class\", \"axis axis--x\")\n", | |
| " .attr(\"transform\", \"translate(0,\" + height + \")\")\n", | |
| " .call(d3.axisBottom(x));\n", | |
| " \n", | |
| "var data = $data;\n", | |
| "\n", | |
| "var bins = histogram(data);\n", | |
| "\n", | |
| "y.domain([0, d3.max(bins, function(d) { return d.length; })]);\n", | |
| "\n", | |
| "var bar = svg.selectAll(\".bar\")\n", | |
| " .data(bins)\n", | |
| " .enter().append(\"g\")\n", | |
| " .attr(\"class\", \"bar\")\n", | |
| " .attr(\"transform\", function(d) { return \"translate(\" + x(d.x0) + \",\" + y(d.length) + \")\"; });\n", | |
| "\n", | |
| "bar.append(\"rect\")\n", | |
| " .attr(\"x\", 1)\n", | |
| " .attr(\"width\", function(d) { return x(d.x1) - x(d.x0) - 1; })\n", | |
| " .attr(\"height\", function(d) { return height - y(d.length); });\n", | |
| "\n", | |
| "bar.append(\"text\")\n", | |
| " .attr(\"dy\", \".75em\")\n", | |
| " .attr(\"y\", 6)\n", | |
| " .attr(\"x\", function(d) { return (x(d.x1) - x(d.x0)) / 2; })\n", | |
| " .attr(\"text-anchor\", \"middle\")\n", | |
| " .text(function(d) { return formatCount(d.length); });\n", | |
| "\n", | |
| "function type(d) {\n", | |
| " d.date = parseDate(d.date);\n", | |
| " return d;\n", | |
| "}\n", | |
| "''')\n", | |
| "\n", | |
| "Javascript(d3_script.substitute(data=data.to_json(orient='records')))" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "## Running HTML with inline scripts from a notebook in JupyterLab\n", | |
| "\n", | |
| "We can use `IPython.display.HTML`:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 38, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "<span>Hello</span>" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ] | |
| }, | |
| "execution_count": 38, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "from IPython.display import HTML\n", | |
| "\n", | |
| "HTML('<span>Hello</span>')" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 39, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "<script src=\"//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js\" type=\"text/javascript\" />" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ] | |
| }, | |
| "execution_count": 39, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "HTML('<script src=\"//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js\" type=\"text/javascript\" />')" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 40, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "<div id=\"d3-circle-animation\"></div>\n", | |
| "<script type=\"text/javascript\">\n", | |
| "var svg = d3.select(\"#d3-circle-animation\")\n", | |
| " .append(\"svg\")\n", | |
| " .attr(\"width\", 300)\n", | |
| " .attr(\"height\", 300); \n", | |
| "\n", | |
| "svg.append(\"circle\")\n", | |
| " .style(\"stroke\", \"gray\")\n", | |
| " .style(\"fill\", \"cyan\")\n", | |
| " .attr(\"r\", 130)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .attr(\"cy\", 150)\n", | |
| " .transition()\n", | |
| " .delay(100)\n", | |
| " .duration(10000) \n", | |
| " .attr(\"r\", 10)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .style(\"fill\", \"blue\"); \n", | |
| "\n", | |
| "</script>" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ] | |
| }, | |
| "execution_count": 40, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "svg_script = '''<div id=\"d3-circle-animation\"></div>\n", | |
| "<script type=\"text/javascript\">\n", | |
| "var svg = d3.select(\"#d3-circle-animation\")\n", | |
| " .append(\"svg\")\n", | |
| " .attr(\"width\", 300)\n", | |
| " .attr(\"height\", 300); \n", | |
| "\n", | |
| "svg.append(\"circle\")\n", | |
| " .style(\"stroke\", \"gray\")\n", | |
| " .style(\"fill\", \"cyan\")\n", | |
| " .attr(\"r\", 130)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .attr(\"cy\", 150)\n", | |
| " .transition()\n", | |
| " .delay(100)\n", | |
| " .duration(10000) \n", | |
| " .attr(\"r\", 10)\n", | |
| " .attr(\"cx\", 150)\n", | |
| " .style(\"fill\", \"blue\"); \n", | |
| "\n", | |
| "</script>'''\n", | |
| "\n", | |
| "HTML(svg_script)" | |
| ] | |
| }, | |
| { | |
| "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.4" | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 2 | |
| } |
Use CSS selectors:
# cell 1
%%javascript
element.innerHTML = '<pre id="test">hello</pre>'
# cell 2
%%javascript
var test = document.querySelector('#test')
test.textContent = 'hello world'
Thanks!
This is a really nice demo, just what I was looking for, thanks! 👍🏻
@sandorspruit You're welcome!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi. This is great, but how do you refer to a created DOM element? Particularly I'd like to make a simple table sortable, but JupyterLab makes this rocket science.