I am working through Scott Murray's Interactive Data Visualization for the Web. The book is centered around d3 version 4 and I am trying to use d3 version 5. I am new to javascript, but it had been going fairly well until I came to the main difference between version 4 and 5, which is reading in data with promises.

I have been stuck on this example. I have made what I thought were the appropriate changes looking at other examples such as this one and the introduction to promises from the D3 author.

I have tried 2 approaches.

THe first only changes line 36 in the linked example above.

It has:

d3.csv("time_scale_data.csv", rowConverter, function(data) {

Where I have:

d3.csv("time_scale_data.csv", rowConverter).then(function(data){...

The second approach is trying to wrap everything up in an async function as I have seen so the beginning is

async function makePlot(){
            //Load in the data
                const dataset = await d3.csv("time_scale_data.csv", rowConverter)

I get the same result both ways. It renders some svg text Dec 31 for every data point, but dec 31 is not even a single point, and I can see values in the console, but none of the values match my csv.

How do I get this example to work with promises?

UPDATE:

This is embarrassing but I will leave this up for an example if anyone else is struggling with this.

The above works. I had one of the columns incorrectly labeled in the csv and had corrected it, but even with a hard refresh it still didn't fix it, I needed to hard refresh and remove the cache. Multiple hours of my life :(