Interactive SVG Charts With D3 - Part 2

README.md

This single page app is a tutorial demonstrating user interaction with a SVG chart using D3. It is part of a blog post written for Art & Logic, Inc.

Of particular note, if viewing this on bl.ocks.org, it will not format well in the default iframe view...it is designed to be viewed raw, in a modern browser.

demo_functions.js

/*jslint browser: true, indent: 3, white: true */

"use strict";

/* Weekly closings of the Dow-Jones industrial average, July 1971 - August 1974
 *
 * array of tuples: (timestamp (milliseconds since epoch), value (dollars))
 * From July, 1971 (W27) to August, 1974 (W31).  It is sorted on the x-axis!
 *
 * source: https://datamarket.com/data/list/?q=provider:tsdl
 */
var DOWJONES_WEEKLY = [[47951999000.0, 890.19], [48556799000.0, 901.8], [49161599000.0, 888.51], [49766399000.0, 887.78], [50371199000.0, 858.43], [50975999000.0, 850.61], [51580799000.0, 856.02], [52185599000.0, 880.91], [52790399000.0, 908.15], [53395199000.0, 912.75], [53999999000.0, 911], [54604799000.0, 908.22], [55209599000.0, 889.31], [55814399000.0, 893.98], [56419199000.0, 893.91], [57023999000.0, 874.85], [57628799000.0, 852.37], [58233599000.0, 839], [58838399000.0, 840.39], [59443199000.0, 812.94], [60047999000.0, 810.67], [60652799000.0, 816.55], [61257599000.0, 859.59], [61862399000.0, 856.75], [62467199000.0, 873.8], [63071999000.0, 881.17], [63676799000.0, 890.2], [64281599000.0, 910.37], [64886399000.0, 906.68], [65491199000.0, 907.44], [66095999000.0, 906.38], [66700799000.0, 906.68], [67305599000.0, 917.59], [67910399000.0, 917.52], [68515199000.0, 922.79], [69119999000.0, 942.43], [69724799000.0, 939.87], [70329599000.0, 942.88], [70934399000.0, 942.28], [71539199000.0, 940.7], [72143999000.0, 962.6], [72748799000.0, 967.72], [73353599000.0, 963.8], [73958399000.0, 954.17], [74563199000.0, 941.23], [75167999000.0, 941.83], [75772799000.0, 961.54], [76377599000.0, 971.25], [76982399000.0, 961.39], [77587199000.0, 934.45], [78191999000.0, 945.06], [78796799000.0, 944.69], [79401599000.0, 929.03], [80006399000.0, 938.06], [80611199000.0, 922.26], [81215999000.0, 920.45], [81820799000.0, 926.7], [82425599000.0, 951.76], [83030399000.0, 964.18], [83635199000.0, 965.83], [84239999000.0, 959.36], [84844799000.0, 970.05], [85449599000.0, 961.24], [86054399000.0, 947.23], [86659199000.0, 943.03], [87263999000.0, 953.27], [87868799000.0, 945.36], [88473599000.0, 930.46], [89078399000.0, 942.81], [89683199000.0, 946.42], [90287999000.0, 984.12], [90892799000.0, 995.26], [91497599000.0, 1005.57], [92102399000.0, 1025.21], [92707199000.0, 1023.43], [93311999000.0, 1033.19], [93916799000.0, 1027.24], [94521599000.0, 1004.21], [95126399000.0, 1020.02], [95731199000.0, 1047.49], [96335999000.0, 1039.36], [96940799000.0, 1026.19], [97545599000.0, 1003.54], [98150399000.0, 980.81], [98755199000.0, 979.46], [99359999000.0, 979.23], [99964799000.0, 959.89], [100569599000.0, 961.32], [101174399000.0, 972.23], [101779199000.0, 963.05], [102383999000.0, 922.71], [102988799000.0, 951.01], [103593599000.0, 931.07], [104198399000.0, 959.36], [104803199000.0, 963.2], [105407999000.0, 922.19], [106012799000.0, 953.87], [106617599000.0, 927.89], [107222399000.0, 895.17], [107827199000.0, 930.84], [108431999000.0, 893.96], [109036799000.0, 920], [109641599000.0, 888.55], [110246399000.0, 879.82], [110851199000.0, 891.71], [111455999000.0, 870.11], [112060799000.0, 885.99], [112665599000.0, 910.9], [113270399000.0, 936.71], [113875199000.0, 908.87], [114479999000.0, 852.38], [115084799000.0, 871.84], [115689599000.0, 863.49], [116294399000.0, 887.57], [116899199000.0, 898.63], [117503999000.0, 886.36], [118108799000.0, 927.9], [118713599000.0, 947.1], [119318399000.0, 971.25], [119923199000.0, 978.63], [120527999000.0, 963.73], [121132799000.0, 987.06], [121737599000.0, 935.28], [122342399000.0, 908.42], [122947199000.0, 891.33], [123551999000.0, 854], [124156799000.0, 822.25], [124761599000.0, 838.05], [125366399000.0, 815.65], [125971199000.0, 818.73], [127180799000.0, 848.02], [127785599000.0, 880.23], [128390399000.0, 841.48], [128995199000.0, 855.47], [129599999000.0, 859.39], [130204799000.0, 843.94], [130809599000.0, 820.4], [131414399000.0, 820.32], [132019199000.0, 855.99], [132623999000.0, 851.92], [133228799000.0, 878.05], [133833599000.0, 887.83], [134438399000.0, 878.13], [135043199000.0, 846.68], [135647999000.0, 847.54], [136252799000.0, 844.81], [136857599000.0, 859.9], [137462399000.0, 834.64], [138067199000.0, 845.9], [138671999000.0, 850.44], [139276799000.0, 818.84], [139881599000.0, 816.65], [140486399000.0, 802.17], [141091199000.0, 853.72], [141695999000.0, 843.09], [142300799000.0, 815.39], [142905599000.0, 802.41], [143510399000.0, 791.77], [144115199000.0, 787.23], [144719999000.0, 787.94], [145324799000.0, 784.57], [145929599000.0, 752.58]];

function Chart(svg, width, height, data) {

   var self = this;

   this.svg = svg;
   this.PADDING = 50;
   this.WIDTH = width;
   this.HEIGHT = height;
   this.data = data;

   // the formatting function for the x-axis.  See
   // https://github.com/mbostock/d3/wiki/Time-Formatting#format_multi
   this.xaxisFormatter = d3.time.format.utc.multi([
      [".%L", function(d) { return d.getUTCMilliseconds(); }],
      [":%S", function(d) { return d.getUTCSeconds(); }],
      ["%I:%M", function(d) { return d.getUTCMinutes(); }],
      ["%I %p", function(d) { return d.getUTCHours(); }],
      //["%a %d", function(d) { return d.getUTCDay() && d.getUTCDate() !== 1; }],
      ["%m/%d", function(d) { return d.getUTCDate() !== 1; }],
      ["%b", function(d) { return d.getUTCMonth(); }],
      ["%Y", function() { return true; }]
   ]);

   // min/max time (X-axis).  The data is in sorted order, so we just
   // grab the X value from the first and last elements
   this.min_time = new Date(data[0][0]);
   this.max_time = new Date(data[data.length-1][0]);

   // calculate the min/max values
   this.min_value = Infinity;
   this.max_value = -Infinity;
   data.map(function(xy) {
      var y = xy[1];
      if (y < self.min_value) {
         self.min_value = y;
      }
      if (y > self.max_value) {
         self.max_value = y;
      }
   });

   // The domains for each axis
   this.xdomain = [this.min_time, this.max_time];
   this.ydomain = [this.min_value, this.max_value];

   // x-scale, a UTC time scale
   this.xscale = d3.time.scale.utc()
      .domain(this.xdomain)
      .range([0, this.WIDTH-this.PADDING]);

   // y-scale
   this.yscale = d3.scale.linear()
      .domain(this.ydomain)
      .range([this.HEIGHT-this.PADDING, 0]);

   // initialize d3-tip 
   this._InitializeTip()
}

Chart.prototype = {

   _InitializeTip: function() {
      // d3-tip initialization

      var self = this,
          dateFormatter = d3.time.format("%Y-%m-%d");

      this.tip = d3.tip()
         .attr('class', 'dot-tip')
         .offset(function(d) {
            var x = self.xscale(d[0]),
            y = self.yscale(d[1]),
            left = (x < 100) ? 100 : 0,
            top = (y < 100) ? 20 : -10;
            return  [top, left];
         })
         .direction(function(d) {
            return (self.yscale(d[1]) < 100) ? 's' : 'n';
         })
         .html(function(d) {
            var strDate = "<strong>Date:</strong> " + dateFormatter(new Date(d[0])) + "</br></br>",
            strValue = "<strong>Value:</strong> " + d[1] + "</br></br>";
            return strDate + strValue;
         });


   },
   
   _Zoom: function(g, chart) {
      /* _Zoom(g, chart)
       *
       * create the d3 zoom behaviour and event callbacks
       *
       * g - the element to call the zoom function on
       * chart - the Chart instance
       * 
       */

      // a flag to turn off zooming
      if (chart.zoomOff) {
         return;
      }
      
      // create zoom for mouse events on main chart (i.e, mousewheel
      // events will zoom in/out) and register event handlers
      var zoom  = d3.behavior.zoom()
         // set the xscale for zooming in the X-coord
         .x(chart.xscale)
         // on zoom event, call the zoomed function
         .on('zoom', zoomed);

      // apply it to the passed in element
      zoom(g);


      function zoomed() {
         /* manage zoom event */
         
         var domain = chart.xscale.domain(), // the current domain
             delta = domain[1] - domain[0];  // time delta in domain

         // if before beginning of data, adjust to beginning with same
         // time delta
         if (domain[0] < chart.min_time) {
            domain[0] = chart.min_time;
            domain[1] = Math.min(+chart.min_time + delta, chart.max_time);
         }
         // if after end of data, adjust to end with same
         // time delta
         if (domain[1] > chart.max_time) {
            domain[0] = Math.max(chart.min_time, +chart.max_time - delta);
            domain[1] = chart.max_time;
         }

         // update the chart xscale domain
         chart.xscale.domain(domain);
         // when updating xscale, must also update zoom
         zoom.x(chart.xscale);
         // with new domain set, re-render
         chart.Render();
      }

   },

   _Clear: function() {
      /* _Clear() */

      // select all elements **inside** the SVG and remove them
      this.svg.selectAll('*').remove();

   },
   
   _DrawLine: function() {
      /* DrawLine() */

      // reference to `this` used in closures
      var self = this;

      // create line function for use with PATH d attribute
      var line = d3.svg.line()
         .x(function(d) {
            return self.xscale(d[0]);
         })
         .y(function(d) {
            return self.yscale(d[1]);
         });

      // create a group to hold the path
      var g = this.svg.append('g')
         .data([this.data])
         .call(this._Zoom, this);

      // create a rectangle to collect the mouse events
      g.append('rect') 
         .attr('width', this.WIDTH)
         .attr('height', this.HEIGHT)
         .style('fill', 'none')
         .style('pointer-events', 'all');

      // create the PATH element, using the line function above for
      // the d attribute.  Note the clip-path.
      g.append('path')
         .attr({fill: 'none',
                stroke: 'blue',
                d: line,
                'clip-path': 'url(#clip)'});

      // the clip-path for the PATH, so when we zoom and the line
      // extends into the "margins" those portions of the line are
      // clipped.
      g.append("clipPath")
         .attr("id", "clip")
         .append("rect")
         .attr("width", this.WIDTH-this.PADDING)
         .attr("height", this.HEIGHT-this.PADDING);

      return g;
   },

   _DrawXAxis: function() {
      /* _DrawXAxis() */
      
      // append G to hold x-axis
      this.svg.append('g')
         // give it a class attribute
         .classed('axis', true)
         // transform it, so it is placed within the padding at the bottom of the chart
         .attr('transform', 'translate(0, ' + (this.HEIGHT - this.PADDING) + ')')
         // use d3 axis function to generate the x-axis
         .call(d3.svg.axis()
               // uses the same scaling function as the PATH
               .scale(this.xscale)
               // see above for details about the formatter 
               .tickFormat(this.xaxisFormatter)
               // orient for the bottom
               .orient('bottom'));

   },

   _DrawYAxis: function() {
      /* _DrawYAxis() */
      
      // append G to hold y-axis
      this.svg.append('g')
         // give it a class attribute
         .classed('axis', true)
         // transform it, so it is placed within the padding at the right of the chart
         .attr('transform', 'translate(' + (this.WIDTH - this.PADDING) + ')')
         // use d3 axis function to generate the y-axis
         .call(d3.svg.axis()
               // uses the same scaling function as the PATH
               .scale(this.yscale)
               // orient for the right-hand side
               .orient('right'));

   },

   _TipDotsOnly: function(g) {
      /* _Tip() -- dots ONLY */

      var self = this,
          update = g.selectAll('circle').data(g.data()[0])

      // append a circle for each point
      update.enter()
         .append('circle')
         .attr('r', 5)
         .attr('cx', function(d) {
            return self.xscale(d[0]);
         })
         .attr('cy', function(d) {
            return self.yscale(d[1]);
         })
         .attr('fill', 'blue')
         .attr('opacity', 0)
         .on('mouseenter', function(d) {
            d3.select(this).attr('opacity', .5);
            // self.tip.show(d);
         })
         .on('mouseout', function(d) {
            d3.select(this).attr('opacity', 0);
            // self.tip.hide(d);
         });

      // g.call(this.tip);
   },

   _Tip: function(g) {
      /* _Tip() */

      var self = this,
          update = g.selectAll('circle').data(g.data()[0])

      // append a circle for each point
      update.enter()
         .append('circle')
         .attr('r', 5)
         .attr('cx', function(d) {
            return self.xscale(d[0]);
         })
         .attr('cy', function(d) {
            return self.yscale(d[1]);
         })
         .attr('fill', 'blue')
         .attr('opacity', 0)
         .on('mouseenter', function(d) {
            d3.select(this).attr('opacity', .5);
            self.tip.show(d);
         })
         .on('mouseout', function(d) {
            d3.select(this).attr('opacity', 0);
            self.tip.hide(d);
         });

      g.call(this.tip);
   },
   
   OldRender: function() {
      /* Part 1 Render() */

      // clear the svg canvas
      this._Clear();

      // draw X-axis
      this._DrawXAxis();

      // draw Y-axis
      this._DrawYAxis();

      // draw the line
      this._DrawLine();
   },

   Render: function() {
      /* Render() */

      // clear the svg canvas
      this._Clear();

      // draw X-axis
      this._DrawXAxis();

      // draw Y-axis
      this._DrawYAxis();

      // draw the line
      this._Tip(this._DrawLine());
   }
};


function demo_functions(d3, WIDTH, HEIGHT, el_widgets,
                        disable_run_again, enable_run_again) {
   
   /* Each slide declares a function with a data-function
    * attribute.  The string value must match a property in
    * this object.  When user navigates to a slide, the
    * associated function is executed.
    */

   var __chart = new Chart(d3.select('svg'), WIDTH, HEIGHT, DOWJONES_WEEKLY);
   
   return {

      intro: function() {
         /* Introduction */

         // assign a D3 selection to the single SVG element on the
         // page to a variable named svg.
         var svg = d3.select('svg');

         // create a new chart.  WIDTH and HEIGHT are constants
         // defined within scope.  DOWJONES_WEEKLY is an array of
         // two-element arrays, [timestamp, value], e.g:
         //
         //  [[47951999000.0, 890.19], [48556799000.0, 901.8], ...]
         var chart = new Chart(svg, WIDTH, HEIGHT, DOWJONES_WEEKLY);

         // render the chart
         chart.Render();
      },

      _render: __chart.Render,
      _notooltip: __chart.OldRender,
      _tip: __chart._Tip,
      _tipdotsonly: __chart._TipDotsOnly,
      _inittip: __chart._InitializeTip,
      
      notooltip: function() {
         var svg = d3.select('svg');
         var chart = new Chart(svg, WIDTH, HEIGHT, DOWJONES_WEEKLY);
         // swap out render functions
         chart.Render = chart.OldRender;
         chart.Render();
      },

      tipdotsonly: function() {
         var svg = d3.select('svg');
         var chart = new Chart(svg, WIDTH, HEIGHT, DOWJONES_WEEKLY);
         // swap out _Tip functions
         chart._Tip = chart._TipDotsOnly;
         chart.Render();
      },

   }; // end of return {...};
}

dowjones-weekly.csv

index.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Interactive SVG Charts With D3 – Part 2</title>
    <link rel="stylesheet" type="text/css" href="./slides.css" />
    <link rel="stylesheet" type="text/css" href="./prism.css" />
  </head>
  <body>
    <div class="title">
      <a href="http://artandlogic.com/2016/05/interactive-svg-charts-d3-part-2/">Interactive SVG Charts With D3 – Part 2</a>
    </div>

    <section id="slide">
      <div class="heading"></div>
      <div id="demo">
        <div id="widgets"></div>
        <button id="execute">Run Again</button>
      </div>
      <div class="content"></div>
    </section>
    <section id="src">
      <div class="heading">Source</div>
    </section>

    <!-- TEMPLATES -->
    <script id="links" type="text/template"><div class="links">
        <a data-nav="prev" class="<%=prev_hidden%>" href="<%=prev%>"><%=prev_title%> &larr;</a>
        <a data-nav="next" class="<%=next_hidden%>" href="<%=next%>">&rarr; <%=next_title%></a>
      </div></script>
    
    </script>
    <!-- /TEMPLATES -->

    <!-- SLIDES -->
    <script type="text/slide"
            data-title="Introduction"
            data-function="intro"
            data-highlight-lines="5,12,15">
      <p>
        This is Part 2 of a three part tutorial exploring building
        interactive charts with <a href="http://d3js.org/">D3</a>.
      </p>
      <p>
        You can find Part 1 at <a href="http://artandlogic.com/2016/05/interactive-svg-charts-d3-part-1/">Art &amp; Logic's blog site</a>.
      </p>
      <p>
        In Part 2 we will add tool-tips for each data point on the
        line. Try it now: hover your mouse over the line, when it is
        over a data point, the point will appear and a tool-tip will
        display the detail of the datum.
      </p>
      <p>
        In this slide, we see the complete chart.  It draws one line,
        time series data of Dow Jones industrial averages, July 1971 -
        August 1974.  Placing your mouse pointer over the chart, then
        scrolling the mouse wheel, you'll see the chart zoom-in or
        zoom-out, centering the zoom action around your mouse
        pointer.  And, as mentioned above, hovering your mouse over a
        point will activate a tool-tip.
      </p>
      <p>
        In <strong>line 5</strong> in the javascript on the right, we
        use d3 to select the svg element from the page, then
        in <strong>line 12</strong>, instantiate a new Chart, passing
        in the svg selection, it's width and height, along with the
        data, which is an array of two-element arrays: [timestamp,
        value].  In <strong>line 15</strong>, we call the rendering
        method on the chart.
      </p>
      <p>
        The rest of this tutorial explores the Render() method.
      </p>
    </script>

    <script type="text/slide"
            data-title="With No Tool-tip"
            data-function="notooltip"
            data-display-function="_notooltip"
            data-highlight-lines="">
      <p>
        Before looking at how tool-tips are rendered, a quick
        refresher from Part 1.
      </p>
      <p>
        The chart on the right is exactly the same as the previous
        slide's except there are no tool-tips.  The javascript for
        Part 1's Render() function is on the far right.  (Full
        discussion of this can be found
        in <a href="http://bl.ocks.org/dpopowich/raw/cba9f20520f5164deec9f1d5dcba1a14/?s=1">Part 1</a>.)
      </p>
      <p>
        The next slide will show the new <code>Render()</code> method,
        which only has one small change.
      </p>
    </script>

    <script type="text/slide"
            data-title="With Tool-tip"
            data-function="intro"
            data-display-function="_render"
            data-highlight-lines="13">
      <p>
        This chart restores the tool-tips.  The only difference
        between this slide and the previous is <strong>line
        13</strong>: the output of <code>_DrawLine()</code> is
        passed to a new method, <code>_Tip()</code>.
      </p>

      <p>
        What is the output of <code>_Drawline()</code>?  If you review
        <a href="http://bl.ocks.org/dpopowich/raw/cba9f20520f5164deec9f1d5dcba1a14/?s=5">the
        slide</a> discussing this method from Part 1, you will see it
        returns the G element used to hold the PATH element that
        renders our line.  What's so special about the G element?  It
        is the element <em>bound with the data</em>.  The library used
        for generating the tool-tips expects a SVG or G element with
        bound data.
      </p>
    </script>
    
    <script type="text/slide"
            data-title="_Tip() -- Dots ONLY"
            data-function="tipdotsonly"
            data-display-function="_tipdotsonly"
            data-highlight-lines="5,8,10,19,23">
      <p>
        This slide demonstrates a slightly
        modified <code>_Tip()</code> method: with vanilla D3 we will
        show how the dots are drawn.  When hovering over a data point,
        only the circle will appear, not the tool-tip.
      </p>
      <p>
        Recall that the G element passed in is bound to our data.  In
        <strong>line 5</strong> we create an update selection of
        CIRCLE elements (which will be empty, there being no such
        elements, yet).  In <strong>line 8</strong> we use the enter
        selection to append CIRCLE elements for each datum, setting
        its radius to 5px (<strong>line 10</strong>) and centering the
        circle on the x,y point using the chart's x- and y-scales.
        The circles are filled with blue and, importantly, the opacity
        of each is set to zero.
      </p>
      <p>
        This is important to understand.  For each datum, a circle
        already exists, but you can't see it because the opacity is
        zero.  Use your browser's dev tools to explore the SVG; you
        will notice hundreds of circle elements.
      </p>
      <p>
        In <strong>lines 19 and 23</strong> we
        set <code>mouseenter</code> and <code>mouseout</code> events on the
        circles.  The mouseenter sets the opacity to .5 so we can see
        the circle while the mouseout resets the opacity to 0.
      </p>
      <p>
        <strong>Lines 21, 25, and 28</strong> are commented out, which
        prevents the tooltips from being displayed.
      </p>
    </script>

    <script type="text/slide"
            data-title="_Tip()"
            data-function="intro"
            data-display-function="_tip"
            data-highlight-lines="21,25,28">
      <p>
        The only difference between this slide and the previous one
        is <strong>lines 21, 25, and 28</strong> are now active and
        the tooltips will be displayed.  The next slide will discuss
        this property.
      </p>
    </script>
      
    <script type="text/slide"
            data-title="D3-tip"
            data-function="intro"
            data-display-function="_inittip"
            data-highlight-lines="7,8,9,16,19">
      <p>
        <a href="http://labratrevenge.com/d3-tip/">D3-tip</a> is an
        add-on library for D3 to display tool-tips.
        Complete <a href="https://github.com/Caged/d3-tip/blob/master/docs/index.md">API
        documentation</a> can be found on github.
      </p>
      <p>
        <code>d3.tip()</code> returns a function suitable for use with
        D3's <a href="https://github.com/d3/d3/wiki/Selections#call">selection.call()</a>.
      </p>
      <p>
        The function, assigned to <code>this.tip</code> (<strong>line
        7</strong>), has a number of properties which affect how the
        tool-tip is rendered.
      </p>
      <p>
        In <strong>line 8</strong> we assign a class so we can control
        the rendering of the underlying DIV of the tool-tip.  The CSS
        included has the following:
      </p>
      <pre>
        <code>
.dot-tip {
   line-height: 1;
   font-weight: bold;
   padding: 12px;
   background: rgba(204, 204, 204, 0.8);
   color: blue;
   border-radius: 12px;
}
        </code>
      </pre>
      <p>
        In <strong>line 9</strong> we set the offset of the tool-tip.
        Each datum is passed to the function and by computing the x,y
        points we can set the left and top of the DIV.
      </p>
      <p>
        In <strong>line 16</strong> we set
        the <a href="https://github.com/Caged/d3-tip/blob/master/docs/positioning-tooltips.md#tipdirection">direction</a>
        to either South or North.
      </p>
      <p>
        In <strong>line 19</strong> we set the HTML of the tool-tip,
        which can be any arbitrary content.  Here we build a simple
        string, formatting the date using D3's
        time <a href="https://github.com/d3/d3/wiki/Time-Formatting#format">format
        utility function</a>.  A more complicated example may use a
        template rendering library to include a template which expects
        values from each datum.
      </p>
    </script>
      
    <script type="text/slide"
            data-title="Using d3.tip() function"
            data-function="intro"
            data-display-function="_tip"
            data-highlight-lines="21,25,28">
      <p>
        As stated in the previous slide, <code>d3.tip()</code> returns
        a function that can be used with <code>.call()</code>.  We see
        this in <strong>line 28</strong>.  This will create a DIV
        (initially hidden) inserted into the BODY of the document.
      </p>
      <p>
        When the <code>show()</code> function is called (<strong>line
        21</strong>), the DIV will be positioned absolutely and
        displayed.  How it is displayed is determined by the
        configuration we did when creating the tip function.  When
        the <code>hide()</code> function is called (<strong>line
        25</strong>), the DIV is hidden.
      </p>

      <hr style="clear:both">
      <p>
        This ends Part 2 of the tutorial.  In Part 3 we will explore
        panning left and right using
        D3's <a href="https://github.com/d3/d3/wiki/SVG-Controls#brush">brush
        control</a>.  <em>Stay tuned!</em>
      </p>
      <p>
        Until then, please feel free to leave comments about the
        tutorial
        on <a href="https://artandlogic.com/2016/05/interactive-svg-charts-d3-part-2/">Art&amp;Logic's
        blog post</a>.
      </p>
      
      
    </script>

    <!-- /SLIDES -->

    <!-- ------------------------------------------------------------ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"
            charset="utf-8">
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js" charset="utf-8"></script>
    <script src="./prism.js" data-manual></script>
    <script src="./demo_functions.js"></script>
    <script src="./slides.js"></script>
    <script>init_slides(d3, Prism, demo_functions);</script>

  </body>
</html>

prism.css

/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript&plugins=line-highlight+line-numbers */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

pre[data-line] {
	position: relative;
	padding: 1em 0 1em 3em;
}

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: hsla(24, 20%, 50%,.08);
	background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
	background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
	background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
	background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
	
	pointer-events: none;
	
	line-height: inherit;
	white-space: pre;
}

	.line-highlight:before,
	.line-highlight[data-end]:after {
		content: attr(data-start);
		position: absolute;
		top: .4em;
		left: .6em;
		min-width: 1em;
		padding: 0 .5em;
		background-color: hsla(24, 20%, 50%,.4);
		color: hsl(24, 20%, 95%);
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		box-shadow: 0 1px white;
	}
	
	.line-highlight[data-end]:after {
		content: attr(data-end);
		top: auto;
		bottom: .4em;
	}
pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}

prism.js

/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript&plugins=line-highlight+line-numbers */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e];if(2==arguments.length){a=arguments[1];for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);return i}var o={};for(var s in i)if(i.hasOwnProperty(s)){if(s==n)for(var l in a)a.hasOwnProperty(l)&&(o[l]=a[l]);o[s]=i[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},plugins:{},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var u=a.textContent,g={element:a,language:l,grammar:o,code:u};if(!u||!o)return t.hooks.run("complete",g),void 0;if(t.hooks.run("before-highlight",g),r&&_self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g),t.hooks.run("complete",g)},c.postMessage(JSON.stringify({language:g.language,code:g.code,immediateClose:!0}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g),t.hooks.run("complete",g)},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,i=n.immediateClose;_self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),i&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/i,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
!function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function t(e,t){return t=" "+t+" ",(" "+e.className+" ").replace(/[\n\t]/g," ").indexOf(t)>-1}function n(e,n,i){for(var o,l=n.replace(/\s+/g,"").split(","),a=+e.getAttribute("data-line-offset")||0,d=r()?parseInt:parseFloat,c=d(getComputedStyle(e).lineHeight),s=0;o=l[s++];){o=o.split("-");var u=+o[0],m=+o[1]||u,h=document.createElement("div");h.textContent=Array(m-u+2).join(" \n"),h.className=(i||"")+" line-highlight",t(e,"line-numbers")||(h.setAttribute("data-start",u),m>u&&h.setAttribute("data-end",m)),h.style.top=(u-a-1)*c+"px",t(e,"line-numbers")?e.appendChild(h):(e.querySelector("code")||e).appendChild(h)}}function i(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var i=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(i&&!document.getElementById(t)){var r=t.slice(0,t.lastIndexOf(".")),o=document.getElementById(r);o&&(o.hasAttribute("data-line")||o.setAttribute("data-line",""),n(o,i,"temporary "),document.querySelector(".temporary.line-highlight").scrollIntoView())}}if("undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector){var r=function(){var e;return function(){if("undefined"==typeof e){var t=document.createElement("div");t.style.fontSize="13px",t.style.lineHeight="1.5",t.style.padding=0,t.style.border=0,t.innerHTML="&nbsp;<br />&nbsp;",document.body.appendChild(t),e=38===t.offsetHeight,document.body.removeChild(t)}return e}}(),o=0;Prism.hooks.add("complete",function(t){var r=t.element.parentNode,l=r&&r.getAttribute("data-line");r&&l&&/pre/i.test(r.nodeName)&&(clearTimeout(o),e(".line-highlight",r).forEach(function(e){e.parentNode.removeChild(e)}),n(r,l),o=setTimeout(i,1))}),addEventListener("hashchange",i)}}();
!function(){"undefined"!=typeof self&&self.Prism&&self.document&&Prism.hooks.add("complete",function(e){if(e.code){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var n,a=e.code.match(/\n(?!$)/g),l=a?a.length+1:1,m=new Array(l+1);m=m.join("<span></span>"),n=document.createElement("span"),n.className="line-numbers-rows",n.innerHTML=m,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(n)}}})}();

slides.css

html,body {
  height: 100%;
  margin: 0;
  padding: 0;

  font-family: "Neue Helvetica", Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: black;
  background: white;
}

.title, .heading {
   padding: 5px 0;
   margin-bottom: 15px;
   font-size: 30px;
   font-weight: bold;
   line-height: 1em;
   text-align: center;
   background: #81977F;
}

.heading {
   position: fixed;
   padding: 5px;
   font-size: 24px;
   text-align: left;
   background: #ccc;
   transform: translate(0, -40px);
}

.title a {
   color: black;
   text-decoration: none;
}

section {
   display: inline-block;
   margin-top: 40px;
   border-right: 5px solid #81977F;
   padding: 5px 15px;
   height: calc(100% - 150px);
   overflow: auto;
}

#demo {
   float: right;
   margin: 0 0 1em 1em;
   text-align: center;
}

#slide {
   width: calc(60% - 35px);
}
#slide code {
   padding: 2px 5px;
   background: #ddd;
}
#slide pre code {
   background: inherit;
}


#src {
   border-right: none;
   width: calc(40% - 50px);
}

.hidden {
   visibility: hidden;
}

.links {
   margin: 10px 0;
   clear: both;
}
.links a {
   font-size: 1.2em;
}
.links a[data-nav=next] {
   float: right;
}
svg {
   display: block;
   margin: 5px  auto;
   border: 1px solid black;
}

#execute {
   margin-top: 5px;
}

.moveable {
   cursor: move;
}

.axis {
   font-size: .8em;
}
.axis line {
   stroke: #333;
}
.axis path {
   shape-rendering: crispEdges;
   fill: none;
   stroke: #333;
}
.dot-tip {
   line-height: 1;
   font-weight: bold;
   padding: 12px;
   background: rgba(204, 204, 204, 0.8);
   color: blue;
   border-radius: 12px;
}

slides.js

/*jslint browser: true, indent: 3, white: true, nomen: true */

function init_slides(d3, prism, function_generator) {
   "use strict";
   
   var slides = d3.selectAll('script[type="text/slide"]'),
       el_slide = d3.select('#slide'),
       el_demo = d3.select('#demo'),
       el_src = d3.select('#src'),
       el_execute = d3.select('#execute'),
       el_widgets = d3.select('#widgets'),
       LINKS_TMPL = d3.select('#links').html(),
       WIDTH = 600, // svg width
       HEIGHT = 400,// svg height
       slide_func = null,
       current = 0,
       minslide = 0,
       maxslide = slides.size()-1,

       disable_run_again = function() {
          /* disable the "Run Again" button */
          el_execute.property('disabled', true);
       },

       enable_run_again = function() {
          /* enable the "Run Again" button */
          el_execute.property('disabled', false);
       },

       functions = function_generator(d3, WIDTH, HEIGHT, el_widgets,
                                      disable_run_again, enable_run_again);
   
   function verify() {
      /* verify each slide has all required attributes and a defined
       * function */
      
      slides.each(function(d, i) {
         /*jslint unparam: true */

         var el = this,
             funcname = el.getAttribute('data-function'),
             displayfunc = el.getAttribute('data-display-function');

         if (!el.hasAttribute('data-title')) {
            console.error('Slide #' + (i+1) + ' does not have required attribute: data-title');
         }

         if (!funcname) {
            console.error('Slide #' + (i+1) + ' does not have required attribute: data-function');
         }

         if (funcname && (functions[funcname] === undefined)) {
            console.error('Slide #' + (i+1) + ' specified function is not defined: ' + funcname);
         }

         if (displayfunc && displayfunc !== '<none>' && (functions[displayfunc] === undefined)) {
            console.error('Slide #' + (i+1) + ' specified display-function is not defined: ' + displayfunc);
         }
         
      });
   }

   function execute() {
      /* set up svg element and execute the function */
      var widgetsNode;

      // empty #widgets
      widgetsNode = el_widgets.node();
      while (widgetsNode.firstChild) {
         widgetsNode.removeChild(widgetsNode.firstChild);
      }

      // remove/re-add <svg>
      el_demo.select('svg').remove();
      el_demo.insert('svg', '#widgets')
         .attr({width: WIDTH, height: HEIGHT});

      slide_func();
   }
   
   function go(slide) {
      /* go to a slide (where: 0 <= slide < slides.size()) */
      var tmpl, title, highlight, hidden, links, linksNode, display_func;

      // confirm sanity
      if (slide < minslide || slide > maxslide) {
         console.error('Illegal slide: #' + slide);
         current = 0;
      }

      // previous button
      hidden = (slide === minslide);
      links = LINKS_TMPL.replace(/<%=prev_hidden%>/g, hidden ? "hidden" : "");
      if (!hidden) {
         title = slides[0][slide-1].getAttribute('data-title');
         links = links.replace(/<%=prev%>/g, slide-1);
         links = links.replace(/<%=prev_title%>/g, title);
      }

      // next button
      hidden = (slide === maxslide);
      links = links.replace(/<%=next_hidden%>/g, hidden ? "hidden" : "");
      if (!hidden) {
         title = slides[0][slide+1].getAttribute('data-title');
         links = links.replace(/<%=next%>/g, slide+1);
         links = links.replace(/<%=next_title%>/g, title);
      }

      // the template
      tmpl = d3.select(slides[0][slide]);
      title = tmpl.attr('data-title');
      highlight = tmpl.attr('data-highlight-lines');

      // the slide function
      slide_func = functions[tmpl.attr('data-function')];
      // the display-function
      display_func = tmpl.attr('data-display-function');
      if (display_func) {
          if (display_func !== '<none>') {
             display_func = functions[display_func];
          }
      } else {
         // by defualt we display the slide function
         display_func = slide_func;
      }

      // *** set the slide content ***

      // remove any previous links
      el_slide.selectAll('.links').remove();
      // add title
      el_slide.select('.heading').html(title);
      // create node from links html
      var linksNode = document.createElement('div');
      linksNode.innerHTML = links;
      linksNode = linksNode.firstChild;
      // insert the links node before the SVG demo
      el_slide.node().insertBefore(linksNode, el_demo.node());
      // insert the content html
      el_slide.select('.content').html(tmpl.html());
      // append the links node, so it's at the bottom, too.
      el_slide.node().appendChild(linksNode.cloneNode(true));

      // *** set source and highlight it ***

      if (display_func === '<none>') {
         // no display function specified
         el_src.style('display', 'none');
      } else {
         // make sure the src is displayed
         el_src.style('display', null);
         // remove existing <pre>
         el_src.select('pre').remove();
         // append new, highlighted <pre><code>...</code></pre>
         prism.highlightElement(
            el_src.append('pre')
               .classed('line-numbers', true)
               .attr('data-line', highlight)
               .append('code')
               .classed('language-javascript', true)
               .html(display_func.toString()
                     .replace(/function\s*\(\)[^]*?\/\*/, 'function() { /*')
                     .replace(/^ {6}/gm, ''))
               .node());
      }
      // execute function (which sets up SVG element)
      execute();

   }

   function init() {
      /* initialize events, etc. */
      var s;

      // clicking a nav link -- set up listener using delegation
      d3.select('#slide')
         .on('click', function() {
            var e = d3.event, target = e.target;

            // only interested in anchors with data-nav attribute
            if (! (target.nodeName === 'A' && target.hasAttribute('data-nav'))) {
               return;
            }
            // prevent following link
            e.preventDefault();
            // do the math to compute the next slide
            if (target.getAttribute('data-nav') === 'prev') {
               current -= 1;
            } else {
               current += 1;
            }
            // allow back/forward buttons to work
            window.history.pushState({slide:current}, target.textContent, '?s=' + current);
            // go to the new current slide
            go(current);
         });

      window.addEventListener('popstate', function(e) {
         var state = e.state;

         // set the current slide from the state, defaulting to the
         // first slide
         current = (state && state.slide) || 0;
         // go to the new current slide
         go(current);
      });

      // location.search indicates slide??
      // regex looking for ?s=SLIDE... or ...&s=SLIDE...
      s = /[&?]s=([0-9]+)/.exec(location.search);
      if (s !== null) {
         // match found, the slide number will be the 2nd element of
         // the returned array
         current = + s[1];
      }
      
      // clicking Run Again button
      el_execute.on('click', execute);
   }

   // verify each slide is valid
   verify();
   // initialize global event handlers
   init();
   // go to the current slide
   go(current);

}

thumbnail.png