Skip to content

Instantly share code, notes, and snippets.

@aflaxman

aflaxman/file1.py

Forked from anonymous/file1.py
Created July 4, 2013 22:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aflaxman/5930656 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aflaxman/5930656 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
file1.py
{
"metadata": {
"name": "2013_04_20b_hello_d3-vega-vincent"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"!date"
],
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": [
"Sat Apr 20 14:23:24 PDT 2013\r\n"
]
}
],
"prompt_number": 1
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Three ways to make the \"hello, world\" of statistical graphics"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"# load js libraries\n",
"from IPython.core.display import display, HTML, Javascript\n",
"display(HTML(\"\"\"\n",
"<script src=\"http://trifacta.github.com/vega/d3.v3.min.js\"></script>\n",
"<script src=\"http://trifacta.github.com/vega/vega.js\"></script>\n",
"\"\"\"))"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"<script src=\"http://trifacta.github.com/vega/d3.v3.min.js\"></script>\n",
"<script src=\"http://trifacta.github.com/vega/vega.js\"></script>\n"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x2f9e5d0>"
]
}
],
"prompt_number": 56
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# D3 is hardest"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"# css for axis\n",
"display(HTML(\"\"\"\n",
"<style type=\"text/css\">\n",
" .axis path,\n",
" .axis line {\n",
" fill: none;\n",
" stroke: black;\n",
" shape-rendering: crispEdges;\n",
" }\n",
" .axis text {\n",
" font-family: sans-serif;\n",
" font-size: 11px;\n",
" }\n",
"</style>\n",
"\"\"\"))"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"<style type=\"text/css\">\n",
" .axis path,\n",
" .axis line {\n",
" fill: none;\n",
" stroke: black;\n",
" shape-rendering: crispEdges;\n",
" }\n",
" .axis text {\n",
" font-family: sans-serif;\n",
" font-size: 11px;\n",
" }\n",
"</style>\n"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x2f9e090>"
]
}
],
"prompt_number": 57
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%javascript\n",
"// Make visible in IPython \n",
"container.show()\n",
"\n",
"//Width and height\n",
"var w = 500;\n",
"var h = 300;\n",
"var padding = 30;\n",
"\n",
"//Create svg in IPython element\n",
"var svg = d3.selectAll(element).append('svg').attr('width', w).attr('height', h); \n",
"\n",
"//Initialize data array\n",
"var dataset = [3,1,4,1,5,9];\n",
"\n",
"//Create scale functions\n",
"var xScale = d3.scale.linear()\n",
" .domain([-.5, d3.max(dataset, function(d,i) { return i; })])\n",
" .range([padding, w - padding * 2]);\n",
"\n",
"var yScale = d3.scale.linear()\n",
" .domain([-.5, d3.max(dataset, function(d) { return d; })])\n",
" .range([h - padding, padding]);\n",
"\n",
"//Define X axis\n",
"var xAxis = d3.svg.axis()\n",
" .scale(xScale)\n",
" .orient(\"bottom\")\n",
" .ticks(5);\n",
"\n",
"//Define Y axis\n",
"var yAxis = d3.svg.axis()\n",
" .scale(yScale)\n",
" .orient(\"left\")\n",
" .ticks(10);\n",
"\n",
"//Create circles\n",
"svg.selectAll(\"circle\")\n",
" .data(dataset)\n",
" .enter()\n",
" .append(\"circle\")\n",
" .attr(\"cx\", function(d,i) {\n",
" return xScale(i);\n",
" })\n",
" .attr(\"cy\", function(d) {\n",
" return yScale(d);\n",
" })\n",
" .attr(\"r\", 5);\n",
"\n",
"var line = d3.svg.line()\n",
"\u00a0\u00a0\u00a0\u00a0.x(function(d,i) { return xScale(i); })\n",
"\u00a0\u00a0\u00a0\u00a0.y(function(d) { return yScale(d); });\n",
"\n",
"svg.append(\"svg:path\").attr(\"d\", line(dataset)).attr(\"fill\", \"none\").attr(\"stroke\", \"black\");\n",
"\n",
"//Create X axis\n",
"svg.append(\"g\")\n",
" .attr(\"class\", \"axis\")\n",
" .attr(\"transform\", \"translate(0,\" + (h - padding) + \")\")\n",
" .call(xAxis);\n",
"\n",
"//Create Y axis\n",
"svg.append(\"g\")\n",
" .attr(\"class\", \"axis\")\n",
" .attr(\"transform\", \"translate(\" + padding + \",0)\")\n",
" .call(yAxis);\n"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"// Make visible in IPython \n",
"container.show()\n",
"\n",
"//Width and height\n",
"var w = 500;\n",
"var h = 300;\n",
"var padding = 30;\n",
"\n",
"//Create svg in IPython element\n",
"var svg = d3.selectAll(element).append('svg').attr('width', w).attr('height', h); \n",
"\n",
"//Initialize data array\n",
"var dataset = [3,1,4,1,5,9];\n",
"\n",
"//Create scale functions\n",
"var xScale = d3.scale.linear()\n",
" .domain([-.5, d3.max(dataset, function(d,i) { return i; })])\n",
" .range([padding, w - padding * 2]);\n",
"\n",
"var yScale = d3.scale.linear()\n",
" .domain([-.5, d3.max(dataset, function(d) { return d; })])\n",
" .range([h - padding, padding]);\n",
"\n",
"//Define X axis\n",
"var xAxis = d3.svg.axis()\n",
" .scale(xScale)\n",
" .orient(\"bottom\")\n",
" .ticks(5);\n",
"\n",
"//Define Y axis\n",
"var yAxis = d3.svg.axis()\n",
" .scale(yScale)\n",
" .orient(\"left\")\n",
" .ticks(10);\n",
"\n",
"//Create circles\n",
"svg.selectAll(\"circle\")\n",
" .data(dataset)\n",
" .enter()\n",
" .append(\"circle\")\n",
" .attr(\"cx\", function(d,i) {\n",
" return xScale(i);\n",
" })\n",
" .attr(\"cy\", function(d) {\n",
" return yScale(d);\n",
" })\n",
" .attr(\"r\", 5);\n",
"\n",
"var line = d3.svg.line()\n",
"\u00a0\u00a0\u00a0\u00a0.x(function(d,i) { return xScale(i); })\n",
"\u00a0\u00a0\u00a0\u00a0.y(function(d) { return yScale(d); });\n",
"\n",
"svg.append(\"svg:path\").attr(\"d\", line(dataset)).attr(\"fill\", \"none\").attr(\"stroke\", \"black\");\n",
"\n",
"//Create X axis\n",
"svg.append(\"g\")\n",
" .attr(\"class\", \"axis\")\n",
" .attr(\"transform\", \"translate(0,\" + (h - padding) + \")\")\n",
" .call(xAxis);\n",
"\n",
"//Create Y axis\n",
"svg.append(\"g\")\n",
" .attr(\"class\", \"axis\")\n",
" .attr(\"transform\", \"translate(\" + padding + \",0)\")\n",
" .call(yAxis);\n"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.Javascript at 0x2f9e1d0>"
]
}
],
"prompt_number": 58
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Vega is easier, but requires writing JSON by hand\n",
"\n",
"No humans should have to write JSON by hand"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"display(HTML(\"\"\"<div id=\"vega\"></div>\"\"\"),\n",
" Javascript(\"\"\"\n",
"var spec = {\n",
" \"width\": 500, \n",
" \"height\": 300, \n",
" \"padding\": {\"top\": 10, \"bottom\": 20, \"right\": 10, \"left\": 30}, \n",
" \"data\": [\n",
" {\n",
" \"values\": [{\"x\": 0, \"y\": 3}, {\"x\": 1, \"y\": 1}, {\"x\": 2, \"y\": 4}, {\"x\": 3, \"y\": 1}, {\"x\": 4, \"y\": 5}, {\"x\": 5, \"y\": 9}], \n",
" \"name\": \"table\"\n",
" }\n",
" ], \n",
"\n",
" \"scales\": [\n",
" {\n",
" \"name\": \"x\", \n",
" \"type\": \"linear\", \n",
" \"domain\": {\"field\": \"data.x\", \"data\": \"table\"},\n",
" \"range\": \"width\"\n",
" }, \n",
" {\n",
" \"name\": \"y\", \n",
" \"domain\": {\"field\": \"data.y\", \"data\": \"table\"}, \n",
" \"range\": \"height\", \n",
" \"nice\": true\n",
" }\n",
" ], \n",
" \"axes\": [\n",
" {\"scale\": \"x\", \"type\": \"x\"}, \n",
" {\"scale\": \"y\", \"type\": \"y\"}\n",
" ], \n",
" \"marks\": [\n",
" {\n",
" \"type\": \"line\", \n",
" \"from\": {\"data\": \"table\"}, \n",
" \"properties\": {\n",
" \"enter\": {\n",
" \"x\": {\"field\": \"data.x\", \"scale\": \"x\"},\n",
" \"y\": {\"field\": \"data.y\", \"scale\": \"y\"}, \n",
" \"y2\": {\"scale\": \"y\", \"value\": 0},\n",
" \"stroke\": {\"value\": \"#000000\"}\n",
" }\n",
" }\n",
" }, \n",
" {\n",
" \"type\": \"symbol\", \n",
" \"from\": {\"data\": \"table\"}, \n",
" \"properties\": {\n",
" \"update\": {\n",
" \"fill\": {\"value\": \"#2a3140\"}\n",
" }, \n",
" \"enter\": {\n",
" \"x\": {\"field\": \"data.x\", \"scale\": \"x\"},\n",
" \"y\": {\"field\": \"data.y\", \"scale\": \"y\"}, \n",
" \"stroke\": {\"value\": \"#ffffff\"},\n",
" \"strokeWidth\": {\"value\": 2} \n",
" }\n",
" }\n",
" }\n",
" ]\n",
"}\n",
";\n",
"vg.parse.spec(spec, function(chart) { chart({el:\"#vega\"}).update(); });\n",
"\"\"\"))"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<div id=\"vega\"></div>"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x3593410>"
]
},
{
"javascript": [
"\n",
"var spec = {\n",
" \"width\": 500, \n",
" \"height\": 300, \n",
" \"padding\": {\"top\": 10, \"bottom\": 20, \"right\": 10, \"left\": 30}, \n",
" \"data\": [\n",
" {\n",
" \"values\": [{\"x\": 0, \"y\": 3}, {\"x\": 1, \"y\": 1}, {\"x\": 2, \"y\": 4}, {\"x\": 3, \"y\": 1}, {\"x\": 4, \"y\": 5}, {\"x\": 5, \"y\": 9}], \n",
" \"name\": \"table\"\n",
" }\n",
" ], \n",
"\n",
" \"scales\": [\n",
" {\n",
" \"name\": \"x\", \n",
" \"type\": \"linear\", \n",
" \"domain\": {\"field\": \"data.x\", \"data\": \"table\"},\n",
" \"range\": \"width\"\n",
" }, \n",
" {\n",
" \"name\": \"y\", \n",
" \"domain\": {\"field\": \"data.y\", \"data\": \"table\"}, \n",
" \"range\": \"height\", \n",
" \"nice\": true\n",
" }\n",
" ], \n",
" \"axes\": [\n",
" {\"scale\": \"x\", \"type\": \"x\"}, \n",
" {\"scale\": \"y\", \"type\": \"y\"}\n",
" ], \n",
" \"marks\": [\n",
" {\n",
" \"type\": \"line\", \n",
" \"from\": {\"data\": \"table\"}, \n",
" \"properties\": {\n",
" \"enter\": {\n",
" \"x\": {\"field\": \"data.x\", \"scale\": \"x\"},\n",
" \"y\": {\"field\": \"data.y\", \"scale\": \"y\"}, \n",
" \"y2\": {\"scale\": \"y\", \"value\": 0},\n",
" \"stroke\": {\"value\": \"#000000\"}\n",
" }\n",
" }\n",
" }, \n",
" {\n",
" \"type\": \"symbol\", \n",
" \"from\": {\"data\": \"table\"}, \n",
" \"properties\": {\n",
" \"update\": {\n",
" \"fill\": {\"value\": \"#2a3140\"}\n",
" }, \n",
" \"enter\": {\n",
" \"x\": {\"field\": \"data.x\", \"scale\": \"x\"},\n",
" \"y\": {\"field\": \"data.y\", \"scale\": \"y\"}, \n",
" \"stroke\": {\"value\": \"#ffffff\"},\n",
" \"strokeWidth\": {\"value\": 2} \n",
" }\n",
" }\n",
" }\n",
" ]\n",
"}\n",
";\n",
"vg.parse.spec(spec, function(chart) { chart({el:\"#vega\"}).update(); });\n"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.Javascript at 0x3593650>"
]
}
],
"prompt_number": 74
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Vincent is easiest"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"import vincent\n",
"def vincent_ipynb_display(vis):\n",
" import json, random\n",
" from IPython.core.display import display, HTML, Javascript\n",
"\n",
" # HACK: use a randomly chosen unique div id\n",
" id = random.randint(0, 2**16)\n",
" \n",
" a = HTML(\"\"\"\n",
" <div id=\"vis%d\"></div>\n",
" \"\"\" % id)\n",
"\n",
" b = Javascript(\"\"\"\n",
" vg.parse.spec(%s, function(chart) { chart({el:\"#vis%d\"}).update(); });\n",
" \"\"\" % (json.dumps(vis.vega), id))\n",
" \n",
" display(a, b)"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 75
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"vis = vincent.Line()\n",
"vis.tabular_data([3,1,4,1,5,9])\n",
"\n",
"vis2 = vincent.Scatter()\n",
"vis2.tabular_data([3,1,4,1,5,9])\n",
"\n",
"vis.marks += vis2.marks\n",
"\n",
"vincent_ipynb_display(vis)"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
" <div id=\"vis64158\"></div>\n",
" "
],
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x3601290>"
]
},
{
"javascript": [
"\n",
" vg.parse.spec({\"scales\": [{\"range\": \"width\", \"type\": \"linear\", \"name\": \"x\", \"domain\": {\"field\": \"data.x\", \"data\": \"table\"}}, {\"range\": \"height\", \"name\": \"y\", \"domain\": {\"field\": \"data.y\", \"data\": \"table\"}, \"nice\": true}], \"axes\": [{\"scale\": \"x\", \"type\": \"x\"}, {\"scale\": \"y\", \"type\": \"y\"}], \"height\": 200, \"padding\": {\"top\": 10, \"bottom\": 20, \"right\": 10, \"left\": 30}, \"width\": 400, \"marks\": [{\"from\": {\"data\": \"table\"}, \"type\": \"line\", \"properties\": {\"enter\": {\"strokeWidth\": {\"value\": 2}, \"stroke\": {\"value\": \"#2a3140\"}, \"y\": {\"field\": \"data.y\", \"scale\": \"y\"}, \"x\": {\"field\": \"data.x\", \"scale\": \"x\"}, \"y2\": {\"scale\": \"y\", \"value\": 0}}}}, {\"from\": {\"data\": \"table\"}, \"type\": \"symbol\", \"properties\": {\"update\": {\"fill\": {\"value\": \"#2a3140\"}}, \"enter\": {\"stroke\": {\"value\": \"#2a3140\"}, \"fillOpacity\": {\"value\": 0.90000000000000002}, \"y\": {\"field\": \"data.y\", \"scale\": \"y\"}, \"x\": {\"field\": \"data.x\", \"scale\": \"x\"}}}}], \"data\": [{\"values\": [{\"y\": 3, \"x\": 0}, {\"y\": 1, \"x\": 1}, {\"y\": 4, \"x\": 2}, {\"y\": 1, \"x\": 3}, {\"y\": 5, \"x\": 4}, {\"y\": 9, \"x\": 5}], \"name\": \"table\"}], \"viewport\": null}, function(chart) { chart({el:\"#vis64158\"}).update(); });\n",
" "
],
"output_type": "display_data",
"text": [
"<IPython.core.display.Javascript at 0x36012d0>"
]
}
],
"prompt_number": 76
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment