bar + sum: reusable d3.js

This is a six part series, taking you through stages of designing and creating reusable visualizations with d3.js

All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.

Part 2. This is showcasing the power of the reusable chart API. This is showcasing the difference between a reusable bar chart and a prototyped bar chart.

These are examples created for a talk (slides and video).

Cheers,

Miles @milr0c

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://littlesparkvt.com/flatstrap/assets/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="src.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="span2"><button class="btn btn-success" onclick="update()">update</button></div>
      <div class="span2" id="sum">TOTAL: 0</div>
    </div>
    <div class="row" id="chart"></div>
    <script type="text/javascript">
var bar = charts.bar()
                .on('brush', makeSum)
                .on('brushend', makeSum),
    data;

update();

function update() {
  data = randomizeData(20, Math.random()*100000);

d3.select("#chart")
      .datum(data)
      .call(bar);
}

function makeSum() {
  var sumDiv = d3.select('#sum'),
      extent = d3.event.target.extent()
      x = bar.x(),
      sum = 0;
  // inefficient recommend for performance to leverage crossfilter.js
  data.forEach(function(d) {
    if (extent[0] <= x(d.x) && x(d.x) + x.rangeBand() <= extent[1])
      sum += d.y;
  });
  sumDiv.text('TOTAL: ' + sum);
}

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

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