working on D3 project:
Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.
I’m struggling being able to read in the JSON data with:
d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(data) {
console.log(data.data[0])
});
the console shows nothing, and if I try to work with (data) it appears to not be working. What am I doing wrong?
Try it like this.
d3.json(“https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json ”).then((data)=>console.log(data.data[0]))
I logged d3.json function after invoked with url argument and saw a promise so I figured it was “thenable”
They must’ve changed it since verison 4. I tried to look through the docs for about 10 seconds to find the actual documentation to see what else they might’ve added but I remembered d3’s docs gave me nightmares, so I’ll leave the rest to you.
1 Like
Any idea why it wouldn’t work without “then”? The example they provide uses d3.json without it:
Yes. I stated why I think it’s not working. That FCC example is using version 4.2.2. I’m assuming you are using 5 or greater and that’s why the json call wasn’t working in that fashion.
EDIT : Here you go:
# Changes in D3 5.0
[Released March 22, 2018.](https://github.com/d3/d3/releases/tag/v5.0.0)
D3 5.0 introduces only a few non-backwards-compatible changes.
D3 now uses [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises) instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support [async and await](https://javascript.info/async-await). (See this [introduction to promises](https://beta.observablehq.com/@mbostock/introduction-to-promises) on [Observable](https://beta.observablehq.com).) For example, to load a CSV file in v4, you might say:
```js
d3.csv("file.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
```
In v5, using promises:
```js
d3.csv("file.csv").then(function(data) {
console.log(data);
This file has been truncated. show original
1 Like