How would d3.js difference chart example work with json data?

Question

I have been struggling to get this example:

http://bl.ocks.org/mbostock/3894205

...

Answer 1

The problem is that all your data is nested in a data element. You need to update the code to reflect that. Specifically, the lines

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

y.domain([
    d3.min(data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
    d3.max(data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
]);

svg.datum(data);

need to be changed to

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

y.domain([
    d3.min(data.data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
    d3.max(data.data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
]);

svg.datum(data.data);