Question

I am using jQuery to bring in a string of comma-delimited numbers for plotting purposes in D3. I’m trying to get the max of this array but it is not going well.

var x_data = $('.CostImport').text().split(',');
var y_data = $('.PriceImport').text().split(',');
var r_data = $('.SalesImport').text().split(',');
var c_data = $('.ZoneImport').text().split(',');


 for (i = 0; i < x_data.length; i++) {
   data.push({ "x": x_data[i], "y": y_data[i], "c": c_data[i], "r": r_data[i] });
   }

alert(d3.max(r_data));
alert(d3.max(data, function (d) { return d.r }));

Both of these alert pass me the same number, which is incorrect. The actual max is 928870 but I am getting back 9975. Plotting everything works fine (scatter plot, with r determining size and c color), so I’m a bit flummoxed why I can’t pull the maximum number.

Any ideas?

Answer 1

It sounds like the values are being treated as strings. You will need to use parseInt or parseFloat (depending on the precision of the values) to convert them to integers for the max function to work as you are expecting.

Here’s a quick function to convert a string array to int. This would be better prototyped, but for a quick and dirty example this will work:

function toIntArray(arr) {
    for (var i = 0; i < arr.length; i++) { 
        arr[i] = +arr[i]; 
    } 
    return arr;
}

Keep your code as is, but amend these lines:

r_data = toIntArray(r_data);
data = toIntArray(data);

alert(d3.max(r_data));
alert(d3.max(data, function (d) { return d.r }));