Question

I’m having some trouble with D3 and I’m hitting my wit’s end. Essentially I have a time series graph with arbitrarily many lines and the source data can’t be modified for convenience before hand (but it can be manipulated client-side).

The data is formatted thusly (with arbitrarily many labels):

object = [
{
  "_id": "2012-08-01T05:00:00",
  "value": {
    "label1": 1.1208746110529344,
    "label2": 0.00977592175310571
  }
},
{
  "_id": "2012-08-15T05:00:00",
  "value": {
    "label1": 0.7218920737863477,
    "label2": 0.6250727456677252
  },
  ....

I’ve tried something like:

var vis = d3.select.(element)
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

var line = d3.svg.line()
    .x(function(data) {return x(new Date(data._id));})
    .y(function(data) {return y(data.value);});


vis.append("svg:path")
    .attr("d", line(object))
    .attr("stroke", "black");

Which seems unable to access the correct value via the y accessor as I get an “error: problem parsing” and a lot of “NaNL3.384615384615385,NaNL6.76923076923077,NaNL10.153846153846155”. However if I hardcode the label value via something like:

.y(function(data) {return y(data.value.label1);});

It works just fine, but only for one line. Could anyone offer help?

Answer 1

I’d start by transforming the data into parallel arrays of the same format:

var series = ["label1", "label2"].map(function(name) {
  return data.map(function(d) {
    return {date: new Date(d._id), value: d.value[name]};
  });
});

(You can use d3.keys to compute the series names automatically, rather than hard-coding them as above.) Now series is an array of arrays. A single series, such as label1, will look something like this:

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344},
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477},
…

Since they have the same format, you can use the same line generator for all series:

var line = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y(d.value); });

And likewise the nested array lends itself well to a data-join to create the needed path elements:

svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line);