Using own JSON data in D3

Question

I am following this d3.js example.

The data in this example is a csv file with the following structure:

name	code	pop
Albania	ALB	3153731
United States	USA	299846449
Great Britain	GBR	60244834

The data is loaded this way:

.defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop); })

Now I am trying to use my own modified data in JSON format.

test.json

 [{
        "name": "Albania",
        "code": "ALB",
        "pop": "0.111"
    },

    {
        "name": "United States",
        "code": "USA",
        "pop": "0.222"
    },
    {
        "name": "Great Britain",
        "code": "GBR",
        "pop": "0.333"
    }
 ]

To do this I just load my data instead of the dummy data:

var test = "test.json"

.defer(d3.json, test , function(d) { data.set(d.code, +d.pop);})

If I console.log the csv and the json, the resulting Objects look exactly the same. But with the json no map is loaded and with the csv the map is loaded.

When I console.log the csv data like this:

.defer(d3.csv,  "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { console.log("DATA : " , d.code)
  data.set(d.code, +d.pop);})

I see the values in the code column in the console.

If I do the same with the json:

.defer(d3.json, test, function(d) { console.log("DATA : " , d.code)
    data.set(d.code, +d.pop);})

Nothing appears in the console.

So my question is, why can I access the values in the csv with d.code and d.pop, but not in the json?

Answer 1

I found out what I was doing wrong.

I cant use this part:

defer(d3.json, test, function(d) { console.log("DATA : " , d.code)
    data.set(d.code, +d.pop);})

Because I cant use a row function with d3.json.

More information in this question

Answer 2

It seems to be that d in defer(d3.json, test , function(d) { is an array.

Try the following:

.defer(d3.json, test , function(d) { 
  d.forEach(({code, pop}) => data.set(code, +pop));
})