Find the most recent date and output value by group

Question

I want to display the most recent value only for each group.

Example from CSV below: The total amount of Bagels, of the Cinnamon Raisin variety, were collected on three separate sampling periods: May 2017, March 2017, and November 2016 with their amounts being: 300, 100, and 20 respectively.

I've taken the year and month, combined them, and converted them into a number format so I can do a d3.max to locate the most recent (highest) value. The highest would be 42856 (May 2017), but I want to display the amount (300) instead of the d3.max amount.

breakfastItem,gluten,breakfastItemType,month,year,dateCode,value
Bagel,Yes,Cinnamon Raisin,May,2017,42856,300
Bagel,Yes,Cinnamon Raisin,March,2017,42795,100
Bagel,Yes,Cinnamon Raisin,November,2016,42675,20
Bagel,Yes,Blueberry,February,2017,42767,50
Bagel,Yes,Blueberry,November,2016,42675,30
Bagel,Yes,Blueberry,March,2016,42430,100
Bagel,Yes,Plain,February,2018,43132,200
Bagel,Yes,Plain,December,2017,43070,202
Bagel,Yes,Plain,February,2016,42401,201

Here was my Javascript:

d3.csv("Breakfast.csv",function(data) {
        data.forEach(function(d){
            d.value = +d.value;
            d.year = +d.year;
            d.dateCode = +d.dateCode;
        });

        var breakfastCombinations = d3.nest()
        .key(function(d) {return d.breakfastItem; })
        .key(function(d) {return d.breakfastItemType; })
        .rollup(function(oldestDate) { 
            return d3.max(oldestDate, function(d) {
                return d.dateCode; });
            })
        .entries(data);
        document.getElementById("breakfastjson").innerHTML = JSON.stringify(breakfastCombinations,false,2); 

    });

Which pops out my JSON as

 {
    "key": "Bagel",
    "values": [
      {
        "key": "Cinnamon Raisin",
        "value": 42856
      },
      {
        "key": "Blueberry",
        "value": 42767
      },
      {
        "key": "Plain",
        "value": 43132
      }
    ]
  }

But I want the "value" to be the total amount of Bagels of that type, instead of the dateCode. Like this:

  {
    "key": "Bagel",
    "values": [
      {
        "key": "Cinnamon Raisin",
        "value": 300
      },
      {
        "key": "Blueberry",
        "value": 50
      },
      {
        "key": "Plain",
        "value": 200
      }
    ]
  }

I want to use this dateCode to identify the information to display for a lot of different pieces of information (like Month, Year, etc.). I've tried combinations like:

        .rollup(function(oldestDate) { 
        return d3.max(oldestDate, function(d) {
            return d.dateCode; }).value;
        })

And

        .rollup(function(oldestDate) { 
        return d3.max(oldestDate, function(d) {
            return d.dateCode.value; });
        })

But I can't seem to find the right syntax to display it. Help!

Answer 1

You just need to sort the oldestDate array of objects and get the value property of the first one, which is the highest:

.rollup(function(oldestDate) {
    return oldestDate.sort(function(a, b) {
        return b.dateCode - a.dateCode
    })[0].value
});

Here is the demo:

 var csv = `breakfastItem,gluten,breakfastItemType,month,year,dateCode,value Bagel,Yes,Cinnamon Raisin,May,2017,42856,300 Bagel,Yes,Cinnamon Raisin,March,2017,42795,100 Bagel,Yes,Cinnamon Raisin,November,2016,42675,20 Bagel,Yes,Blueberry,February,2017,42767,50 Bagel,Yes,Blueberry,November,2016,42675,30 Bagel,Yes,Blueberry,March,2016,42430,100 Bagel,Yes,Plain,February,2018,43132,200 Bagel,Yes,Plain,December,2017,43070,202 Bagel,Yes,Plain,February,2016,42401,201`; var data = d3.csvParse(csv, function(d) { d.value = +d.value; d.year = +d.year; d.dateCode = +d.dateCode; return d; }); var breakfastCombinations = d3.nest() .key(function(d) { return d.breakfastItem; }) .key(function(d) { return d.breakfastItemType; }) .rollup(function(oldestDate) { return oldestDate.sort(function(a, b) { return b.dateCode - a.dateCode })[0].value }) .entries(data); console.log(breakfastCombinations) 

 <script src="https://d3js.org/d3.v4.min.js"></script>