Binned Line Chart

This is a Binned Line Chart version of Mike Bostock's zoomable area chart. You can find his source here. The graph shows number of flights per day in the United States.

Use the mouse-wheel to zoom in and out, and drag the slider to adjust the size of the bins.
View with the step-after interpolation method to see the discrete bins.

This is a small demo made part-way through Matt Woelk's Masters Thesis. A video demonstration of the full version is available.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="readme-binnedChart.js"></script>
<script src="readme-underscore.js"></script>
<script src="readme-msToCentury.js"></script>
<script src="https://github.com/fryn/html5slider/raw/master/html5slider.js"></script>

#controls ul {
  float: left;
}

#chart {
  font: 10px sans-serif;
  overflow: none;
}

path, line {
  /*shape-rendering: crispEdges;*/
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis path {
  /* Don't show the axis lines. */
  display: none;
}

.y.axis line {
  stroke: #999;
  stroke-dasharray: 3, 3;
}

#chart_container {
  position: relative;
  overflow: none;
}

#chartContainer {
  overflow : none;
  width    : 100%;
  overflow : none;
  float    : left;
}

#zoomSVG {
  position : absolute;
  top      : 0;
  left     : 0;
}

#zoomRect {
  border-style : solid;
  border-width : 1px;
  cursor       : col-resize;
}
</style>
<body>
<script>
var thePlot;
var margin = {top: 20, right: 10, bottom: 25, left: 70};
var height = 200;

var parseDate = d3.time.format("%Y-%m-%d").parse;

d3.csv("readme-flights.csv", function (error, data) {
  // FORMATTING DATA //

if (error) {
    alert("Try refreshing your browser.");
    return;
  }

var json = data.map(function (d) {
    return {val: +d.value, ms: parseDate(d.date).getTime()};
  });

// INITIALIZING THE PLOT //

var xScale = d3.scale.linear().domain([570693600000, 1201845600000]).range([0, document.getElementById("chartContainer").offsetWidth]);
  var yScale = d3.scale.linear();
  var plotHeight = function () { return thePlot.height(); };
  var pl;

thePlot = binnedLineChart(json, "TODO-SERVER", "1");
  thePlot.xScale(xScale);

pl = d3.select("#chartContainer").insert("svg").call(thePlot);

var sps = 864e5; // 864e5 is the number of milliseconds in a day

thePlot.containerWidth(document.getElementById("chartContainer").offsetWidth).height(height).showTimeContext(true).milliSecondsPerSample(sps).update();

d3.select("#chartContainer").attr("height", plotHeight).attr("width", document.getElementById("chartContainer").offsetWidth);

// ZOOMING //

var zoomSVG = d3.select("#zoomSVG");
  var zoomRect = d3.select("#zoomRect");
  var zoom = d3.behavior.zoom()
      .scaleExtent([Math.pow(2, -2), Math.pow(2,10)])
      .on("zoom", function () {
        thePlot.xScale(xScale).update();
    });

zoomSVG.attr("width", document.getElementById("chartContainer").offsetWidth)
         .attr("height", plotHeight);

zoomRect.attr("width", document.getElementById("chartContainer").offsetWidth - margin.left - margin.right)
          .attr("height", plotHeight)
          .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

zoomRect.attr("fill", "rgba(0,0,0,0)")
          .call(zoom);

// apply zooming
  xScale = thePlot.xScale();
  yScale = thePlot.yScale();
  zoom.x(xScale);
  zoom.y(yScale);

// UPDATING LINES //

function changeLines () {
    thePlot.setSelectedLines().update();
  }

document.getElementById("render-lines").addEventListener("change", changeLines, false);
  document.getElementById("render-depth").addEventListener("change", changeLines, false);
  document.getElementById("render-method").addEventListener("change", changeLines, false);
});

</script>
<div id="chartContainer">
  <svg id="zoomSVG"><rect id="zoomRect" /></svg>
</div>

<div id="controls">
  <form>
    <ul id="render-lines">
      Which functions<br />to render:
      <li><label><input type="checkbox" checked value="average"/>Averages</label></li>
      <li><label><input type="checkbox" checked value="maxes"/>Maximums</label></li>
      <li><label><input type="checkbox" checked value="mins"/>Minimums</label></li>
      <li><label><input type="checkbox"         value="q1"/>1st Quartile</label></li>
      <li><label><input type="checkbox"         value="q3"/>3st Quartile</label></li>
      <li><label><input type="checkbox" checked value="quartiles"/>Quartile Area</label></li>
    </ul>

<ul id="render-depth">
      Maximum Bin<br />Render Size:
      <br />
      <label><input type="range" min="1" max="200" id="renderdepth" value="40" style="width:200px"/>
    </ul>

<ul id="render-method">
      Interpolation<br />Method:
      <li><label><input type="radio"         name="render-method" value="linear"/>Linear</li>
      <li><label><input type="radio"         name="render-method" value="step-after"/>Step-After</li>
      <li><label><input type="radio" checked name="render-method" value="monotone"/>Monotone</li>
    </ul>
  </form>
</div>

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

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

https://github.com/fryn/html5slider/raw/master/html5slider.js