Simplify time-series JSON data plotted in a D3.js area chart

Question

We're displaying time series data (utilisation of a compute resource, sampled hourly over months) on a stacked area chart using D3.js:

  d3.json("/growth/instance_count_1month.json", function( data ) {

    data.forEach(function(d) {
      d.datapoints = d.datapoints.map(
        function(da) {
          // NOTE i'm not sure why this needs to be multiplied by 1000
          return {date: new Date(da[1] * 1000),
                  count: da[0]};
      });
    });

    x.domain(d3.extent(data[0].datapoints, function(d) { return d.date; }));
    y.domain([0,
              Math.ceil(d3.max(data.map(function (d) {return d3.max(d.datapoints, function (d) { return d.count; });})) / 100) * 100
             ]);

The result is rather spiky for my tastes:

Is there an easy way to simplify the data, either using D3 or another readily available library? I want to reduce the spikiness, but also reduce the volume of data to be graphed, as it will get out of hand.

I have a preference for doing this at the UI level, rather than touching the logging routines (even though redundant JSON data will have to be transferred.)

Answer 1

You have a number of options, you need to decided what is the best way forward for the type of data you have and the needs of it been used. Without knowing more about your data the best I can suggest is re-sampling. Simply report the data at longer intervals ('rolling up' the data). Alternatively you could use a rolling average or look at various line smoothing algorithms.