D3.js moving from tsv to json with nested array

Question

I am learning d3.js by following tutorials and trying to read example available (thanks mike).

In this example: http://bl.ocks.org/mbostock/3884955, I have trouble understanding how to move from a tsv to a nested json. I have the json and it is working if the data is not nested (see at the bottom). I have modified the code from:

   d3.tsv( "d3-multi-series-line-chart-data.tsv", function( error, data ) {
          color.domain( d3.keys( data[0] ).filter( function( key ) {
                return key !== "date";
          } 
));
...

to:

d3.json( "d3-multi-series-line-chart-data.json", function( error, data ) {
           color.domain( d3.keys( data[0] ).filter( function( key ) {
                return key !== "date";
           } 
));
...

[edit] I have the gut feeling the modification needed lies within the following piece of code:

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

But I failed to see how to access each city's temperature on the modified json. [/edit]

I have tried to call the key temperature, but to no avail. I have looked at a few example over here and at the documentation, but I feel stupid for not understanding. So if someone could be nice enough to show me, that would be very much appreciated.

Currently the json structure is as follow:

[
   {
      "date":"20111001",
      "New York":"63.4",
      "San Francisco":"62.7",
      "Austin":"72.2"
   },
   {
      "date":"20111002",
      "New York":"58.0",
      "San Francisco":"59.9",
      "Austin":"67.7"
   },
   {
      "date":"20111003",
      "New York":"53.3",
      "San Francisco":"59.1",
      "Austin":"69.4"
   },
   ...
]

What I want is the following:

[
   {
      "date":"20111001",
      "temperature":{
         "New York":"63.4",
         "San Francisco":"62.7",
         "Austin":"72.2"
      }
   },
   {
      "date":"20111002",
      "temperature":{
         "New York":"58.0",
         "San Francisco":"59.9",
         "Austin":"67.7"
      }
   },
   {
      "date":"20111003",
      "temperature":{
         "New York":"53.3",
         "San Francisco":"59.1",
         "Austin":"69.4"
      }
   },
   ...
 ]

Regardless of what data structure you use to start with, you will have to transform it into something that resembles what's used in the example. Also, there're more suitable examples if you want to work with nested structures. — Lars Kotthoff
– Lars Kotthoff, Commented Oct 21, 2013 at 19:47
What I'm saying is that there may be more gentle ways to learn D3 :) — Lars Kotthoff
– Lars Kotthoff, Commented Oct 22, 2013 at 8:19

Lars Kotthoff · Accepted Answer · 2013-10-23 09:08:09Z

1

To start with, the easiest thing to do is to simply convert your nested structure to something the example can work with. The code would look something like this.

var flat = [];
json.forEach(function(d) {
  d.temperature.forEach(function(e) {
    e.date = d.date;
    flat.push(e);
  });
});

On a general note, I would advise having your numbers as numbers in the JSON and not strings (i.e. without the quotes).

answered Oct 23, 2013 at 9:08

Lars Kotthoff

110k16 gold badges210 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

D3.js moving from tsv to json with nested array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related