d3 | Reusable slopegraph

Reusable slopegraph inspired/adapted from Ben Van Dyke's example into a reusable chart.

This slopegraph example shows the number of personal computers installed in a country per household. This includes desktop PCs and laptops, but excludes smartphones and terminals connected to mainframe computers. All figures are calculated using total number of Personal Computers and the Total Number of Households.

data source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>d3 | reusable slopegraph</title> 
  <meta name="author" content="Sundar Singh | eesur.com">

<header>
        <h1>Reusable slopegraph</h1> 
        <p>Slopegraph example showing number of personal computers installed in a country per household.</p>
    </header>

<footer>
      <button id="reset">reset</button>
      <nav id='nav-alt'></nav>
    </footer>

<script> d3.eesur = {}; </script>
    
    <script src="d3_code_slopegraph.js"></script>
    <script>

//  render slopegraph chart

(function() {

// create chart
    var slopegraph = d3.eesur.slopegraph()
        // .margin({top: 20, bottom: 20, left: 100, right:100})
        .strokeColour('#130C0E')
        .keyName('country')
            .keyValueStart('2000')
            .keyValueEnd('2012')
            .h(500)
            // .format(d3.format('04d'))
            .on('_hover', function (d, i) {
                highlightLine(d, i);
            });

d3.json('data.json', function(error, data) {

if (error) throw error;

// render chart
        d3.select('#slopegraph')
            .datum(data)
            .call(slopegraph);

// alternative navigation     
        navAlt(data);
    });

// reset button listener
    d3.select('#reset')
        .on('click', function () {
            d3.selectAll('.elm').transition().style('opacity', 1);
            d3.selectAll('.s-line').style('stroke', '#130C0E');
        });

// navigation
    function navAlt(data) {
        d3.select('#nav-alt').append('ul')
            .selectAll('li')
            .data(data)
            .enter().append('li')
            .on('click', function (d, i) {
                highlightLine(d, i);
            })
            .text(function (d) { return d['country']; });
    }

// highlight line and fade other lines
    function highlightLine(d, i) {
        d3.selectAll('.elm').transition().style('opacity', 0.2);
        d3.selectAll('.sel-' + i).transition().style('opacity', 1);
        d3.selectAll('.s-line').style('stroke', '#FDBB30');
        d3.selectAll('.s-line.sel-' + i).style('stroke', '#130C0E');
    }

// just for blocks viewer size
    d3.select(self.frameElement).style('height', '800px');
  
  }());

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js