Skip to content

Instantly share code, notes, and snippets.

@rdhyee

rdhyee/dimple_test.ipynb

Created March 12, 2014 04:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rdhyee/9501035 to your computer and use it in GitHub Desktop.
Save rdhyee/9501035 to your computer and use it in GitHub Desktop.
Download ZIP
Attempt to embed dimplejs into the IPython Notebook
Display the source blob
Display the rendered blob
Raw
dimple_test.ipynb
{
"metadata": {
"name": "",
"signature": "sha256:b82ebf5c938669feef1f35b3a7c9431b0d38dc1aaff43a4d191c45fcdc60a733"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"# http://stackoverflow.com/questions/22185527/how-can-i-successfully-load-dimple-js-when-require-js-is-present"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%javascript\n",
"\n",
"require.config({\n",
" shim: {\n",
" d3: { exports: \"d3\" },\n",
" dimple: {\n",
" exports: \"dimple\",\n",
" deps: [\"d3\"]\n",
" }\n",
" },\n",
" paths: {\n",
" d3: \"http://d3js.org/d3.v3.min\",\n",
" dimple: \"http://mashupguide.net/wwod14/dimple.v1.1.5.amd\",\n",
" queue: \"http://d3js.org/queue.v1.min\",\n",
" topojson: \"http://d3js.org/topojson.v1.min\"\n",
" }\n",
"});\n",
"\n",
"\n",
"require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
" console.log(d3.version);\n",
" console.log(queue.version);\n",
" console.log(topojson.version);\n",
" console.log(dimple.version);\n",
"});"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"\n",
"require.config({\n",
" shim: {\n",
" d3: { exports: \"d3\" },\n",
" dimple: {\n",
" exports: \"dimple\",\n",
" deps: [\"d3\"]\n",
" }\n",
" },\n",
" paths: {\n",
" d3: \"http://d3js.org/d3.v3.min\",\n",
" dimple: \"http://mashupguide.net/wwod14/dimple.v1.1.5.amd\",\n",
" queue: \"http://d3js.org/queue.v1.min\",\n",
" topojson: \"http://d3js.org/topojson.v1.min\"\n",
" }\n",
"});\n",
"\n",
"\n",
"require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
" console.log(d3.version);\n",
" console.log(queue.version);\n",
" console.log(topojson.version);\n",
" console.log(dimple.version);\n",
"});"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.Javascript at 0x101bb8710>"
]
}
],
"prompt_number": 2
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"# https://github.com/dlab-berkeley/javascript-viz\n",
"\n"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<script type=\"text/css\">\n",
"\n",
"</script>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<script type=\"text/css\">\n",
"\n",
"</script>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x101bb84d0>"
]
}
],
"prompt_number": 4
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<div id=\"bar_chart\" style=\"height:600px; width:800px\"></div>\n",
"<script src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"></script>\n",
"<script>\n",
"\n",
"require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
" console.log(d3.version);\n",
" console.log(queue.version);\n",
" console.log(topojson.version);\n",
" console.log(dimple.version);\n",
"\n",
" // dimple requires d3 to be in global namespace\n",
" //window.d3 = d3;\n",
" //window.dimple = dimple;\n",
"\n",
" var svg = dimple.newSvg(\"#bar_chart\", 800, 600);\n",
" var data = [\n",
" { \"Word\":\"Hello\", \"Awesomeness\":2000 },\n",
" { \"Word\":\"World\", \"Awesomeness\":3000 }\n",
" ];\n",
" var chart = new dimple.chart(svg, data);\n",
" chart.addCategoryAxis(\"x\", \"Word\");\n",
" chart.addMeasureAxis(\"y\", \"Awesomeness\");\n",
" chart.addSeries(null, dimple.plot.bar);\n",
" chart.draw();\n",
"\n",
"\n",
"});\n",
"\n",
"</script>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<div id=\"bar_chart\" style=\"height:600px; width:800px\"></div>\n",
"<script src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"></script>\n",
"<script>\n",
"\n",
"require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
" console.log(d3.version);\n",
" console.log(queue.version);\n",
" console.log(topojson.version);\n",
" console.log(dimple.version);\n",
"\n",
" // dimple requires d3 to be in global namespace\n",
" //window.d3 = d3;\n",
" //window.dimple = dimple;\n",
"\n",
" var svg = dimple.newSvg(\"#bar_chart\", 800, 600);\n",
" var data = [\n",
" { \"Word\":\"Hello\", \"Awesomeness\":2000 },\n",
" { \"Word\":\"World\", \"Awesomeness\":3000 }\n",
" ];\n",
" var chart = new dimple.chart(svg, data);\n",
" chart.addCategoryAxis(\"x\", \"Word\");\n",
" chart.addMeasureAxis(\"y\", \"Awesomeness\");\n",
" chart.addSeries(null, dimple.plot.bar);\n",
" chart.draw();\n",
"\n",
"\n",
"});\n",
"\n",
"</script>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x101bb8590>"
]
}
],
"prompt_number": 5
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<div id=\"chartContainer\" style=\"height:600px; width:800px\"></div>\n",
"<script>\n",
"require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
" console.log(d3.version);\n",
" console.log(queue.version);\n",
" console.log(topojson.version);\n",
" console.log(dimple.version);\n",
"\n",
" // dimple requires d3 to be in global namespace\n",
" //window.d3 = d3;\n",
" // window.dimple = dimple;\n",
"\n",
" var svg = dimple.newSvg(\"#chartContainer\", 590, 400);\n",
"\n",
" // The default data set for these examples has regular times\n",
" // and the point of this demo is to show the time axis\n",
" // functionality, therefore a small bespoke data set is used.\n",
" data = [\n",
" { \"Shift\":\"Early\",\"Date\":\"12 Jul 2010 10:00\",\"Value\":1000 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Jul 2010 10:20\",\"Value\":1200 },\n",
" { \"Shift\":\"Early\",\"Date\":\"1 Aug 2010 10:40\",\"Value\":1600 },\n",
" { \"Shift\":\"Early\",\"Date\":\"8 Aug 2010 10:10\",\"Value\":1300 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Aug 2010 11:00\",\"Value\":1900 },\n",
" { \"Shift\":\"Early\",\"Date\":\"7 Sep 2010 09:50\",\"Value\":1100 },\n",
" { \"Shift\":\"Early\",\"Date\":\"13 Sep 2010 10:10\",\"Value\":1000 },\n",
" { \"Shift\":\"Early\",\"Date\":\"1 Oct 2010 12:00\",\"Value\":2000 },\n",
" { \"Shift\":\"Early\",\"Date\":\"6 Oct 2010 10:10\",\"Value\":1900 },\n",
" { \"Shift\":\"Early\",\"Date\":\"19 Oct 2010 11:40\",\"Value\":1800 },\n",
" { \"Shift\":\"Early\",\"Date\":\"24 Oct 2010 10:30\",\"Value\":1200 },\n",
" { \"Shift\":\"Early\",\"Date\":\"3 Nov 2010 09:30\",\"Value\":1800 },\n",
" { \"Shift\":\"Early\",\"Date\":\"12 Nov 2010 10:50\",\"Value\":1800 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Nov 2010 10:10\",\"Value\":1900 },\n",
" { \"Shift\":\"Early\",\"Date\":\"5 Dec 2010 10:50\",\"Value\":1600 },\n",
" { \"Shift\":\"Early\",\"Date\":\"9 Dec 2010 12:20\",\"Value\":1700 },\n",
" { \"Shift\":\"Early\",\"Date\":\"15 Dec 2010 10:10\",\"Value\":1400 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Dec 2010 10:00\",\"Value\":1200 },\n",
" { \"Shift\":\"Late\",\"Date\":\"11 Jul 2010 16:00\",\"Value\":2400 },\n",
" { \"Shift\":\"Late\",\"Date\":\"30 Jul 2010 17:30\",\"Value\":2000 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Aug 2010 15:40\",\"Value\":1600 },\n",
" { \"Shift\":\"Late\",\"Date\":\"5 Aug 2010 13:10\",\"Value\":1700 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Sep 2010 15:00\",\"Value\":1900 },\n",
" { \"Shift\":\"Late\",\"Date\":\"7 Sep 2010 15:50\",\"Value\":1100 },\n",
" { \"Shift\":\"Late\",\"Date\":\"13 Sep 2010 14:10\",\"Value\":1500 },\n",
" { \"Shift\":\"Late\",\"Date\":\"30 Sep 2010 13:00\",\"Value\":1000 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Nov 2010 15:50\",\"Value\":1800 },\n",
" { \"Shift\":\"Late\",\"Date\":\"24 Nov 2010 15:10\",\"Value\":1900 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Dec 2010 15:50\",\"Value\":1600 },\n",
" { \"Shift\":\"Late\",\"Date\":\"5 Dec 2010 15:20\",\"Value\":1700 },\n",
" { \"Shift\":\"Late\",\"Date\":\"13 Dec 2010 15:10\",\"Value\":1400 },\n",
" { \"Shift\":\"Late\",\"Date\":\"25 Dec 2010 15:00\",\"Value\":1200 }\n",
" ];\n",
"\n",
" // Create Separate Date and Time, this allows us to draw them\n",
" // on separate axes. Despite the time axis only displaying\n",
" // the time portion, the whole date is used so they need to\n",
" // have the same date allocated\n",
" data.forEach(function (d) {\n",
" d[\"Day\"] = d[\"Date\"].substring(0, d[\"Date\"].length - 6);\n",
" d[\"Time of Day\"] =\n",
" \"2000-01-01 \" + d[\"Date\"].substring(d[\"Date\"].length - 5);\n",
" }, this);\n",
"\n",
" // Create the chart as usual\n",
" var myChart = new dimple.chart(svg, data);\n",
" myChart.setBounds(70, 40, 490, 320)\n",
"\n",
" // Add the x axis reading dates in the format 01 Jan 2012\n",
" // and displaying them 01 Jan\n",
" var x = myChart.addTimeAxis(\"x\", \"Day\", \"%d %b %Y\", \"%d %b\");\n",
"\n",
" // Add the y axis reading dates and times but only outputting\n",
" // times. \n",
" var y = myChart.addTimeAxis(\"y\", \"Time of Day\",\n",
" \"%Y-%m-%d %H:%M\", \"%H:%M\");\n",
"\n",
" // Size the bubbles by volume\n",
" var z = myChart.addMeasureAxis(\"z\", \"Value\");\n",
"\n",
" // Setting min and max dates requires them to be set\n",
" // as actual javascript date objects\n",
" x.overrideMin = new Date(\"2010-06-20\");\n",
" x.overrideMax = new Date(\"2011-01-02\");\n",
" y.overrideMin = new Date(\"01/01/2000 9:00 am\");\n",
" y.overrideMax = new Date(\"01/01/2000 6:00 pm\");\n",
"\n",
" // Show a label for every 4 weeks.\n",
" x.timePeriod = d3.time.weeks;\n",
" x.timeInterval = 4;\n",
"\n",
" // Control bubble sizes by setting the max and min values \n",
" z.overrideMin = 900;\n",
" z.overrideMax = 3000;\n",
"\n",
" // Add the bubble series for shift values first so that it is\n",
" // drawn behind the lines\n",
" myChart.addSeries(\"Shift\", dimple.plot.bubble);\n",
"\n",
" // Add the line series on top of the bubbles. The bubbles\n",
" // and line points will naturally fall in the same places\n",
" var s = myChart.addSeries(\"Shift\", dimple.plot.line);\n",
"\n",
" // Add line markers to the line because it looks nice\n",
" s.lineMarkers = true;\n",
"\n",
" // Show a legend\n",
" myChart.addLegend(180, 10, 360, 20, \"right\");\n",
"\n",
" // Draw everything\n",
" myChart.draw();\n",
"\n",
" \n",
"\n",
"});\n",
"</script>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<div id=\"chartContainer\" style=\"height:600px; width:800px\"></div>\n",
"<script>\n",
"require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
" console.log(d3.version);\n",
" console.log(queue.version);\n",
" console.log(topojson.version);\n",
" console.log(dimple.version);\n",
"\n",
" // dimple requires d3 to be in global namespace\n",
" //window.d3 = d3;\n",
" // window.dimple = dimple;\n",
"\n",
" var svg = dimple.newSvg(\"#chartContainer\", 590, 400);\n",
"\n",
" // The default data set for these examples has regular times\n",
" // and the point of this demo is to show the time axis\n",
" // functionality, therefore a small bespoke data set is used.\n",
" data = [\n",
" { \"Shift\":\"Early\",\"Date\":\"12 Jul 2010 10:00\",\"Value\":1000 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Jul 2010 10:20\",\"Value\":1200 },\n",
" { \"Shift\":\"Early\",\"Date\":\"1 Aug 2010 10:40\",\"Value\":1600 },\n",
" { \"Shift\":\"Early\",\"Date\":\"8 Aug 2010 10:10\",\"Value\":1300 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Aug 2010 11:00\",\"Value\":1900 },\n",
" { \"Shift\":\"Early\",\"Date\":\"7 Sep 2010 09:50\",\"Value\":1100 },\n",
" { \"Shift\":\"Early\",\"Date\":\"13 Sep 2010 10:10\",\"Value\":1000 },\n",
" { \"Shift\":\"Early\",\"Date\":\"1 Oct 2010 12:00\",\"Value\":2000 },\n",
" { \"Shift\":\"Early\",\"Date\":\"6 Oct 2010 10:10\",\"Value\":1900 },\n",
" { \"Shift\":\"Early\",\"Date\":\"19 Oct 2010 11:40\",\"Value\":1800 },\n",
" { \"Shift\":\"Early\",\"Date\":\"24 Oct 2010 10:30\",\"Value\":1200 },\n",
" { \"Shift\":\"Early\",\"Date\":\"3 Nov 2010 09:30\",\"Value\":1800 },\n",
" { \"Shift\":\"Early\",\"Date\":\"12 Nov 2010 10:50\",\"Value\":1800 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Nov 2010 10:10\",\"Value\":1900 },\n",
" { \"Shift\":\"Early\",\"Date\":\"5 Dec 2010 10:50\",\"Value\":1600 },\n",
" { \"Shift\":\"Early\",\"Date\":\"9 Dec 2010 12:20\",\"Value\":1700 },\n",
" { \"Shift\":\"Early\",\"Date\":\"15 Dec 2010 10:10\",\"Value\":1400 },\n",
" { \"Shift\":\"Early\",\"Date\":\"20 Dec 2010 10:00\",\"Value\":1200 },\n",
" { \"Shift\":\"Late\",\"Date\":\"11 Jul 2010 16:00\",\"Value\":2400 },\n",
" { \"Shift\":\"Late\",\"Date\":\"30 Jul 2010 17:30\",\"Value\":2000 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Aug 2010 15:40\",\"Value\":1600 },\n",
" { \"Shift\":\"Late\",\"Date\":\"5 Aug 2010 13:10\",\"Value\":1700 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Sep 2010 15:00\",\"Value\":1900 },\n",
" { \"Shift\":\"Late\",\"Date\":\"7 Sep 2010 15:50\",\"Value\":1100 },\n",
" { \"Shift\":\"Late\",\"Date\":\"13 Sep 2010 14:10\",\"Value\":1500 },\n",
" { \"Shift\":\"Late\",\"Date\":\"30 Sep 2010 13:00\",\"Value\":1000 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Nov 2010 15:50\",\"Value\":1800 },\n",
" { \"Shift\":\"Late\",\"Date\":\"24 Nov 2010 15:10\",\"Value\":1900 },\n",
" { \"Shift\":\"Late\",\"Date\":\"1 Dec 2010 15:50\",\"Value\":1600 },\n",
" { \"Shift\":\"Late\",\"Date\":\"5 Dec 2010 15:20\",\"Value\":1700 },\n",
" { \"Shift\":\"Late\",\"Date\":\"13 Dec 2010 15:10\",\"Value\":1400 },\n",
" { \"Shift\":\"Late\",\"Date\":\"25 Dec 2010 15:00\",\"Value\":1200 }\n",
" ];\n",
"\n",
" // Create Separate Date and Time, this allows us to draw them\n",
" // on separate axes. Despite the time axis only displaying\n",
" // the time portion, the whole date is used so they need to\n",
" // have the same date allocated\n",
" data.forEach(function (d) {\n",
" d[\"Day\"] = d[\"Date\"].substring(0, d[\"Date\"].length - 6);\n",
" d[\"Time of Day\"] =\n",
" \"2000-01-01 \" + d[\"Date\"].substring(d[\"Date\"].length - 5);\n",
" }, this);\n",
"\n",
" // Create the chart as usual\n",
" var myChart = new dimple.chart(svg, data);\n",
" myChart.setBounds(70, 40, 490, 320)\n",
"\n",
" // Add the x axis reading dates in the format 01 Jan 2012\n",
" // and displaying them 01 Jan\n",
" var x = myChart.addTimeAxis(\"x\", \"Day\", \"%d %b %Y\", \"%d %b\");\n",
"\n",
" // Add the y axis reading dates and times but only outputting\n",
" // times. \n",
" var y = myChart.addTimeAxis(\"y\", \"Time of Day\",\n",
" \"%Y-%m-%d %H:%M\", \"%H:%M\");\n",
"\n",
" // Size the bubbles by volume\n",
" var z = myChart.addMeasureAxis(\"z\", \"Value\");\n",
"\n",
" // Setting min and max dates requires them to be set\n",
" // as actual javascript date objects\n",
" x.overrideMin = new Date(\"2010-06-20\");\n",
" x.overrideMax = new Date(\"2011-01-02\");\n",
" y.overrideMin = new Date(\"01/01/2000 9:00 am\");\n",
" y.overrideMax = new Date(\"01/01/2000 6:00 pm\");\n",
"\n",
" // Show a label for every 4 weeks.\n",
" x.timePeriod = d3.time.weeks;\n",
" x.timeInterval = 4;\n",
"\n",
" // Control bubble sizes by setting the max and min values \n",
" z.overrideMin = 900;\n",
" z.overrideMax = 3000;\n",
"\n",
" // Add the bubble series for shift values first so that it is\n",
" // drawn behind the lines\n",
" myChart.addSeries(\"Shift\", dimple.plot.bubble);\n",
"\n",
" // Add the line series on top of the bubbles. The bubbles\n",
" // and line points will naturally fall in the same places\n",
" var s = myChart.addSeries(\"Shift\", dimple.plot.line);\n",
"\n",
" // Add line markers to the line because it looks nice\n",
" s.lineMarkers = true;\n",
"\n",
" // Show a legend\n",
" myChart.addLegend(180, 10, 360, 20, \"right\");\n",
"\n",
" // Draw everything\n",
" myChart.draw();\n",
"\n",
" \n",
"\n",
"});\n",
"</script>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x101bb4350>"
]
}
],
"prompt_number": 6
},
{
"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