I am attempting to create a horizon chart using D3.js and Horizon.js, inspired by this example from Jason Davies. I am working with fitness tracker data.
However, the example by Mike Bostock uses a unique JSON structure and performs some complicated row-to-column transformations, making it difficult to follow.
In my JSFiddle demo, nothing is rendered - not even an error message. My code and data resemble the following:
var data=[{"key":"active time","date":"05/13/2013","value":"3860.0"},{"key":"active time","date":"05/14/2013","value":"5167.0"},
{"key":"active time","date":"05/15/2013","value":"5663.0"},
{"key":"active time","date":"05/22/2013","value":"3371.0"},{"key":"distance","date":"05/13/2013","value":"5766.0"},{"key":"distance","date":"05/14/2013","value":"7472.0"},{"key":"distance","date":"05/15/2013","value":"8264.0"},{"key":"distance","date":"05/22/2013","value":"4989.0"},{"key":"steps","date":"05/13/2013","value":"7210.0"},{"key":"steps","date":"05/14/2013","value":"9481.0"},{"key":"steps","date":"05/15/2013","value":"10431.0"},{"key":"steps","date":"05/16/2013","value":"1006.0"},{"key":"steps","date":"05/22/2013","value":"6268.0"}];
data.forEach(function(d) {
var parseDate = d3.time.format("%m/%d/%Y").parse;
d.date = parseDate(d.date);
d.value = Math.round(+d.value);
});
var margin = {top:5, right:5, bottom:5, left:5},
height = 500 - margin.top - margin.bottom,
width = 500 - margin.left - margin.right;
var chart = d3.horizon()
.width(width)
.height(height)
.bands(1)
.mode("mirror")
.interpolate("basis");
var svg = d3.select("#body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.data([data]).call(chart);
I need assistance in understanding how to format my JSON data correctly for this visualization. Is this the issue at hand?
Thank you