Trying to return a maximum date using d3.max

Question

I have code like the following:

var latestMth
d3.csv(barDataCSV_Mth, function(rows) {
    x = rows.map(function(d) {
        return {
            "month": parseDate(d.dt)
        };
    })
    latestMth = d3.max(d3.values(x));
});

the data in "barDataCSV_Mth" is like this:

measure,group,dt,amount
Revenue,B,11/1/2015,10
Revenue,B,12/1/2015,23456
Revenue,B,1/1/2016,2346
Revenue,B,2/1/2016,2346
Revenue,B,3/1/2016,656
Revenue,B,4/1/2016,346
Revenue,B,5/1/2016,2346
Revenue,B,6/1/2016,346
Revenue,B,7/1/2016,2346

Why is it returning 2015 as the max?

---

note

I'm using d3.v3.
The parse date function is: var parseDate = d3.time.format("%m/%d/%Y").parse;

Answer 1

d3.max:

Returns the maximum value in the given array using natural order

What you have now is an array of objects, and that's why it doesn't work.

Solution 1

One option is changing your x variable, so you have a flat array of values upon which d3.max can work:

x = rows.map(function(d) {
    return  parseDate(d.dt)
});
latestMth = d3.max(d3.values(x));

console.log(latestMth);//returns Fri Jul 01 2016

Solution 2

Alternatively, if you don't want to change x, don't use d3.values, which:

Returns an array containing the property values of the specified object.

Instead, use map.

As a matter of fact, this "solution 2" is the preferred solution, since map is the most common way to find the max/min in an array of objects using d3.max or d3.min:

latestMth = d3.max(x.map(d=>d.month));

Doing that, you can keep x as an array of objects:

x = rows.map(function(d) {
    return {
        "month": parseDate(d.dt)
    };
});
latestMth = d3.max(x.map(d=>d.month));

console.log(latestMth);//returns Fri Jul 01 2016