multiple_simple_examples.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Multiple Simple D3 Examples using d3_lib.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This notebook demonstrates the use of single-line calls to D3 visualizations via the simple d3_lib.py file and referenced css and js files."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Configuration for D3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import HTML\n",
    "import d3_lib"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       ".axis path,\n",
       ".axis line {\n",
       "    fill: none;\n",
       "    stroke: grey;\n",
       "    stroke-width: 1;\n",
       "    shape-rendering: crispEdges;\n",
       "}\n",
       "\n",
       "\n",
       "/* Based on http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5 */\n",
       "\n",
       "path { \n",
       "    stroke: steelblue;\n",
       "    stroke-width: 2;\n",
       "    fill: none;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "/* Based on http://bl.ocks.org/mbostock/3887118 */\n",
       "\n",
       ".dot {\n",
       "  stroke: #000;\n",
       "}\n",
       "\n",
       "/* http://bl.ocks.org/mbostock/4062045 */\n",
       "\n",
       ".node {\n",
       "  stroke: #fff;\n",
       "  stroke-width: 1.5px;\n",
       "}\n",
       "\n",
       ".link {\n",
       "  stroke: #999;\n",
       "  stroke-opacity: .6;\n",
       "}\n",
       "\n",
       "      rect.bordered {\n",
       "        stroke: #E6E6E6;\n",
       "        stroke-width:2px;   \n",
       "      }\n",
       "\n",
       "      text.mono {\n",
       "        font-size: 9pt;\n",
       "        font-family: Consolas, courier;\n",
       "        fill: #aaa;\n",
       "      }\n",
       "\n",
       "      text.axis-workweek {\n",
       "        fill: #000;\n",
       "      }\n",
       "\n",
       "      text.axis-worktime {\n",
       "        fill: #000;\n",
       "      }</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(d3_lib.set_styles(['basic_axis','basic_line','basic_scatter','force_directed_graph','day-hr-heatmap']))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"lib/d3/d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('<script src=\"lib/d3/d3.min.js\"></script>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Line plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import random\n",
    "random.seed(42)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "data = []\n",
    "for i in range(20):\n",
    "    data.append({'x': i, 'y': random.uniform(0,1), 'c': int(random.uniform(0,3))})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Based on http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5 :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    \n",
       "                <div id='maindiv7045718361'></div>\n",
       "                \n",
       "                <script>\n",
       "                    \n",
       "// Based on http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5 :\n",
       "\n",
       "// Set the dimensions of the canvas / graph\n",
       "var margin = {top: 30, right: 20, bottom: 30, left: 50},\n",
       "    width = 600 - margin.left - margin.right,\n",
       "    height = 270 - margin.top - margin.bottom;\n",
       "\n",
       "// Set the ranges\n",
       "var x = d3.scale.linear().range([0, width]);\n",
       "var y = d3.scale.linear().range([height, 0]);\n",
       "\n",
       "// Define the axes\n",
       "var xAxis = d3.svg.axis().scale(x)\n",
       "    .orient(\"bottom\").ticks(5);\n",
       "\n",
       "var yAxis = d3.svg.axis().scale(y)\n",
       "    .orient(\"left\").ticks(5);\n",
       "\n",
       "// Define the line\n",
       "var valueline = d3.svg.line()\n",
       "    .x(function(d) { return x(d.x); })\n",
       "    .y(function(d) { return y(d.y); });\n",
       "    \n",
       "// Adds the svg canvas\n",
       "d3.select(\"#maindiv7045718361\").selectAll(\"svg\").remove();\n",
       "var svg = d3.select(\"#maindiv7045718361\")\n",
       "    .append(\"svg\")\n",
       "        .attr(\"width\", width + margin.left + margin.right)\n",
       "        .attr(\"height\", height + margin.top + margin.bottom)\n",
       "    .append(\"g\")\n",
       "        .attr(\"transform\", \n",
       "              \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
       "\n",
       "// Get the data\n",
       "//d3.csv(\"data.csv\", function(error, data) {\n",
       "var data = [{'y': 0.6394267984578837, 'x': 0, 'c': 0}, {'y': 0.27502931836911926, 'x': 1, 'c': 0}, {'y': 0.7364712141640124, 'x': 2, 'c': 2}, {'y': 0.8921795677048454, 'x': 3, 'c': 0}, {'y': 0.4219218196852704, 'x': 4, 'c': 0}, {'y': 0.21863797480360336, 'x': 5, 'c': 1}, {'y': 0.026535969683863625, 'x': 6, 'c': 0}, {'y': 0.6498844377795232, 'x': 7, 'c': 1}, {'y': 0.2204406220406967, 'x': 8, 'c': 1}, {'y': 0.8094304566778266, 'x': 9, 'c': 0}, {'y': 0.8058192518328079, 'x': 10, 'c': 2}, {'y': 0.3402505165179919, 'x': 11, 'c': 0}, {'y': 0.9572130722067812, 'x': 12, 'c': 1}, {'y': 0.09274584338014791, 'x': 13, 'c': 0}, {'y': 0.8474943663474598, 'x': 14, 'c': 1}, {'y': 0.8071282732743802, 'x': 15, 'c': 2}, {'y': 0.5362280914547007, 'x': 16, 'c': 2}, {'y': 0.3785343772083535, 'x': 17, 'c': 1}, {'y': 0.8294046642529949, 'x': 18, 'c': 1}, {'y': 0.8617069003107772, 'x': 19, 'c': 1}];\n",
       "\n",
       "    data.forEach(function(d) {\n",
       "        d.x = +d.x;\n",
       "        d.y = +d.y;\n",
       "    });\n",
       "\n",
       "    // Scale the range of the data\n",
       "    x.domain(d3.extent(data, function(d) { return d.x; }));\n",
       "    y.domain([0, d3.max(data, function(d) { return d.y; })]);\n",
       "\n",
       "    // Add the valueline path\n",
       "    svg.append(\"path\")\n",
       "        .attr(\"class\", \"line\")\n",
       "        .attr(\"d\", valueline(data));\n",
       "\n",
       "    // Add the X Axis\n",
       "    svg.append(\"g\")\n",
       "        .attr(\"class\", \"x axis\")\n",
       "        .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
       "        .call(xAxis);\n",
       "\n",
       "    // Add the Y Axis\n",
       "    svg.append(\"g\")\n",
       "        .attr(\"class\", \"y axis\")\n",
       "        .call(yAxis);\n",
       "\n",
       "//});\n",
       "\n",
       "                </script>\n",
       "\n",
       "                "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(d3_lib.draw_graph('basic_line',{'data': data}))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Scatterplot with same data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Based on http://bl.ocks.org/mbostock/3887118 :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    \n",
       "                <div id='maindiv458243836'></div>\n",
       "                \n",
       "                <script>\n",
       "                    \n",
       "// Based on http://bl.ocks.org/mbostock/3887118\n",
       "\n",
       "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
       "    width = 600 - margin.left - margin.right,\n",
       "    height = 270 - margin.top - margin.bottom;\n",
       "\n",
       "var x = d3.scale.linear()\n",
       "    .range([0, width]);\n",
       "\n",
       "var y = d3.scale.linear()\n",
       "    .range([height, 0]);\n",
       "\n",
       "var color = d3.scale.category10();\n",
       "\n",
       "var xAxis = d3.svg.axis()\n",
       "    .scale(x)\n",
       "    .orient(\"bottom\");\n",
       "\n",
       "var yAxis = d3.svg.axis()\n",
       "    .scale(y)\n",
       "    .orient(\"left\");\n",
       "\n",
       "d3.select(\"#maindiv458243836\").selectAll(\"svg\").remove();\n",
       "var svg = d3.select(\"#maindiv458243836\").append(\"svg\")\n",
       "    .attr(\"width\", width + margin.left + margin.right)\n",
       "    .attr(\"height\", height + margin.top + margin.bottom)\n",
       "  .append(\"g\")\n",
       "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
       "\n",
       "//d3.tsv(\"data.tsv\", function(error, data) {\n",
       "//  if (error) throw error;\n",
       "var data = [{'y': 0.6394267984578837, 'x': 0, 'c': 0}, {'y': 0.27502931836911926, 'x': 1, 'c': 0}, {'y': 0.7364712141640124, 'x': 2, 'c': 2}, {'y': 0.8921795677048454, 'x': 3, 'c': 0}, {'y': 0.4219218196852704, 'x': 4, 'c': 0}, {'y': 0.21863797480360336, 'x': 5, 'c': 1}, {'y': 0.026535969683863625, 'x': 6, 'c': 0}, {'y': 0.6498844377795232, 'x': 7, 'c': 1}, {'y': 0.2204406220406967, 'x': 8, 'c': 1}, {'y': 0.8094304566778266, 'x': 9, 'c': 0}, {'y': 0.8058192518328079, 'x': 10, 'c': 2}, {'y': 0.3402505165179919, 'x': 11, 'c': 0}, {'y': 0.9572130722067812, 'x': 12, 'c': 1}, {'y': 0.09274584338014791, 'x': 13, 'c': 0}, {'y': 0.8474943663474598, 'x': 14, 'c': 1}, {'y': 0.8071282732743802, 'x': 15, 'c': 2}, {'y': 0.5362280914547007, 'x': 16, 'c': 2}, {'y': 0.3785343772083535, 'x': 17, 'c': 1}, {'y': 0.8294046642529949, 'x': 18, 'c': 1}, {'y': 0.8617069003107772, 'x': 19, 'c': 1}];\n",
       "\n",
       "  data.forEach(function(d) {\n",
       "    d.x = +d.x;\n",
       "    d.y = +d.y;\n",
       "  });\n",
       "\n",
       "  x.domain(d3.extent(data, function(d) { return d.x; })).nice();\n",
       "  y.domain(d3.extent(data, function(d) { return d.y; })).nice();\n",
       "\n",
       "  svg.append(\"g\")\n",
       "      .attr(\"class\", \"x axis\")\n",
       "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
       "      .call(xAxis);\n",
       "\n",
       "  svg.append(\"g\")\n",
       "      .attr(\"class\", \"y axis\")\n",
       "      .call(yAxis);\n",
       "\n",
       "  svg.selectAll(\".dot\")\n",
       "      .data(data)\n",
       "    .enter().append(\"circle\")\n",
       "      .attr(\"class\", \"dot\")\n",
       "      .attr(\"r\", 3.5)\n",
       "      .attr(\"cx\", function(d) { return x(d.x); })\n",
       "      .attr(\"cy\", function(d) { return y(d.y); })\n",
       "      .style(\"fill\", function(d) { return color(d.c); });\n",
       "\n",
       "  var legend = svg.selectAll(\".legend\")\n",
       "      .data(color.domain())\n",
       "    .enter().append(\"g\")\n",
       "      .attr(\"class\", \"legend\")\n",
       "      .attr(\"transform\", function(d, i) { return \"translate(0,\" + i * 20 + \")\"; });\n",
       "\n",
       "  legend.append(\"rect\")\n",
       "      .attr(\"x\", width - 18)\n",
       "      .attr(\"width\", 18)\n",
       "      .attr(\"height\", 18)\n",
       "      .style(\"fill\", color);\n",
       "\n",
       "  legend.append(\"text\")\n",
       "      .attr(\"x\", width - 24)\n",
       "      .attr(\"y\", 9)\n",
       "      .attr(\"dy\", \".35em\")\n",
       "      .style(\"text-anchor\", \"end\")\n",
       "      .text(function(d) { return d; });\n",
       "\n",
       "//});\n",
       "\n",
       "\n",
       "                </script>\n",
       "\n",
       "                "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(d3_lib.draw_graph('basic_scatter',{'data': data}))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Graph visualization"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Based on http://bl.ocks.org/mbostock/4062045"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "n_nodes = 30\n",
    "p_edge = 0.05\n",
    "graph = {\"nodes\": [], \"links\": []}\n",
    "for i in range(n_nodes):\n",
    "    graph[\"nodes\"].append( {\"name\": \"i\" + str(i), \"group\": int(random.uniform(1,11))} )\n",
    "for i in range(n_nodes):\n",
    "    for j in range(n_nodes):\n",
    "        if random.uniform(0,1) < p_edge:\n",
    "            graph[\"links\"].append( {\"source\": i, \"target\": j, \"value\": random.uniform(0.5,3)} )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    \n",
       "                <div id='maindiv1221597190'></div>\n",
       "                \n",
       "                <script>\n",
       "                    \n",
       "// Based on http://bl.ocks.org/mbostock/4062045\n",
       "\n",
       "var width = 960,\n",
       "    height = 500;\n",
       "\n",
       "var color = d3.scale.category20();\n",
       "\n",
       "var force = d3.layout.force()\n",
       "    .charge(-300)\n",
       "    .linkDistance(50)\n",
       "    .size([width, height]);\n",
       "\n",
       "d3.select(\"#maindiv1221597190\").selectAll(\"svg\").remove();\n",
       "var svg = d3.select(\"#maindiv1221597190\").append(\"svg\")\n",
       "    .attr(\"width\", width)\n",
       "    .attr(\"height\", height);\n",
       "\n",
       "//d3.json(\"miserables.json\", function(error, graph) {\n",
       "//  if (error) throw error;\n",
       "var graph = {'nodes': [{'group': 3, 'name': 'i0'}, {'group': 3, 'name': 'i1'}, {'group': 1, 'name': 'i2'}, {'group': 3, 'name': 'i3'}, {'group': 2, 'name': 'i4'}, {'group': 3, 'name': 'i5'}, {'group': 7, 'name': 'i6'}, {'group': 4, 'name': 'i7'}, {'group': 4, 'name': 'i8'}, {'group': 3, 'name': 'i9'}, {'group': 3, 'name': 'i10'}, {'group': 10, 'name': 'i11'}, {'group': 7, 'name': 'i12'}, {'group': 7, 'name': 'i13'}, {'group': 2, 'name': 'i14'}, {'group': 8, 'name': 'i15'}, {'group': 2, 'name': 'i16'}, {'group': 4, 'name': 'i17'}, {'group': 10, 'name': 'i18'}, {'group': 7, 'name': 'i19'}, {'group': 6, 'name': 'i20'}, {'group': 7, 'name': 'i21'}, {'group': 9, 'name': 'i22'}, {'group': 8, 'name': 'i23'}, {'group': 3, 'name': 'i24'}, {'group': 1, 'name': 'i25'}, {'group': 4, 'name': 'i26'}, {'group': 3, 'name': 'i27'}, {'group': 3, 'name': 'i28'}, {'group': 10, 'name': 'i29'}], 'links': [{'source': 0, 'target': 17, 'value': 0.7741228258766479}, {'source': 0, 'target': 27, 'value': 2.3018045484004865}, {'source': 1, 'target': 20, 'value': 1.3103901425116828}, {'source': 1, 'target': 21, 'value': 2.8227465406615426}, {'source': 6, 'target': 13, 'value': 2.5427603377886543}, {'source': 7, 'target': 3, 'value': 2.427798057549068}, {'source': 7, 'target': 9, 'value': 0.6881096501844176}, {'source': 8, 'target': 5, 'value': 2.3414111793877055}, {'source': 8, 'target': 22, 'value': 0.9828244708192717}, {'source': 9, 'target': 17, 'value': 2.813937913747707}, {'source': 10, 'target': 12, 'value': 1.217284292172318}, {'source': 11, 'target': 2, 'value': 1.1121063601958754}, {'source': 11, 'target': 13, 'value': 2.377411191546182}, {'source': 13, 'target': 6, 'value': 1.3793970066795618}, {'source': 13, 'target': 17, 'value': 1.340323859245956}, {'source': 13, 'target': 24, 'value': 1.4850506408492619}, {'source': 13, 'target': 26, 'value': 2.106874120023339}, {'source': 14, 'target': 9, 'value': 1.8485476198063342}, {'source': 14, 'target': 18, 'value': 0.8809558644619759}, {'source': 15, 'target': 2, 'value': 1.279893110986738}, {'source': 16, 'target': 17, 'value': 2.627382090781148}, {'source': 16, 'target': 25, 'value': 2.870156444442578}, {'source': 18, 'target': 3, 'value': 1.8353377231691583}, {'source': 19, 'target': 19, 'value': 1.626259261544256}, {'source': 20, 'target': 20, 'value': 1.5800716604019314}, {'source': 21, 'target': 1, 'value': 2.3906720760313926}, {'source': 23, 'target': 29, 'value': 2.3617628789129896}, {'source': 24, 'target': 7, 'value': 1.7557278753324148}, {'source': 25, 'target': 1, 'value': 0.6710518679538786}, {'source': 25, 'target': 13, 'value': 2.490358662905529}, {'source': 26, 'target': 0, 'value': 2.511582692437866}, {'source': 26, 'target': 25, 'value': 2.0160162326911863}, {'source': 28, 'target': 12, 'value': 1.8414307706726478}, {'source': 28, 'target': 21, 'value': 2.7105871130371306}, {'source': 29, 'target': 19, 'value': 1.4263248968360884}]} ;\n",
       "\n",
       "  force\n",
       "      .nodes(graph.nodes)\n",
       "      .links(graph.links)\n",
       "      .start();\n",
       "\n",
       "  var link = svg.selectAll(\".link\")\n",
       "      .data(graph.links)\n",
       "    .enter().append(\"line\")\n",
       "      .attr(\"class\", \"link\")\n",
       "      .style(\"stroke-width\", function(d) { return Math.sqrt(d.value); });\n",
       "\n",
       "  var node = svg.selectAll(\".node\")\n",
       "      .data(graph.nodes)\n",
       "    .enter().append(\"circle\")\n",
       "      .attr(\"class\", \"node\")\n",
       "      .attr(\"r\", 8)\n",
       "      .style(\"fill\", function(d) { return color(d.group); })\n",
       "      .call(force.drag);\n",
       "\n",
       "  node.append(\"title\")\n",
       "      .text(function(d) { return d.name; });\n",
       "\n",
       "  force.on(\"tick\", function() {\n",
       "    link.attr(\"x1\", function(d) { return d.source.x; })\n",
       "        .attr(\"y1\", function(d) { return d.source.y; })\n",
       "        .attr(\"x2\", function(d) { return d.target.x; })\n",
       "        .attr(\"y2\", function(d) { return d.target.y; });\n",
       "\n",
       "    node.attr(\"cx\", function(d) { return d.x; })\n",
       "        .attr(\"cy\", function(d) { return d.y; });\n",
       "  });\n",
       "  \n",
       "//});\n",
       "\n",
       "\n",
       "                </script>\n",
       "\n",
       "                "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(d3_lib.draw_graph('force_directed_graph',{'data': graph}))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Day-Hour heatmap"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Based on http://bl.ocks.org/tjdecke/5558084"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "data = []\n",
    "for d in range(1,8):\n",
    "    for h in range(1,25):\n",
    "        data.append({'day': d, 'hour': h, 'value': int(random.gauss(0,100))})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    \n",
       "                <div id='maindiv1756948018'></div>\n",
       "                \n",
       "                <script>\n",
       "                    \n",
       "      var margin = { top: 50, right: 0, bottom: 100, left: 30 },\n",
       "          width = 960 - margin.left - margin.right,\n",
       "          height = 430 - margin.top - margin.bottom,\n",
       "          gridSize = Math.floor(width / 24),\n",
       "          legendElementWidth = gridSize*2,\n",
       "          buckets = 9,\n",
       "          colors = [\"#ffffd9\",\"#edf8b1\",\"#c7e9b4\",\"#7fcdbb\",\"#41b6c4\",\"#1d91c0\",\"#225ea8\",\"#253494\",\"#081d58\"], // alternatively colorbrewer.YlGnBu[9]\n",
       "          days = [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"],\n",
       "          times = [\"1a\", \"2a\", \"3a\", \"4a\", \"5a\", \"6a\", \"7a\", \"8a\", \"9a\", \"10a\", \"11a\", \"12a\", \"1p\", \"2p\", \"3p\", \"4p\", \"5p\", \"6p\", \"7p\", \"8p\", \"9p\", \"10p\", \"11p\", \"12p\"];\n",
       "\n",
       "\n",
       "/*\n",
       "      d3.tsv(\"data.tsv\",\n",
       "        function(d) {\n",
       "          return {\n",
       "            day: +d.day,\n",
       "            hour: +d.hour,\n",
       "            value: +d.value\n",
       "          };\n",
       "        },\n",
       "        function(error, data) {\n",
       "*/\n",
       "\n",
       "var data = [{'value': 63, 'day': 1, 'hour': 1}, {'value': -89, 'day': 1, 'hour': 2}, {'value': -74, 'day': 1, 'hour': 3}, {'value': -122, 'day': 1, 'hour': 4}, {'value': -17, 'day': 1, 'hour': 5}, {'value': -11, 'day': 1, 'hour': 6}, {'value': 17, 'day': 1, 'hour': 7}, {'value': -72, 'day': 1, 'hour': 8}, {'value': 90, 'day': 1, 'hour': 9}, {'value': 91, 'day': 1, 'hour': 10}, {'value': 154, 'day': 1, 'hour': 11}, {'value': 71, 'day': 1, 'hour': 12}, {'value': 18, 'day': 1, 'hour': 13}, {'value': 67, 'day': 1, 'hour': 14}, {'value': 60, 'day': 1, 'hour': 15}, {'value': -65, 'day': 1, 'hour': 16}, {'value': 128, 'day': 1, 'hour': 17}, {'value': 171, 'day': 1, 'hour': 18}, {'value': 197, 'day': 1, 'hour': 19}, {'value': 3, 'day': 1, 'hour': 20}, {'value': 32, 'day': 1, 'hour': 21}, {'value': 41, 'day': 1, 'hour': 22}, {'value': 0, 'day': 1, 'hour': 23}, {'value': 61, 'day': 1, 'hour': 24}, {'value': -12, 'day': 2, 'hour': 1}, {'value': -19, 'day': 2, 'hour': 2}, {'value': 175, 'day': 2, 'hour': 3}, {'value': 16, 'day': 2, 'hour': 4}, {'value': 6, 'day': 2, 'hour': 5}, {'value': 88, 'day': 2, 'hour': 6}, {'value': 15, 'day': 2, 'hour': 7}, {'value': 29, 'day': 2, 'hour': 8}, {'value': -6, 'day': 2, 'hour': 9}, {'value': -122, 'day': 2, 'hour': 10}, {'value': -3, 'day': 2, 'hour': 11}, {'value': -113, 'day': 2, 'hour': 12}, {'value': 21, 'day': 2, 'hour': 13}, {'value': -118, 'day': 2, 'hour': 14}, {'value': 91, 'day': 2, 'hour': 15}, {'value': 74, 'day': 2, 'hour': 16}, {'value': 28, 'day': 2, 'hour': 17}, {'value': -10, 'day': 2, 'hour': 18}, {'value': 41, 'day': 2, 'hour': 19}, {'value': -196, 'day': 2, 'hour': 20}, {'value': -109, 'day': 2, 'hour': 21}, {'value': -14, 'day': 2, 'hour': 22}, {'value': 34, 'day': 2, 'hour': 23}, {'value': -7, 'day': 2, 'hour': 24}, {'value': -100, 'day': 3, 'hour': 1}, {'value': 13, 'day': 3, 'hour': 2}, {'value': -45, 'day': 3, 'hour': 3}, {'value': -106, 'day': 3, 'hour': 4}, {'value': 32, 'day': 3, 'hour': 5}, {'value': -20, 'day': 3, 'hour': 6}, {'value': 119, 'day': 3, 'hour': 7}, {'value': 66, 'day': 3, 'hour': 8}, {'value': 73, 'day': 3, 'hour': 9}, {'value': 32, 'day': 3, 'hour': 10}, {'value': -84, 'day': 3, 'hour': 11}, {'value': -93, 'day': 3, 'hour': 12}, {'value': -147, 'day': 3, 'hour': 13}, {'value': 287, 'day': 3, 'hour': 14}, {'value': -107, 'day': 3, 'hour': 15}, {'value': -20, 'day': 3, 'hour': 16}, {'value': -36, 'day': 3, 'hour': 17}, {'value': -28, 'day': 3, 'hour': 18}, {'value': -58, 'day': 3, 'hour': 19}, {'value': -186, 'day': 3, 'hour': 20}, {'value': -99, 'day': 3, 'hour': 21}, {'value': -139, 'day': 3, 'hour': 22}, {'value': -12, 'day': 3, 'hour': 23}, {'value': -68, 'day': 3, 'hour': 24}, {'value': -68, 'day': 4, 'hour': 1}, {'value': 21, 'day': 4, 'hour': 2}, {'value': -58, 'day': 4, 'hour': 3}, {'value': 93, 'day': 4, 'hour': 4}, {'value': -38, 'day': 4, 'hour': 5}, {'value': 22, 'day': 4, 'hour': 6}, {'value': -132, 'day': 4, 'hour': 7}, {'value': 65, 'day': 4, 'hour': 8}, {'value': -40, 'day': 4, 'hour': 9}, {'value': 40, 'day': 4, 'hour': 10}, {'value': 33, 'day': 4, 'hour': 11}, {'value': -17, 'day': 4, 'hour': 12}, {'value': 21, 'day': 4, 'hour': 13}, {'value': -38, 'day': 4, 'hour': 14}, {'value': 134, 'day': 4, 'hour': 15}, {'value': 93, 'day': 4, 'hour': 16}, {'value': 48, 'day': 4, 'hour': 17}, {'value': -118, 'day': 4, 'hour': 18}, {'value': -109, 'day': 4, 'hour': 19}, {'value': -66, 'day': 4, 'hour': 20}, {'value': -24, 'day': 4, 'hour': 21}, {'value': 44, 'day': 4, 'hour': 22}, {'value': -89, 'day': 4, 'hour': 23}, {'value': 117, 'day': 4, 'hour': 24}, {'value': 0, 'day': 5, 'hour': 1}, {'value': -201, 'day': 5, 'hour': 2}, {'value': -47, 'day': 5, 'hour': 3}, {'value': -258, 'day': 5, 'hour': 4}, {'value': -75, 'day': 5, 'hour': 5}, {'value': -54, 'day': 5, 'hour': 6}, {'value': -61, 'day': 5, 'hour': 7}, {'value': -32, 'day': 5, 'hour': 8}, {'value': -39, 'day': 5, 'hour': 9}, {'value': -59, 'day': 5, 'hour': 10}, {'value': 150, 'day': 5, 'hour': 11}, {'value': 121, 'day': 5, 'hour': 12}, {'value': -114, 'day': 5, 'hour': 13}, {'value': 125, 'day': 5, 'hour': 14}, {'value': -162, 'day': 5, 'hour': 15}, {'value': -81, 'day': 5, 'hour': 16}, {'value': 152, 'day': 5, 'hour': 17}, {'value': -223, 'day': 5, 'hour': 18}, {'value': 57, 'day': 5, 'hour': 19}, {'value': -125, 'day': 5, 'hour': 20}, {'value': -14, 'day': 5, 'hour': 21}, {'value': -18, 'day': 5, 'hour': 22}, {'value': 169, 'day': 5, 'hour': 23}, {'value': -81, 'day': 5, 'hour': 24}, {'value': -6, 'day': 6, 'hour': 1}, {'value': 62, 'day': 6, 'hour': 2}, {'value': -25, 'day': 6, 'hour': 3}, {'value': -82, 'day': 6, 'hour': 4}, {'value': -5, 'day': 6, 'hour': 5}, {'value': 9, 'day': 6, 'hour': 6}, {'value': 88, 'day': 6, 'hour': 7}, {'value': -94, 'day': 6, 'hour': 8}, {'value': -44, 'day': 6, 'hour': 9}, {'value': 32, 'day': 6, 'hour': 10}, {'value': -16, 'day': 6, 'hour': 11}, {'value': -18, 'day': 6, 'hour': 12}, {'value': -1, 'day': 6, 'hour': 13}, {'value': -69, 'day': 6, 'hour': 14}, {'value': -79, 'day': 6, 'hour': 15}, {'value': 44, 'day': 6, 'hour': 16}, {'value': -109, 'day': 6, 'hour': 17}, {'value': 116, 'day': 6, 'hour': 18}, {'value': 21, 'day': 6, 'hour': 19}, {'value': -127, 'day': 6, 'hour': 20}, {'value': 28, 'day': 6, 'hour': 21}, {'value': 16, 'day': 6, 'hour': 22}, {'value': 76, 'day': 6, 'hour': 23}, {'value': 115, 'day': 6, 'hour': 24}, {'value': -36, 'day': 7, 'hour': 1}, {'value': -70, 'day': 7, 'hour': 2}, {'value': -60, 'day': 7, 'hour': 3}, {'value': -98, 'day': 7, 'hour': 4}, {'value': -74, 'day': 7, 'hour': 5}, {'value': 28, 'day': 7, 'hour': 6}, {'value': 1, 'day': 7, 'hour': 7}, {'value': -49, 'day': 7, 'hour': 8}, {'value': -73, 'day': 7, 'hour': 9}, {'value': 34, 'day': 7, 'hour': 10}, {'value': -50, 'day': 7, 'hour': 11}, {'value': -104, 'day': 7, 'hour': 12}, {'value': -15, 'day': 7, 'hour': 13}, {'value': -26, 'day': 7, 'hour': 14}, {'value': -107, 'day': 7, 'hour': 15}, {'value': 82, 'day': 7, 'hour': 16}, {'value': 84, 'day': 7, 'hour': 17}, {'value': 4, 'day': 7, 'hour': 18}, {'value': 13, 'day': 7, 'hour': 19}, {'value': 52, 'day': 7, 'hour': 20}, {'value': -3, 'day': 7, 'hour': 21}, {'value': 89, 'day': 7, 'hour': 22}, {'value': 165, 'day': 7, 'hour': 23}, {'value': 8, 'day': 7, 'hour': 24}];\n",
       "\n",
       "          var colorScale = d3.scale.quantile()\n",
       "              .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])\n",
       "              .range(colors);\n",
       "\n",
       "//          var svg = d3.select(\"#chart\").append(\"svg\")\n",
       "          var svg = d3.select(\"#maindiv1756948018\").append(\"svg\")\n",
       "              .attr(\"width\", width + margin.left + margin.right)\n",
       "              .attr(\"height\", height + margin.top + margin.bottom)\n",
       "              .append(\"g\")\n",
       "              .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
       "\n",
       "          var dayLabels = svg.selectAll(\".dayLabel\")\n",
       "              .data(days)\n",
       "              .enter().append(\"text\")\n",
       "                .text(function (d) { return d; })\n",
       "                .attr(\"x\", 0)\n",
       "                .attr(\"y\", function (d, i) { return i * gridSize; })\n",
       "                .style(\"text-anchor\", \"end\")\n",
       "                .attr(\"transform\", \"translate(-6,\" + gridSize / 1.5 + \")\")\n",
       "                .attr(\"class\", function (d, i) { return ((i >= 0 && i <= 4) ? \"dayLabel mono axis axis-workweek\" : \"dayLabel mono axis\"); });\n",
       "\n",
       "          var timeLabels = svg.selectAll(\".timeLabel\")\n",
       "              .data(times)\n",
       "              .enter().append(\"text\")\n",
       "                .text(function(d) { return d; })\n",
       "                .attr(\"x\", function(d, i) { return i * gridSize; })\n",
       "                .attr(\"y\", 0)\n",
       "                .style(\"text-anchor\", \"middle\")\n",
       "                .attr(\"transform\", \"translate(\" + gridSize / 2 + \", -6)\")\n",
       "                .attr(\"class\", function(d, i) { return ((i >= 7 && i <= 16) ? \"timeLabel mono axis axis-worktime\" : \"timeLabel mono axis\"); });\n",
       "\n",
       "          var heatMap = svg.selectAll(\".hour\")\n",
       "              .data(data)\n",
       "              .enter().append(\"rect\")\n",
       "              .attr(\"x\", function(d) { return (d.hour - 1) * gridSize; })\n",
       "              .attr(\"y\", function(d) { return (d.day - 1) * gridSize; })\n",
       "              .attr(\"rx\", 4)\n",
       "              .attr(\"ry\", 4)\n",
       "              .attr(\"class\", \"hour bordered\")\n",
       "              .attr(\"width\", gridSize)\n",
       "              .attr(\"height\", gridSize)\n",
       "              .style(\"fill\", colors[0]);\n",
       "\n",
       "          heatMap.transition().duration(1000)\n",
       "              .style(\"fill\", function(d) { return colorScale(d.value); });\n",
       "\n",
       "          heatMap.append(\"title\").text(function(d) { return d.value; });\n",
       "              \n",
       "          var legend = svg.selectAll(\".legend\")\n",
       "              .data([0].concat(colorScale.quantiles()), function(d) { return d; })\n",
       "              .enter().append(\"g\")\n",
       "              .attr(\"class\", \"legend\");\n",
       "\n",
       "          legend.append(\"rect\")\n",
       "            .attr(\"x\", function(d, i) { return legendElementWidth * i; })\n",
       "            .attr(\"y\", height)\n",
       "            .attr(\"width\", legendElementWidth)\n",
       "            .attr(\"height\", gridSize / 2)\n",
       "            .style(\"fill\", function(d, i) { return colors[i]; });\n",
       "\n",
       "          legend.append(\"text\")\n",
       "            .attr(\"class\", \"mono\")\n",
       "            .text(function(d) { return \" \" + Math.round(d); })\n",
       "            .attr(\"x\", function(d, i) { return legendElementWidth * i; })\n",
       "            .attr(\"y\", height + gridSize);\n",
       "\n",
       "/*\n",
       "      });\n",
       "*/\n",
       "\n",
       "\n",
       "                </script>\n",
       "\n",
       "                "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(d3_lib.draw_graph('day-hr-heatmap',{'data': data}))"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}