O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Defining the data and the transition

Let's start by looking at the data:

var data = initEmpty(totalDatapoints, numberSeries); var stack = d3.stack().offset(d3.stackOffsetWiggle)     .keys(d3.range(numberSeries).map(function(d) {return d}));  function initEmpty(totalDatapoints, numberSeries) {   return d3.range(totalDatapoints).map(function(nc) {       return d3.range(numberSeries).reduce(function(res, mc) {           res[mc] = 0.7; return res;       }, {id: nc});   }) }

We initialize the data array with empty data, and then pass this data to the d3.stack() function, which prepares the data, so that we can use it with the d3.area generator. If you look at the initEmpty function, you can see that we create a structure which looks like this:

We create an array which ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required