bar_chart_with_update.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# D3 Bar Chart with Update"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example is based on the canonical [simple bar chart](http://bl.ocks.org/mbostock/3885304) example, but with a minor twist - a data update is added to the chart in a Jupyter cell below the chart, which updates the chart with a transition."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Notebook Config"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import display, HTML\n",
    "from string import Template\n",
    "import pandas as pd\n",
    "import json, random"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"lib/d3/d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('<script src=\"lib/d3/d3.min.js\"></script>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Graph Config"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html_template = Template('''\n",
    "<style> $css_text </style>\n",
    "<div id=\"graph-div\"></div>\n",
    "<script> $js_text </script>\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "css_text = '''\n",
    "\n",
    ".bar {\n",
    "  fill: steelblue;\n",
    "}\n",
    "\n",
    ".bar:hover {\n",
    "  fill: brown;\n",
    "}\n",
    "\n",
    ".axis {\n",
    "  font: 10px sans-serif;\n",
    "}\n",
    "\n",
    ".axis path,\n",
    ".axis line {\n",
    "  fill: none;\n",
    "  stroke: #000;\n",
    "  shape-rendering: crispEdges;\n",
    "}\n",
    "\n",
    ".x.axis path {\n",
    "  display: none;\n",
    "}\n",
    "\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "js_text_template = Template('''\n",
    "\n",
    "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
    "    width = 500 - margin.left - margin.right,\n",
    "    height = 300 - margin.top - margin.bottom;\n",
    "\n",
    "var x = d3.scale.ordinal()\n",
    "    .rangeRoundBands([0, width], .1);\n",
    "\n",
    "var y = d3.scale.linear()\n",
    "    .range([height, 0]);\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",
    "var svg = d3.select(\"#graph-div\").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 data = $data ;\n",
    "\n",
    "  x.domain(data.map(function(d) { return d.letter; }));\n",
    "  y.domain([0, d3.max(data, function(d) { return d.y; })]);\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(\".bar\")\n",
    "      .data(data)\n",
    "    .enter().append(\"rect\")\n",
    "      .attr(\"class\", \"bar\")\n",
    "      .attr(\"x\", function(d) { return x(d.letter); })\n",
    "      .attr(\"width\", x.rangeBand())\n",
    "      .attr(\"y\", function(d) { return y(d.y); })\n",
    "      .attr(\"height\", function(d) { return height - y(d.y); });\n",
    "\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "js_text_template_2 = Template('''\n",
    "\n",
    "var bars = svg.selectAll(\".bar\").data($data);\n",
    "  \n",
    "bars\n",
    "  .transition()\n",
    "    .attr(\"y\", function(d) { return y(d.y); })\n",
    "    .attr(\"height\", function(d) { return height - y(d.y); });\n",
    "\n",
    "''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Initial Data, Graph and Update"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>letter</th>\n",
       "      <th>y</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>A</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>B</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>C</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>D</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "  letter  y\n",
       "0      A  1\n",
       "1      B  1\n",
       "2      C  1\n",
       "3      D  1"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data = pd.DataFrame({'letter': ['A','B','C','D'], 'y': [1,1,1,1]})\n",
    "data.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style> \n",
       "\n",
       ".bar {\n",
       "  fill: steelblue;\n",
       "}\n",
       "\n",
       ".bar:hover {\n",
       "  fill: brown;\n",
       "}\n",
       "\n",
       ".axis {\n",
       "  font: 10px sans-serif;\n",
       "}\n",
       "\n",
       ".axis path,\n",
       ".axis line {\n",
       "  fill: none;\n",
       "  stroke: #000;\n",
       "  shape-rendering: crispEdges;\n",
       "}\n",
       "\n",
       ".x.axis path {\n",
       "  display: none;\n",
       "}\n",
       "\n",
       " </style>\n",
       "<div id=\"graph-div\"></div>\n",
       "<script> \n",
       "\n",
       "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
       "    width = 500 - margin.left - margin.right,\n",
       "    height = 300 - margin.top - margin.bottom;\n",
       "\n",
       "var x = d3.scale.ordinal()\n",
       "    .rangeRoundBands([0, width], .1);\n",
       "\n",
       "var y = d3.scale.linear()\n",
       "    .range([height, 0]);\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",
       "var svg = d3.select(\"#graph-div\").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 data = [{\"y\": 1, \"letter\": \"A\"}, {\"y\": 1, \"letter\": \"B\"}, {\"y\": 1, \"letter\": \"C\"}, {\"y\": 1, \"letter\": \"D\"}] ;\n",
       "\n",
       "  x.domain(data.map(function(d) { return d.letter; }));\n",
       "  y.domain([0, d3.max(data, function(d) { return d.y; })]);\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(\".bar\")\n",
       "      .data(data)\n",
       "    .enter().append(\"rect\")\n",
       "      .attr(\"class\", \"bar\")\n",
       "      .attr(\"x\", function(d) { return x(d.letter); })\n",
       "      .attr(\"width\", x.rangeBand())\n",
       "      .attr(\"y\", function(d) { return y(d.y); })\n",
       "      .attr(\"height\", function(d) { return height - y(d.y); });\n",
       "\n",
       " </script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "js_text = js_text_template.substitute({'data': json.dumps(data.to_dict(orient='records'))})\n",
    "HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text}))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "\n",
       "var bars = svg.selectAll(\".bar\").data([{\"y\": 0.5341430360625709, \"letter\": \"A\"}, {\"y\": 0.7464757539477257, \"letter\": \"B\"}, {\"y\": 0.482310402375845, \"letter\": \"C\"}, {\"y\": 0.45908582760890004, \"letter\": \"D\"}]);\n",
       "  \n",
       "bars\n",
       "  .transition()\n",
       "    .attr(\"y\", function(d) { return y(d.y); })\n",
       "    .attr(\"height\", function(d) { return height - y(d.y); });\n",
       "\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data['y'] = [random.uniform(0,1) for d in data['y']]\n",
    "js_text = js_text_template_2.substitute({'data': json.dumps(data.to_dict(orient='records'))})\n",
    "HTML('<script>' + js_text + '</script>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Re-run this last cell (ctrl-Enter lets you run it and stay put) and watch it transition the graph above it. "
   ]
  }
 ],
 "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
}