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)));

      });

});