D3 Examples - d3.horizon Example

d3.horizon Example

Attempting to reimplement the stocks example from Cubism with the d3.horizon plugin.

A few notes so far:

d3.horizon does not expose d3.scales, which makes it hard to create axes

d3.horizon seems to expect an array of data which map to pixels. It would be more convenient the days in the year didn't have to be enumerated in this example, to fill in gaps. Without doing this, the chart appears to render fine but lacks gaps and is therefore wrong if the x-axis is a linear timecale.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
</style>
<div id="horizon-chart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="horizon.js?0.0.1"></script>
<script>
var metric = "Open";
var dateformat = d3.time.format("%e-%b-%y");
​
var data,
    values,
    mean,
    lookup;
​
var width = 730,
    height = 500,
    chartheight = 20;
​
var chart = d3.horizon()
    .width(width)
    .height(height)
    .bands(8)
    .height(chartheight)
    .mode("mirror")
    .interpolate("step-after");
​
/* Utility functions to generate all days in a year */
// https://stackoverflow.com/questions/4413590/javascript-get-array-of-dates-between-2-dates
Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf())
    dat.setDate(dat.getDate() + days);
    return dat;
}
​
function getDates(startDate, stopDate) {
    var dateArray = new Array();
    var currentDate = startDate;
    while (currentDate <= stopDate) {
        dateArray.push( new Date (currentDate) )
        currentDate = currentDate.addDays(1);
    }
    return dateArray;
}
/* End utility functions */
​
var dates = getDates(
  dateformat.parse("1-Jan-12"),
  dateformat.parse("31-Dec-12")
);
​
// used only for axes, unfortunately horizon plugin doesn't play with scales well
var xscale = d3.time.scale()
  .domain(d3.extent(dates))
  .range([0,width]);
​
var xAxis = d3.svg.axis()
  .scale(xscale)
  .orient("bottom");
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.csv("TSLA.csv", function(error, raw) {
  raw.forEach(function(d) {
    d[metric] = parseFloat(d[metric]);
  });
​
  values = raw.map(function(d) { return d[metric]; });
​
  // Offset so that positive is above-average and negative is below-average.
  mean = values.reduce(function(p, v) { return p + v; }, 0) / values.length;
​
  lookup = {};
  raw.forEach(function(d, i) {
    // makes sure lookup uses output of the formatter
    var date = dateformat(dateformat.parse(d.Date));
    lookup[date] = d;
  });
​
  data = dates.map(function(day, i) {
    var value = dateformat(day) in lookup
      ? lookup[dateformat(day)][metric] - mean
      : null;
    return [day, value];
  });
​
  // Render the chart.
  svg.data([data]).call(chart);
​
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + chartheight + ")")
    .call(xAxis);
});
​
​
</script>
​
    