I can't get the column max values from my csv file.(Javascript D3)

Question

So I'm trying to make a scatter plot graph that takes input from 2 drop down menus. Once the choices are made, that'll choose 2 of the columns in the csv file.

However, the max values vary between the choices, so i need the program to change with the varying choices made by the user. So in the snippet of code which is going to be responsible for it, I feel that the syntax makes sense. The end result is that I tried storing the results in 2 separate variables and printing to the console, and the results come out as "undefined", but no errors. So I'm not sure where the issue is coming from. If i hard code the columns and axis for any singular choice, the points show up no problem. But because I've set it dynamically, there aren't any values being captured I guess. Any help is appreciated.

d3.csv("datafile.csv",function(data){
var xMx = d3.max(data,function(d) { return d.xvalue; } );
var yMx = d3.max(data,function(d) { return d.yvalue; } );
console.log(xMx);[enter image description here][1]
//x-axis
var x = d3.scaleLinear().domain([0,xMx])

The version is:4.13.0 I've tried including the csv file. https://i.stack.imgur.com/kq8Aq.jpg

Answer 1

d3.csv() does not automatically convert strings to numbers. I would recommend reading in the data, using d3.csv() 's row argument to properly handle the data, and only then finding the max using d3.max() 's accessor.

Since you're using D3 4, it'd be something like

d3.csv("datafile.csv", r => {
    // this function returns a new object for each row.
    // the + is common shorthand for parseFloat()

    return {
        xvalue: +r.xvalue,
        yvalue: +r.yvalue
    };
}, data => {
    let xMx = d3.max(data, d => d.xvalue);
    let yMx = d3.max(data, d => d.yvalue);
    console.log(xMx, yMx);
});