Bar chart challenge update for D3 v6

Hi! I’m not sure if this is the right place to post this, redirect me if it’s not.

I was going through the Bar chart challenge, recreating the demonstrated codepen but it didn’t work properly. Found out that D3 v6 has made changes that need update for that demo. I made changes in this codepen, to update for D3 v6.

Changes:

  1. d3.json is a promise now.
  2. d3 event management has changes to its callback function.

Updated Code

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

Yes the most recent version of d3.js introduced some changes which are not backwards compatible.

What do you mean by it didn’t work properly? Your code is failing to pass one test but even the example project which you used is also not passing the same test.

I mean I tried to recreate the code importing the recent iteration of d3, not knowing it isn’t backwards compatible, so it just seemed like it isn’t working properly… even when I recreated 1:1. It sounds stupid now (lol), but I was none the wiser about its backward compatibility back then.

My code (not really mine, I just added few lines to the demo) is passing all the tests for me. Which test is failing for you?

Anyway, I just wanted to put it out there and save someone else from losing their hair too. At first glance and few google searches later, it’s not explicitly clear that v6 doesn’t support the similar event management as in v5 and under.

Test 10.

10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.