diff -r efd9c589177a -r c0b4a8b5a012 toolkit/javascript/d3/examples/horizon/horizon.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/horizon/horizon.js	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,43 @@
+var w = 960,
+    h = 40;
+
+var chart = d3.chart.horizon()
+    .width(w)
+    .height(h)
+    .bands(5)
+    .mode("offset")
+    .interpolate("basis");
+
+var svg = d3.select("#chart").append("svg:svg")
+    .attr("width", w)
+    .attr("height", h);
+
+d3.json("unemployment.json", function(data) {
+
+  // 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("#mode button")
+      .data(["offset", "mirror"])
+      .on("click", function(m) {
+        svg.call(chart.duration(0).mode(m));
+        d3.selectAll("#mode button")
+            .classed("active", function(d) { return d == m; });
+      });
+
+  // Enable bands buttons.
+  d3.selectAll("#bands button")
+      .data([-1, 1])
+      .on("click", function bands(db) {
+        svg.call(chart.duration(1000).bands(Math.max(1, chart.bands() + db)));
+      });
+});