{ "metadata": { "name": "" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "heading", "level": 3, "metadata": {}, "source": [ "scratch notebook for testing the rendering of D3 and NVD3 based plots in IPython" ] }, { "cell_type": "code", "collapsed": false, "input": [ "import IPython.core.display" ], "language": "python", "metadata": {}, "outputs": [], "prompt_number": 8 }, { "cell_type": "code", "collapsed": false, "input": [ "%load_ext autoreload\n", "%autoreload 2" ], "language": "python", "metadata": {}, "outputs": [ { "output_type": "stream", "stream": "stdout", "text": [ "The autoreload extension is already loaded. To reload it, use:\n", " %reload_ext autoreload\n" ] } ], "prompt_number": 9 }, { "cell_type": "heading", "level": 3, "metadata": {}, "source": [ "#Testing basic D3 barplot" ] }, { "cell_type": "code", "collapsed": false, "input": [ "html_src = \"\"\"\n", " <h2>Simple D3 plot</h2>\n", " <div id=\"chart\"></div>\n", " \"\"\"\n", "\n", "test_d3_js = \"\"\"\n", " var width = 600;\n", " var height = 100;\n", " var root = d3.select('#chart').append('svg')\n", " .attr({\n", " 'width': width,\n", " 'height': height,\n", " })\n", " .style('border', '1px solid black');\n", " \n", " var evenNumbers = [0, 2, 4, 6, 8, 10];\n", " var maxDataValue = d3.max(evenNumbers);\n", " var barHeight = height / evenNumbers.length;\n", " var barWidth = function(datum) {\n", " return datum * (width / maxDataValue);\n", " };\n", " var barX = 0;\n", " var barY = function(datum, index) {\n", " return index * barHeight;\n", " };\n", " root.selectAll('rect.number')\n", " .data(evenNumbers).enter()\n", " .append('rect')\n", " .attr({\n", " 'class': 'number',\n", " 'x': barX,\n", " 'y': barY,\n", " 'width': barWidth,\n", " 'height': barHeight,\n", " 'fill': '#A6D854',\n", " 'stroke': '#444',\n", " }); \n", " \"\"\"\n", "\n", "js_libs = ['http://rawgithub.com/mbostock/d3/master/d3.min.js']\n" ], "language": "python", "metadata": {}, "outputs": [], "prompt_number": 10 }, { "cell_type": "code", "collapsed": false, "input": [ "IPython.core.display.display_html(IPython.core.display.HTML(data=html_src))\n", "IPython.core.display.display_javascript( IPython.core.display.Javascript(data=test_d3_js,\n", " lib= js_libs))" ], "language": "python", "metadata": {}, "outputs": [ { "html": [ "\n", " <h2>Simple D3 plot</h2>\n", " <div id=\"chart\"></div>\n", " " ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$.getScript(\"http://rawgithub.com/mbostock/d3/master/d3.min.js\", function () {\n", "\n", " var width = 600;\n", " var height = 100;\n", " var root = d3.select('#chart').append('svg')\n", " .attr({\n", " 'width': width,\n", " 'height': height,\n", " })\n", " .style('border', '1px solid black');\n", " \n", " var evenNumbers = [0, 2, 4, 6, 8, 10];\n", " var maxDataValue = d3.max(evenNumbers);\n", " var barHeight = height / evenNumbers.length;\n", " var barWidth = function(datum) {\n", " return datum * (width / maxDataValue);\n", " };\n", " var barX = 0;\n", " var barY = function(datum, index) {\n", " return index * barHeight;\n", " };\n", " root.selectAll('rect.number')\n", " .data(evenNumbers).enter()\n", " .append('rect')\n", " .attr({\n", " 'class': 'number',\n", " 'x': barX,\n", " 'y': barY,\n", " 'width': barWidth,\n", " 'height': barHeight,\n", " 'fill': '#A6D854',\n", " 'stroke': '#444',\n", " }); \n", " });\n" ], "metadata": {}, "output_type": "display_data" } ], "prompt_number": 11 }, { "cell_type": "code", "collapsed": false, "input": [], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "heading", "level": 4, "metadata": {}, "source": [ "Testing NVD3 Plotting" ] }, { "cell_type": "code", "collapsed": false, "input": [ "test_nvd3_js = '''\n", " <script>\n", " $(function(){nv.addGraph(function() {\n", " var chart = nv.models.discreteBarChart();\n", " chart.xAxis\n", " chart.tooltipContent(function(key, y, e, graph) {\n", " var x = String(graph.point.x);\n", " var y = String(graph.point.y);\n", " if(key == 'Serie 1'){\n", " var y = String(graph.point.y) + ' cal';\n", " }\n", " tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;\n", " return tooltip_str;\n", " });\n", " d3.select('#mygraphname svg')\n", " .datum(data_mygraphname)\n", " .transition().duration(500)\n", " .attr('height', 400)\n", " .call(chart);\n", " return chart;\n", " });\n", " });\n", " data_mygraphname=[{\"values\": [{\"y\": 3, \"x\": \"A\"}, {\"y\": 12, \"x\": \"B\"}, {\"y\": -10, \"x\": \"C\"}, {\"y\": 5, \"x\": \"D\"}, {\"y\": 25, \"x\": \"E\"}, {\"y\": -7, \"x\": \"F\"}, {\"y\": 2, \"x\": \"G\"}], \"key\": \"Serie 1\", \"yAxis\": \"1\"}];\n", " </script>\n", " '''\n", "\n", "html_src_nvd3 = \"\"\"\n", " <h2>Discrete Bar Chart </h2>\n", " <div id=\"mygraphname\"><svg style=\"height:400px;\"></svg></div>\n", " \"\"\"\n", "\n", "\n", "\n", "js_libs = ['http://rawgithub.com/mbostock/d3/master/d3.min.js',\n", " 'http://rawgithub.com/novus/nvd3/master/nv.d3.min.js' ]\n", "css_style_sheets = ['http://rawgithub.com/novus/nvd3/master/nv.d3.css']\n" ], "language": "python", "metadata": {}, "outputs": [], "prompt_number": 93 }, { "cell_type": "code", "collapsed": false, "input": [ "IPython.core.display.display_html(IPython.core.display.HTML(data=html_src_nvd3))\n", "IPython.core.display.display_javascript( IPython.core.display.Javascript(data=test_d3_js,\n", " lib= js_libs,\n", " css = css_style_sheets)) " ], "language": "python", "metadata": {}, "outputs": [ { "html": [ "\n", " <h2>Discrete Bar Chart </h2>\n", " <div id=\"mygraphname\"><svg style=\"height:400px;\"></svg></div>\n", " " ], "metadata": {}, "output_type": "display_data" }, { "javascript": [ "$(\"head\").append($(\"<link/>\").attr({\n", " rel: \"stylesheet\",\n", " type: \"text/css\",\n", " href: \"http://rawgithub.com/novus/nvd3/master/nv.d3.css\"\n", "}));\n", "$.getScript(\"http://rawgithub.com/mbostock/d3/master/d3.min.js\", function () {\n", "$.getScript(\"http://rawgithub.com/novus/nvd3/master/nv.d3.min.js\", function () {\n", "\n", " var width = 600;\n", " var height = 100;\n", " var root = d3.select('#chart').append('svg')\n", " .attr({\n", " 'width': width,\n", " 'height': height,\n", " })\n", " .style('border', '1px solid black');\n", " \n", " var evenNumbers = [0, 2, 4, 6, 8, 10];\n", " var maxDataValue = d3.max(evenNumbers);\n", " var barHeight = height / evenNumbers.length;\n", " var barWidth = function(datum) {\n", " return datum * (width / maxDataValue);\n", " };\n", " var barX = 0;\n", " var barY = function(datum, index) {\n", " return index * barHeight;\n", " };\n", " root.selectAll('rect.number')\n", " .data(evenNumbers).enter()\n", " .append('rect')\n", " .attr({\n", " 'class': 'number',\n", " 'x': barX,\n", " 'y': barY,\n", " 'width': barWidth,\n", " 'height': barHeight,\n", " 'fill': '#A6D854',\n", " 'stroke': '#444',\n", " }); \n", " });\n", "});\n" ], "metadata": {}, "output_type": "display_data" } ], "prompt_number": 94 }, { "cell_type": "code", "collapsed": false, "input": [ "\n" ], "language": "python", "metadata": {}, "outputs": [], "prompt_number": 79 }, { "cell_type": "code", "collapsed": false, "input": [], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "heading", "level": 3, "metadata": {}, "source": [ "#Spitting out HTML for explicit testing if the code works" ] }, { "cell_type": "code", "collapsed": false, "input": [ "html_text = '''\n", "<!DOCTYPE html>\n", "<html lang=\"en\">\n", "<head>\n", "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\n", "<link media=\"all\" href=\"http://rawgithub.com/novus/nvd3/master/nv.d3.css\" type=\"text/css\" rel=\"stylesheet\" />\n", "<script src=\"http://rawgithub.com/mbostock/d3/master/d3.min.js\" type=\"text/javascript\"></script>\n", "<script src=\"http://rawgithub.com/novus/nvd3/master/nv.d3.min.js\" type=\"text/javascript\"></script>\n", "</head>\n", "\n", "\n", "\n", "<h2>discreteBarChart</h2>\n", "\n", "<div id=\"mygraphname\"><svg style=\"height:400px;\"></svg></div>\n", "\n", "\n", "<script>\n", " $(function(){nv.addGraph(function() {\n", " var chart = nv.models.discreteBarChart();\n", " chart.xAxis\n", " chart.tooltipContent(function(key, y, e, graph) {\n", " var x = String(graph.point.x);\n", " var y = String(graph.point.y);\n", " if(key == 'Serie 1'){\n", " var y = String(graph.point.y) + ' cal';\n", " }\n", " tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;\n", " return tooltip_str;\n", " });\n", " d3.select('#mygraphname svg')\n", " .datum(data_mygraphname)\n", " .transition().duration(500)\n", " .attr('height', 400)\n", " .call(chart);\n", "\n", " return chart;\n", "});\n", "});data_mygraphname=[{\"values\": [{\"y\": 3, \"x\": \"A\"}, {\"y\": 12, \"x\": \"B\"}, {\"y\": -10, \"x\": \"C\"}, {\"y\": 5, \"x\": \"D\"}, {\"y\": 25, \"x\": \"E\"}, {\"y\": -7, \"x\": \"F\"}, {\"y\": 2, \"x\": \"G\"}], \"key\": \"Serie 1\", \"yAxis\": \"1\"}];\n", "</script>\n", "</body></html>\n", "'''\n", "\n", "fh = open('test.html','w')\n", "fh.write(html_text)\n", "fh.close()" ], "language": "python", "metadata": {}, "outputs": [], "prompt_number": 142 }, { "cell_type": "code", "collapsed": false, "input": [], "language": "python", "metadata": {}, "outputs": [] } ], "metadata": {} } ] }