D3 Examples - Horizon Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font-family: sans-serif;
}
​
svg {
  position: absolute;
  top: 0;
}
​
#horizon-controls {
  position: absolute;
  width: 940px;
  padding: 10px;
  z-index: 1;
}
​
#horizon-bands {
  float: right;
}
​
</style>
<div id="horizon-controls">
  <input name="mode" type="radio" value="mirror" id="horizon-mode-mirror" checked><label for="horizon-mode-mirror"> Mirror</label>
  <input name="mode" type="radio" value="offset" id="horizon-mode-offset"><label for="horizon-mode-offset"> Offset</label>
  <span id="horizon-bands"><span id="horizon-bands-value">1</span> <button class="first">&#x2212;</button><button class="last">+</button></span>
</div>
<div id="horizon-chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="horizon.js?0.0.1"></script>
<script>
​
var width = 960,
    height = 500;
​
var chart = d3.horizon()
    .width(width)
    .height(height)
    .bands(1)
    .mode("mirror")
    .interpolate("basis");
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("unemployment.json", function(error, data) {
  if (error) throw error;
​
  // Offset so that positive is above-average and negative is below-average.
  var mean = data.rate.reduce(function(p, v) { return p + v; }, 0) / data.rate.length;
​
  // Transpose column values to rows.
  data = data.rate.map(function(rate, i) {
    return [Date.UTC(data.year[i], data.month[i] - 1), rate - mean];
  });
​
  // Render the chart.
  svg.data([data]).call(chart);
​
  // Enable mode buttons.
  d3.selectAll("#horizon-controls input[name=mode]").on("change", function() {
    svg.call(chart.duration(0).mode(this.value));
  });
​
  // Enable bands buttons.
  d3.selectAll("#horizon-bands button").data([-1, 1]).on("click", function(d) {
    var n = Math.max(1, chart.bands() + d);
    d3.select("#horizon-bands-value").text(n);
    svg.call(chart.duration(1000).bands(n).height(height / n));
  });
});
​
</script>
​
    