Skip to content

Instantly share code, notes, and snippets.

@robclewley

robclewley/d3-tutorial.ipynb

Forked from tonyfast/d3-tutorial.ipynb
Created April 19, 2016 21:21
Show Gist options
  • Save robclewley/610dc113168cff3abf5f7340492f2a1e to your computer and use it in GitHub Desktop.
Save robclewley/610dc113168cff3abf5f7340492f2a1e to your computer and use it in GitHub Desktop.
Download ZIP
python/d3
Display the source blob
Display the rendered blob
Raw
d3-tutorial.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"%reload_ext yamlmagic\n",
"from literacy import Literate\n",
"library = Literate(default_lang='python')"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" require(\n",
" [\n",
" \"notebook/js/codecell\",\n",
" \"codemirror/mode/yaml/yaml\"\n",
" ],\n",
" function(cc){\n",
" cc.CodeCell.options_default.highlight_modes.magic_yaml = {\n",
" reg: [\"^%%yaml\"]\n",
" }\n",
" }\n",
" );\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"(\n",
" window._yaml ? window._yaml : window._yaml = {}\n",
" )[\"ref\"] = {\"data-attr\": \"http://html5doctor.com/html5-custom-data-attributes/\", \"d3\": \"https://d3js.org\", \"coffee\": \"http://coffeescript.org\", \"eeu\": \"https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36\"};"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%yaml ref\n",
"d3: https://d3js.org\n",
"coffee: http://coffeescript.org\n",
"data-attr: http://html5doctor.com/html5-custom-data-attributes/\n",
"eeu: https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<link href=\"/static/components/codemirror/mode/markdown/markdown.css\"/>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"require(\n",
" [\n",
" \"notebook/js/codecell\",\n",
" \"codemirror/mode/markdown/markdown\"\n",
" ],\n",
" function(cc){\n",
" window.codecell = cc.CodeCell;\n",
" cc.CodeCell.options_default.highlight_modes.magic_markdown = {\n",
" reg: [\"^%%literate\"]\n",
" }\n",
" }\n",
");"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"<h4>Prelude</h4><p>Setting up literacy for this demonstration.</p><h5>Add Markdown Mode</h5><blockquote><p>Import the Code Mirror StyleSheet.</p>\n",
"</blockquote>\n",
"<hr><pre><code>%%html\n",
"&lt;link href=\"/static/components/codemirror/mode/markdown/markdown.css\"/&gt;\n",
"</code></pre><hr><style>\n",
".demo {\n",
" top: 200px;\n",
" left: 20px;\n",
" position: fixed;\n",
" opacity: .8;\n",
" background-color: rgba(100,100,100,.5)\n",
" z-index: 1000;\n",
"}\n",
"</style><blockquote><p>Assign the markdown style to <code>%%literate</code> cells.</p>\n",
"</blockquote>\n",
"<hr><pre><code>%%javascript\n",
"require(\n",
" [\n",
" \"notebook/js/codecell\",\n",
" \"codemirror/mode/markdown/markdown\"\n",
" ],\n",
" function(cc){\n",
" window.codecell = cc.CodeCell;\n",
" cc.CodeCell.options_default.highlight_modes.magic_markdown = {\n",
" reg: [\"^%%literate\"]\n",
" }\n",
" }\n",
");\n",
"</code></pre><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 3,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"#### Prelude\n",
"\n",
"Setting up literacy for this demonstration.\n",
"\n",
"##### Add Markdown Mode\n",
"\n",
"> Import the Code Mirror StyleSheet.\n",
"\n",
" %%html\n",
" <link href=\"/static/components/codemirror/mode/markdown/markdown.css\"/>\n",
"\n",
"<style>\n",
".demo {\n",
" top: 200px;\n",
" left: 20px;\n",
" position: fixed;\n",
" opacity: .8;\n",
" background-color: rgba(100,100,100,.5)\n",
" z-index: 1000;\n",
"}\n",
"</style>\n",
"\n",
"> Assign the markdown style to ``%%literate`` cells.\n",
" \n",
" %%javascript\n",
" require(\n",
" [\n",
" \"notebook/js/codecell\",\n",
" \"codemirror/mode/markdown/markdown\"\n",
" ],\n",
" function(cc){\n",
" window.codecell = cc.CodeCell;\n",
" cc.CodeCell.options_default.highlight_modes.magic_markdown = {\n",
" reg: [\"^%%literate\"]\n",
" }\n",
" }\n",
" );"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h1><a href=\"https://d3js.org\"><code>d3</code></a> in <a href=\"http://coffeescript.org\">Coffeescript</a></h1><p>Coffeescript is a white space aware grammar for Javascript; it is the most pythonic javascript.</p><h2>Import Coffeescript compiler for python</h2>\n",
"<hr><pre><code class=\"lang-raw\">%%bash\n",
"conda install -c javascript nodejs\n",
"npm install -g coffee-script \n",
"pip install coffeetools\n",
"</code></pre><hr>\n",
"<hr><pre><code class=\"lang-python\">from coffeetools import coffee\n",
"%reload_ext coffeetools\n",
"library.env.filters['execute_coffeescript'] = lambda s: coffee.compile( s, bare=True)\n",
"library.env.globals['default_lang'] = 'coffeescript'\n",
"</code></pre><hr><p><strong>All indented code blocks are set to coffeescript now.</strong></p><h2>Load <code>d3</code> into the client</h2>\n",
"<hr><pre><code>$.getScript \"//d3js.org/d3.v3.min.js\"\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"$.getScript(\"//d3js.org/d3.v3.min.js\");\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"# [``d3``]({{ref['d3']}}) in [Coffeescript]({{ref['coffee']}}) \n",
"\n",
"Coffeescript is a white space aware grammar for Javascript; it is the most pythonic javascript.\n",
"\n",
"## Import Coffeescript compiler for python\n",
"\n",
"```raw\n",
"%%bash\n",
"conda install -c javascript nodejs\n",
"npm install -g coffee-script \n",
"pip install coffeetools\n",
"```\n",
"\n",
"```python\n",
"from coffeetools import coffee\n",
"%reload_ext coffeetools\n",
"library.env.filters['execute_coffeescript'] = lambda s: coffee.compile( s, bare=True)\n",
"library.env.globals['default_lang'] = 'coffeescript'\n",
"```\n",
"\n",
"__All indented code blocks are set to coffeescript now.__\n",
"\n",
"## Load ``d3`` into the client\n",
" \n",
" $.getScript \"//d3js.org/d3.v3.min.js\"\n",
" \n"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h1>The 0<sup>th</sup> law of <code>d3</code></h1><p><code>d3</code> needs to data to make visualizations. Visualizations manifest themselves by the creation, \n",
"modification, and deletion of DOM nodes on a webpage.</p><blockquote><p>I find it interesting that the <code>d3js</code> homepage does not present any\n",
"syntaxes that are specific to svg's or images. <code>d3</code> is DOM tool; jQuery for data except \n",
"its namespace is more like <code>$$$$$</code>.</p>\n",
"</blockquote><h1>Key Concepts</h1><blockquote><p>During this demonstration, I suggest having your console open vertically on the right. The console is used\n",
"to describe the interactions with d3.</p>\n",
"</blockquote>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"# The 0<sup>th</sup> law of ``d3``\n",
"\n",
"``d3`` needs to data to make visualizations. Visualizations manifest themselves by the creation, \n",
"modification, and deletion of DOM nodes on a webpage. \n",
"\n",
"> I find it interesting that the ``d3js`` homepage does not present any\n",
"syntaxes that are specific to svg's or images. ``d3`` is DOM tool; jQuery for data except \n",
"its namespace is more like `$$$$$`.\n",
"\n",
"# Key Concepts\n",
"\n",
"> During this demonstration, I suggest having your console open vertically on the right. The console is used\n",
"to describe the interactions with d3."
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
" <div id=\"gimme-data\" class=\"demo\">DEMO</div>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"<h2>d3 attaches <code>__data__</code> to DOM nodes</h2><blockquote><p>Make an HTML element.</p>\n",
"</blockquote>\n",
"<hr><pre><code class=\"lang-python\"> %%html\n",
" &lt;div id=\"gimme-data\" class=\"demo\"&gt;DEMO&lt;/div&gt;\n",
"</code></pre><hr><blockquote><p>Use a <code>d3</code> selection to inspect it in the console.</p>\n",
"</blockquote>\n",
"<hr><pre><code>selection = d3.select '#gimme-data'\n",
"console.log 'Before datum', selection.property '__data__'\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"var selection;\n",
"\n",
"selection = d3.select('#gimme-data');\n",
"\n",
"console.log('Before datum', selection.property('__data__'));\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 6,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"## d3 attaches `__data__` to DOM nodes\n",
" \n",
" > Make an HTML element.\n",
" \n",
" ```python\n",
" %%html\n",
" <div id=\"gimme-data\" class=\"demo\">DEMO</div>\n",
" ```\n",
" > Use a ``d3`` selection to inspect it in the console.\n",
"\n",
" selection = d3.select '#gimme-data'\n",
" console.log 'Before datum', selection.property '__data__'"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<blockquote><p><code>datum</code> attaches arbitrary data to a dom node.</p>\n",
"</blockquote>\n",
"<hr><pre><code>selection.datum {\n",
" foo: 'bar'\n",
" baz: 'bam'\n",
"}\n",
"console.log 'After datum', selection.property '__data__'\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"selection.datum({\n",
" foo: 'bar',\n",
" baz: 'bam'\n",
"});\n",
"\n",
"console.log('After datum', selection.property('__data__'));\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
" \n",
"> ``datum`` attaches arbitrary data to a dom node.\n",
" \n",
" selection.datum {\n",
" foo: 'bar'\n",
" baz: 'bam'\n",
" }\n",
" console.log 'After datum', selection.property '__data__'"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"d3.select('#gimme-data').remove()"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"d3.select('#gimme-data').remove()"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
" <div class=\"demo\" id=\"can-haz-data-attr\" data-first-name=\"Putty\" data-last-name=\"Tat\">I haz Data</div>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"<h3>HTML5 data attributes</h3><p><a href=\"https://github.com/mbostock/d3/wiki/Selections#datum\"><code>d3</code></a> detects\n",
"<a href=\"http://html5doctor.com/html5-custom-data-attributes/\">html5 data attributes</a>. Data attributes are used by many\n",
"jQuery extensions and can easily be leveraged by <code>d3</code>.</p>\n",
"<hr><pre><code class=\"lang-python\"> %%html\n",
" &lt;div class=\"demo\" id=\"can-haz-data-attr\" data-first-name=\"Putty\" data-last-name=\"Tat\"&gt;I haz Data&lt;/div&gt;\n",
"</code></pre><hr>\n",
"<hr><pre><code>d3.select '#can-haz-data-attr'\n",
" .each ()-&gt; console.log @dataset\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"d3.select('#can-haz-data-attr').each(function() {\n",
" return console.log(this.dataset);\n",
"});\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"### HTML5 data attributes\n",
"\n",
"[``d3``](https://github.com/mbostock/d3/wiki/Selections#datum) detects\n",
"[html5 data attributes]({{ref['data-attr']}}). Data attributes are used by many\n",
"jQuery extensions and can easily be leveraged by ``d3``.\n",
"\n",
" ```python\n",
" %%html\n",
" <div class=\"demo\" id=\"can-haz-data-attr\" data-first-name=\"Putty\" data-last-name=\"Tat\">I haz Data</div>\n",
" ```\n",
"\n",
" d3.select '#can-haz-data-attr'\n",
" .each ()-> console.log @dataset\n",
" "
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"d3.select('#can-haz-data-attr').remove()"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"d3.select('#can-haz-data-attr').remove()"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
" <div id=\"gimme-text\" class=\"demo\"></div>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"<h2><code>d3</code> Selections</h2><h3>Alternating color text</h3>\n",
"<hr><pre><code class=\"lang-python\"> %%html\n",
" &lt;div id=\"gimme-text\" class=\"demo\"&gt;&lt;/div&gt;\n",
"</code></pre><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 11,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"## `d3` Selections\n",
"\n",
"### Alternating color text\n",
"\n",
" ```python\n",
" %%html\n",
" <div id=\"gimme-text\" class=\"demo\"></div>\n",
" ```"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h4>Select</h4>\n",
"<hr><pre><code>selection = d3.select '#gimme-text'\n",
" .selectAll 'span'\n",
" .data \"I pity the fool that doesn't use d3.\"\n",
"console.log 'Selection:', selection\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"var selection;\n",
"\n",
"selection = d3.select('#gimme-text').selectAll('span').data(\"I pity the fool that doesn't use d3.\");\n",
"\n",
"console.log('Selection:', selection);\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 12,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"#### Select\n",
"\n",
" selection = d3.select '#gimme-text'\n",
" .selectAll 'span'\n",
" .data \"I pity the fool that doesn't use d3.\"\n",
" console.log 'Selection:', selection"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h4>Enter</h4>\n",
"<hr><pre><code>selection.enter().append 'span'\n",
"\n",
"console.log 'DOM Creation:', selection, selection.property 'parentNode'\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"selection.enter().append('span');\n",
"\n",
"console.log('DOM Creation:', selection, selection.property('parentNode'));\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 13,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"#### Enter\n",
"\n",
" selection.enter().append 'span'\n",
" \n",
" console.log 'DOM Creation:', selection, selection.property 'parentNode'"
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h4>Update</h4>\n",
"<hr><pre><code>selection.text (s)-&gt; s\n",
" .style 'color', (s,i)-&gt; ['blue','red','green'][i%3]\n",
"\n",
"console.log 'DOM Updated:', selection, selection.property 'parentNode'\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"selection.text(function(s) {\n",
" return s;\n",
"}).style('color', function(s, i) {\n",
" return ['blue', 'red', 'green'][i % 3];\n",
"});\n",
"\n",
"console.log('DOM Updated:', selection, selection.property('parentNode'));\n",
"</script><hr><h5>Exit</h5>\n",
"<hr><pre><code>selection.exit().remove()\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"selection.exit().remove();\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 14,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"#### Update\n",
"\n",
" selection.text (s)-> s\n",
" .style 'color', (s,i)-> ['blue','red','green'][i%3]\n",
" \n",
" console.log 'DOM Updated:', selection, selection.property 'parentNode'\n",
" \n",
"##### Exit\n",
" \n",
" selection.exit().remove()"
]
},
{
"cell_type": "code",
"execution_count": 15,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h4>Update</h4>\n",
"<hr><pre><code>selection = d3.select '#gimme-text'\n",
" .selectAll 'span'\n",
" .data 'Because everything is data'\n",
"\n",
"selection.text (s)-&gt; s\n",
" .style 'color', (s,i)-&gt; ['blue','red','green'][i%3]\n",
"selection.exit().remove()\n",
"\n",
"console.log 'DOM Updated:', selection\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"var selection;\n",
"\n",
"selection = d3.select('#gimme-text').selectAll('span').data('Because everything is data');\n",
"\n",
"selection.text(function(s) {\n",
" return s;\n",
"}).style('color', function(s, i) {\n",
" return ['blue', 'red', 'green'][i % 3];\n",
"});\n",
"\n",
"selection.exit().remove();\n",
"\n",
"console.log('DOM Updated:', selection);\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 15,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"#### Update\n",
"\n",
" selection = d3.select '#gimme-text'\n",
" .selectAll 'span'\n",
" .data 'Because everything is data'\n",
" \n",
" selection.text (s)-> s\n",
" .style 'color', (s,i)-> ['blue','red','green'][i%3]\n",
" selection.exit().remove()\n",
" \n",
" console.log 'DOM Updated:', selection"
]
},
{
"cell_type": "code",
"execution_count": 16,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<h2>Exercise make a table using the iris data.</h2>\n",
"<hr><pre><code class=\"lang-python\">from bokeh.sampledata import iris\n",
"</code></pre><hr><script>window.iris = {'columns': ['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species'], 'data': [[5.1, 3.5, 1.4, 0.2, 'setosa'], [4.9, 3.0, 1.4, 0.2, 'setosa'], [4.7, 3.2, 1.3, 0.2, 'setosa'], [4.6, 3.1, 1.5, 0.2, 'setosa'], [5.0, 3.6, 1.4, 0.2, 'setosa'], [5.4, 3.9, 1.7, 0.4, 'setosa'], [4.6, 3.4, 1.4, 0.3, 'setosa'], [5.0, 3.4, 1.5, 0.2, 'setosa'], [4.4, 2.9, 1.4, 0.2, 'setosa'], [4.9, 3.1, 1.5, 0.1, 'setosa'], [5.4, 3.7, 1.5, 0.2, 'setosa'], [4.8, 3.4, 1.6, 0.2, 'setosa'], [4.8, 3.0, 1.4, 0.1, 'setosa'], [4.3, 3.0, 1.1, 0.1, 'setosa'], [5.8, 4.0, 1.2, 0.2, 'setosa'], [5.7, 4.4, 1.5, 0.4, 'setosa'], [5.4, 3.9, 1.3, 0.4, 'setosa'], [5.1, 3.5, 1.4, 0.3, 'setosa'], [5.7, 3.8, 1.7, 0.3, 'setosa'], [5.1, 3.8, 1.5, 0.3, 'setosa'], [5.4, 3.4, 1.7, 0.2, 'setosa'], [5.1, 3.7, 1.5, 0.4, 'setosa'], [4.6, 3.6, 1.0, 0.2, 'setosa'], [5.1, 3.3, 1.7, 0.5, 'setosa'], [4.8, 3.4, 1.9, 0.2, 'setosa'], [5.0, 3.0, 1.6, 0.2, 'setosa'], [5.0, 3.4, 1.6, 0.4, 'setosa'], [5.2, 3.5, 1.5, 0.2, 'setosa'], [5.2, 3.4, 1.4, 0.2, 'setosa'], [4.7, 3.2, 1.6, 0.2, 'setosa'], [4.8, 3.1, 1.6, 0.2, 'setosa'], [5.4, 3.4, 1.5, 0.4, 'setosa'], [5.2, 4.1, 1.5, 0.1, 'setosa'], [5.5, 4.2, 1.4, 0.2, 'setosa'], [4.9, 3.1, 1.5, 0.2, 'setosa'], [5.0, 3.2, 1.2, 0.2, 'setosa'], [5.5, 3.5, 1.3, 0.2, 'setosa'], [4.9, 3.6, 1.4, 0.1, 'setosa'], [4.4, 3.0, 1.3, 0.2, 'setosa'], [5.1, 3.4, 1.5, 0.2, 'setosa'], [5.0, 3.5, 1.3, 0.3, 'setosa'], [4.5, 2.3, 1.3, 0.3, 'setosa'], [4.4, 3.2, 1.3, 0.2, 'setosa'], [5.0, 3.5, 1.6, 0.6, 'setosa'], [5.1, 3.8, 1.9, 0.4, 'setosa'], [4.8, 3.0, 1.4, 0.3, 'setosa'], [5.1, 3.8, 1.6, 0.2, 'setosa'], [4.6, 3.2, 1.4, 0.2, 'setosa'], [5.3, 3.7, 1.5, 0.2, 'setosa'], [5.0, 3.3, 1.4, 0.2, 'setosa'], [7.0, 3.2, 4.7, 1.4, 'versicolor'], [6.4, 3.2, 4.5, 1.5, 'versicolor'], [6.9, 3.1, 4.9, 1.5, 'versicolor'], [5.5, 2.3, 4.0, 1.3, 'versicolor'], [6.5, 2.8, 4.6, 1.5, 'versicolor'], [5.7, 2.8, 4.5, 1.3, 'versicolor'], [6.3, 3.3, 4.7, 1.6, 'versicolor'], [4.9, 2.4, 3.3, 1.0, 'versicolor'], [6.6, 2.9, 4.6, 1.3, 'versicolor'], [5.2, 2.7, 3.9, 1.4, 'versicolor'], [5.0, 2.0, 3.5, 1.0, 'versicolor'], [5.9, 3.0, 4.2, 1.5, 'versicolor'], [6.0, 2.2, 4.0, 1.0, 'versicolor'], [6.1, 2.9, 4.7, 1.4, 'versicolor'], [5.6, 2.9, 3.6, 1.3, 'versicolor'], [6.7, 3.1, 4.4, 1.4, 'versicolor'], [5.6, 3.0, 4.5, 1.5, 'versicolor'], [5.8, 2.7, 4.1, 1.0, 'versicolor'], [6.2, 2.2, 4.5, 1.5, 'versicolor'], [5.6, 2.5, 3.9, 1.1, 'versicolor'], [5.9, 3.2, 4.8, 1.8, 'versicolor'], [6.1, 2.8, 4.0, 1.3, 'versicolor'], [6.3, 2.5, 4.9, 1.5, 'versicolor'], [6.1, 2.8, 4.7, 1.2, 'versicolor'], [6.4, 2.9, 4.3, 1.3, 'versicolor'], [6.6, 3.0, 4.4, 1.4, 'versicolor'], [6.8, 2.8, 4.8, 1.4, 'versicolor'], [6.7, 3.0, 5.0, 1.7, 'versicolor'], [6.0, 2.9, 4.5, 1.5, 'versicolor'], [5.7, 2.6, 3.5, 1.0, 'versicolor'], [5.5, 2.4, 3.8, 1.1, 'versicolor'], [5.5, 2.4, 3.7, 1.0, 'versicolor'], [5.8, 2.7, 3.9, 1.2, 'versicolor'], [6.0, 2.7, 5.1, 1.6, 'versicolor'], [5.4, 3.0, 4.5, 1.5, 'versicolor'], [6.0, 3.4, 4.5, 1.6, 'versicolor'], [6.7, 3.1, 4.7, 1.5, 'versicolor'], [6.3, 2.3, 4.4, 1.3, 'versicolor'], [5.6, 3.0, 4.1, 1.3, 'versicolor'], [5.5, 2.5, 4.0, 1.3, 'versicolor'], [5.5, 2.6, 4.4, 1.2, 'versicolor'], [6.1, 3.0, 4.6, 1.4, 'versicolor'], [5.8, 2.6, 4.0, 1.2, 'versicolor'], [5.0, 2.3, 3.3, 1.0, 'versicolor'], [5.6, 2.7, 4.2, 1.3, 'versicolor'], [5.7, 3.0, 4.2, 1.2, 'versicolor'], [5.7, 2.9, 4.2, 1.3, 'versicolor'], [6.2, 2.9, 4.3, 1.3, 'versicolor'], [5.1, 2.5, 3.0, 1.1, 'versicolor'], [5.7, 2.8, 4.1, 1.3, 'versicolor'], [6.3, 3.3, 6.0, 2.5, 'virginica'], [5.8, 2.7, 5.1, 1.9, 'virginica'], [7.1, 3.0, 5.9, 2.1, 'virginica'], [6.3, 2.9, 5.6, 1.8, 'virginica'], [6.5, 3.0, 5.8, 2.2, 'virginica'], [7.6, 3.0, 6.6, 2.1, 'virginica'], [4.9, 2.5, 4.5, 1.7, 'virginica'], [7.3, 2.9, 6.3, 1.8, 'virginica'], [6.7, 2.5, 5.8, 1.8, 'virginica'], [7.2, 3.6, 6.1, 2.5, 'virginica'], [6.5, 3.2, 5.1, 2.0, 'virginica'], [6.4, 2.7, 5.3, 1.9, 'virginica'], [6.8, 3.0, 5.5, 2.1, 'virginica'], [5.7, 2.5, 5.0, 2.0, 'virginica'], [5.8, 2.8, 5.1, 2.4, 'virginica'], [6.4, 3.2, 5.3, 2.3, 'virginica'], [6.5, 3.0, 5.5, 1.8, 'virginica'], [7.7, 3.8, 6.7, 2.2, 'virginica'], [7.7, 2.6, 6.9, 2.3, 'virginica'], [6.0, 2.2, 5.0, 1.5, 'virginica'], [6.9, 3.2, 5.7, 2.3, 'virginica'], [5.6, 2.8, 4.9, 2.0, 'virginica'], [7.7, 2.8, 6.7, 2.0, 'virginica'], [6.3, 2.7, 4.9, 1.8, 'virginica'], [6.7, 3.3, 5.7, 2.1, 'virginica'], [7.2, 3.2, 6.0, 1.8, 'virginica'], [6.2, 2.8, 4.8, 1.8, 'virginica'], [6.1, 3.0, 4.9, 1.8, 'virginica'], [6.4, 2.8, 5.6, 2.1, 'virginica'], [7.2, 3.0, 5.8, 1.6, 'virginica'], [7.4, 2.8, 6.1, 1.9, 'virginica'], [7.9, 3.8, 6.4, 2.0, 'virginica'], [6.4, 2.8, 5.6, 2.2, 'virginica'], [6.3, 2.8, 5.1, 1.5, 'virginica'], [6.1, 2.6, 5.6, 1.4, 'virginica'], [7.7, 3.0, 6.1, 2.3, 'virginica'], [6.3, 3.4, 5.6, 2.4, 'virginica'], [6.4, 3.1, 5.5, 1.8, 'virginica'], [6.0, 3.0, 4.8, 1.8, 'virginica'], [6.9, 3.1, 5.4, 2.1, 'virginica'], [6.7, 3.1, 5.6, 2.4, 'virginica'], [6.9, 3.1, 5.1, 2.3, 'virginica'], [5.8, 2.7, 5.1, 1.9, 'virginica'], [6.8, 3.2, 5.9, 2.3, 'virginica'], [6.7, 3.3, 5.7, 2.5, 'virginica'], [6.7, 3.0, 5.2, 2.3, 'virginica'], [6.3, 2.5, 5.0, 1.9, 'virginica'], [6.5, 3.0, 5.2, 2.0, 'virginica'], [6.2, 3.4, 5.4, 2.3, 'virginica'], [5.9, 3.0, 5.1, 1.8, 'virginica']], 'index': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149]}; console.log(iris);</script><p/><table class=\"demo\" id=\"iris\"/>\n",
"<hr><pre><code>body = d3.select \"table#iris\"\n",
" .selectAll 'tbody'\n",
" .data [null]\n",
"body.enter().append 'tbody'\n",
"body.exit().remove()\n",
"\n",
"rows = d3.select 'table#iris tbody'\n",
" .selectAll 'tr'\n",
" .data iris['data'][0..10]\n",
"\n",
"rows.enter().append 'tr'\n",
"rows.each (rowdata,i)-&gt;\n",
" cell= d3.select(@).selectAll 'td'\n",
" .data rowdata\n",
" cell.enter().append 'td'\n",
" cell.text (s)-&gt; s\n",
" cell.exit().remove()\n",
"</code></pre><script>// Generated by CoffeeScript 1.10.0\n",
"var body, rows;\n",
"\n",
"body = d3.select(\"table#iris\").selectAll('tbody').data([null]);\n",
"\n",
"body.enter().append('tbody');\n",
"\n",
"body.exit().remove();\n",
"\n",
"rows = d3.select('table#iris tbody').selectAll('tr').data(iris['data'].slice(0, 11));\n",
"\n",
"rows.enter().append('tr');\n",
"\n",
"rows.each(function(rowdata, i) {\n",
" var cell;\n",
" cell = d3.select(this).selectAll('td').data(rowdata);\n",
" cell.enter().append('td');\n",
" cell.text(function(s) {\n",
" return s;\n",
" });\n",
" return cell.exit().remove();\n",
"});\n",
"</script><hr>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 16,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"\n",
"## Exercise make a table using the iris data.\n",
"\n",
"```python\n",
"from bokeh.sampledata import iris\n",
"```\n",
"\n",
"<script>window.iris = {{iris.flowers.to_dict(orient='split')}}; console.log(iris);</script>\n",
"\n",
"<table class=\"demo\" id=\"iris\"></table>\n",
"\n",
" body = d3.select \"table#iris\"\n",
" .selectAll 'tbody'\n",
" .data [null]\n",
" body.enter().append 'tbody'\n",
" body.exit().remove()\n",
" \n",
" rows = d3.select 'table#iris tbody'\n",
" .selectAll 'tr'\n",
" .data iris['data'][0..10]\n",
" \n",
" rows.enter().append 'tr'\n",
" rows.each (rowdata,i)->\n",
" cell= d3.select(@).selectAll 'td'\n",
" .data rowdata\n",
" cell.enter().append 'td'\n",
" cell.text (s)-> s\n",
" cell.exit().remove()\n",
" "
]
},
{
"cell_type": "code",
"execution_count": 17,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"// Generated by CoffeeScript 1.10.0\n",
"(function() {\n",
" var rows;\n",
"\n",
" rows = d3.select('table#iris tbody').selectAll('tr').data(iris['data'].slice(10, 21));\n",
"\n",
" rows.enter().append('tr');\n",
"\n",
" rows.each(function(rowdata, i) {\n",
" var cell;\n",
" cell = d3.select(this).selectAll('td').data(rowdata);\n",
" cell.enter().append('td');\n",
" cell.text(function(s) {\n",
" return s;\n",
" });\n",
" return cell.exit().remove();\n",
" });\n",
"\n",
"}).call(this);\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%coffeescript\n",
" rows = d3.select 'table#iris tbody'\n",
" .selectAll 'tr'\n",
" .data iris['data'][10..20]\n",
" \n",
" rows.enter().append 'tr'\n",
" rows.each (rowdata,i)->\n",
" cell= d3.select(@).selectAll 'td'\n",
" .data rowdata\n",
" cell.enter().append 'td'\n",
" cell.text (s)-> s\n",
" cell.exit().remove()\n",
" "
]
},
{
"cell_type": "code",
"execution_count": 18,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<p/><div style=\"bottom:20px;right:20px;position:fixed;opacity:.8;\" class=\"btn btn-lg btn-warning hide-input\">Toggle Inputs</div><script>\n",
"$('.hide-input').click( function(){\n",
" $('div.input').toggle()\n",
"});\n",
"$('.hide-input').click();\n",
"</script>"
],
"text/plain": [
"<literacy.Cell object>"
]
},
"execution_count": 18,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%literate\n",
"<div style=\"bottom:20px;right:20px;position:fixed;opacity:.8;\" class=\"btn btn-lg btn-warning hide-input\">Toggle Inputs</div>\n",
"<script>\n",
"$('.hide-input').click( function(){\n",
" $('div.input').toggle()\n",
"});\n",
"$('.hide-input').click();\n",
"</script>"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"anaconda-cloud": {},
"kernelspec": {
"display_name": "Python [Root]",
"language": "python",
"name": "Python [Root]"
},
"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.1"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment