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?

@KunalMukherjee I am planning to use an API that outputs JSON files, so this is unfortunately not an option. — gython
– gython, Commented Jun 4, 2021 at 18:25
Try defer(d3.json, test , function(d) { console.log('DATA: ', d); data.set(d.code, +d.pop);}) ... What do you see in the console? — Michael Rovinsky
– Michael Rovinsky, Commented Jun 4, 2021 at 19:03
@MichaelRovinsky I see three Objects in this format: 0: Object { name: "Albania", code: "ALB", pop: "0.111" } — gython
– gython, Commented Jun 5, 2021 at 12:10
@gython data looks valid. Can you print the data you pass to .selectAll(...).data(data_to_print).enter() — Michael Rovinsky
– Michael Rovinsky, Commented Jun 5, 2021 at 12:16

gython · Accepted Answer · 2021-06-05 20:15:28Z

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.

Comments

Michael Rovinsky · Accepted Answer · 2021-06-05 12:53:11Z

0

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));
})

answered Jun 5, 2021 at 12:53

Michael Rovinsky

7,2957 gold badges18 silver badges33 bronze badges

8 Comments

gython Over a year ago

This solution returns an object in this form: Object { } "$ALB": 0.111 "$GBR": 0.333 "$USA": 0.222 while the òbject which is created by parsing the csv looks like this: Object { "$USA": 0.527, "$GBR": 0.46, "$ARE": 0.72 }. In the first object which was created by parsing the json the brackets are empty.

Michael Rovinsky Over a year ago

@gython I'm not sure I understand it... What does it mean 'the brackets are empty' ? What do you get if you add console.log('LEN: ', d.length, ' TYPE: ', Array.isArray(d)) ?

gython Over a year ago

Sorry I wasnt very clear there. If I console.log the resulting map which is referenced by the data variable, the results for the json and csv file look different. If you look at my previous comment you see Object { } where the brackets are empty if I parse the json like in your proposed soloution. While in the second case the key-value pairs are IN the brackets.

gython Over a year ago

regarding your proposed console.log I get the following result: LEN: 3 TYPE: true

gython Over a year ago

I tried to add the json but it wont laod jsfiddle.net/#&togetherjs=y1w5qTmInF

|

Collectives™ on Stack Overflow

Using own JSON data in D3

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related