Created
April 22, 2013 17:11
-
-
Save anonymous/5436794 to your computer and use it in GitHub Desktop.
Pasted from IPython
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
| { | |
| "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