CODEWITHSUNDEEP
javascriptd3.js
seth127
seth127

Reputation: 2744

Find the max value in a column in d3.js

This seems really simple, but I can't seem to figure it out. Most of my background is in Python and R and this would be exceedingly simple, but I can't figure out how to do it in D3.

How do I find the max value in a column?

For example, say I have a csv:

country,gdp
USA,55
Japan,22
Kuwait,10

I load it in to D3 with 

    function getData() {
        d3.csv("gdp.csv", function(d) {
            gdpData = d;
        });   
    }

now how do I do this? I just want to return the value 55 (the highest value in the gdp column).

In Python, this would just be np.max(gdpData['gdp']) or in R max(gdpData$gdp).

I have tried Math.max(gdpData.gdp) and Math.max(gdpData['gdp']) and a variety of other things using .keys() but to no avail. I think I am just fundementally misunderstanding how D3 is representing the table of data.

Thanks for the help.

Upvotes: 1

Views: 5820

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

(this is just an addendum to sparta's answer)

You have two initial problems here:

  1. I don't know the rest of your code, but it seems to me that you're trying to assign the data array to a global called gdpData. That won't work because d3.csv is asynchronous. Besides that, d3.csv won't return anything, so you cannot assign it to the variable either.
  2. You're using d as the first parameter in the callback function. Don't do that, it introduces an unnecessary confusion, since d is normaly used in idiomatic D3 as the datum parameter in most of anonymous functions. Use data, dataset, myData or anything like.

That all being said, change your function to this:

d3.csv("gdp.csv", function(data) {
    //code here
});

So, after this first step, let's see what d3.csv does:

Given your CSV, d3.csv creates an array of objects, where the property name is the CSV header and the property value is the following rows. In your case, this is the data array (check the console):

var data = d3.csvParse(d3.select("#csv").text());
console.log(data);
pre{
  display:none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">country,gdp
USA,55
Japan,22
Kuwait,10</pre>

(note: I'm using a pre element to load the data because I can't upload a CSV in the Stack snippet)

Then, to get the maximum value, just use the code in sparta's answer, with d3.max, which:

Returns the maximum value in the given array using natural order. If the array is empty, returns undefined. An optional accessor function may be specified, which is equivalent to calling array.map(accessor) before computing the maximum value.

So, since you have an array of objects, you'll need:

var max = d3.max(data, d => d.gdp);

Which is the same of:

var max = d3.max(data.map(d => d.gdp));

The data.map returns this array:

["55", "22", "10"]

And d3.max finds the highest value in that returned array. Pay attention to the fact that d3.csv parses the CSV values as strings (as you can see in the above array), not numbers, even if the values are originally numbers.

Check the demo:

var data = d3.csvParse(d3.select("#csv").text());
var max = d3.max(data, d => d.gdp);
console.log(max);
pre{
  display:none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">country,gdp
USA,55
Japan,22
Kuwait,10</pre>

Upvotes: 1

sparta93
sparta93

Reputation: 3854

After loading your data, you can do the following to get the max:

var max = d3.max(gdpData, function(d) { return d.gdp; } );

This link will probably be helpful for you to understand the different operations you can do on arrays via d3.

Upvotes: 2

Related Questions