D3 multi-series line chart from pivoted JSON

Question

There is a great example of a multi-series line chart here http://bl.ocks.org/mbostock/3884955 and if the tsv data were laid out I\'m sure it would look something like this:

Answer 1

The date in the example, is actually transformed somewhat to look like the data you have:

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, temperature: +d[name]};
    })
  };
});

The difference is that this data contains only arrays of arrays while your format contains array of objects, where each object contains the array inside the object as obj.Data.

It is easy to make the changes to make the demo run Demo.

The primary problem was how to calculate the min/max of the Date and Value for the scales:

In the original example:

x.domain(d3.extent(data, function (d) {
    return d.date;
}));

y.domain([
d3.min(cities, function (c) {
    return d3.min(c.values, function (v) {
        return v.temperature;
    });
}),
d3.max(cities, function (c) {
    return d3.max(c.values, function (v) {
        return v.temperature;
    });
})]);

For the changed format:

var minX = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Date; }) });
var maxX = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Date; }) });
var minY = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Value; }) });
var maxY = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Value; }) });

x.domain([minX, maxX]);
y.domain([minY, maxY]);