Problem with D3 Bar Chart


I am currently working on the Bar Chart project in the Data Visualization Certification portion. I am not getting the data to appear on the screen. I think it is the JSON extraction of the data that may be the problem, but nothing is for sure. Any help is appreciated.

Here is a link to the project:

Bar Chart

d3.json() is asynchronous. The function needs either a callback, a .then(), promise handling, or await/async. For instance,

const dataset = d3.json(""

could be modified to

const dataset = d3.json(""
.then((data) => {
...your code...

if you like .then(). Basically, d3.json() is doing something that may take a lot of time relative to program execution, and is allowing your code to do other things while it gathers your data and you have to account for that. In this case, the .then() says to wait for the data to arrive and then do stuff (...your code...) with the data object, which should contain the JSON you’re looking for if all goes well. There is much to read about the styles of asynchronous programming and the error handling that goes with it.

This is where all the asynchronous problems in the FCC curriculum start (and where I found out about async headaches too). Just be ready to do a lot of research. I’m finishing the Quality Assurance Projects and I still find new and inventive ways to screw up the async parts of my programs.

1 Like


Thanks for the help. This project just got a lot more complicated, lol, I thought this would just be a copy of the lesson with one or two modifications. (I know what you mean about the headaches, but that seems to be all of coding, lol)