Get data from CSV for history Project | d3

I have a CSV file like this:

War,Deathrange,Geometricmean(Note 1),Date,Combatants,Location,Notes
Conquests of Cyrus the Great,"100,000+","100,000",549 BC–530 BC,Persian Empire vs. various states,Middle East,"Number given is the sum of all deaths in battle recorded by writers during this time period, does not take into account civilian deaths, the actual number may be much greater."
Greco–Persian Wars,"73,800+","73,800",499 BC–449 BC,Greece vs. Persian Empire,Greece,

Containing all documented wars until now. I want to build a scatterplot with an X-Axis containing the data and an yAxis with the deathrange.

It seems I lack basic understanding of how to parse / how to get these values with d3 version 5.

I did:

    const yAccessor = d => d.Deathrange
    const dateParser = d3.timeParse("%Y-%m-%d")
    const xAccessor = d => dateParser(d.Date);

This is how I scaled:

   const yScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yAccessor))
        .range([dimensions.boundedHeight, 0])

    const xScale = d3.scaleTime()
        .domain(d3.extent(dataset, xAccessor))
        .range([0, dimensions.boundedWidth])

To display the scatter-dots I did:

   let dots = bounds
        .attr("cx", d => xScale(xAccessor(d)))
        .attr("cy", d => yScale(yAccessor(d)))
        .attr("r", 5);

By doing this, console is logging:

Unerwarteter Wert NaN beim Parsen des Attributs cx.
(Unexpected value NaN parsing attribute cx)

Do I need to change the date value (x) (As introduced above

const dateParser = d3.timeParse("%Y-%m-%d")
    const xAccessor = d => dateParser(d.Date);

Into a number value? How do I do this to place the dots on the chart?

Many thanks!

I’m gonna go out on a limb here and say your time parser is throwing a “WTF is that date” at you.

What date would you expect it to give you, with that input?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.