JSFiddle - React, Tailwind, and code Playground

HTML

<select id="tree-select"></select>

JavaScript

data = [{group:'acid', date:1641,totals:8438}, 
{group:'acid', date:1641,totals:0},
{group:'acid', date:1641,totals:0},
{group:'beef', date:1641,totals:977.85},
{group:'beef', date:1641,totals:0},
{group:'beef', date:1641,totals:0},
{group:'beef', date:1641,totals:164},
{group:'beef', date:1642,totals:5.25},
{group:'beef (preserved)', date:1641,totals:245},
{group:'bi-product', date:1641,totals:0},
{group:'bird', date:1641,totals:121},
{group:'bird', date:1641,totals:0},
{group:'bird', date:1641,totals:12}]



function formatData(inputData){ 
    var array = d3.nest()
        .key(function(d){return d.group})
        .key(function(d){return d.date})
        .entries(inputData)
        .map(function(d){
            var group = d.key
            var values = d.values.map(function(dd){
                var date = dd.key
                var total = 0
                dd.values.forEach(function(ddd){
                    total = total + ddd.totals        
                })
                return {date:date, totals:total}
            })
            return {'group':group, 'values':values}
        })
    obj = {}
    array.forEach(function(d){
        obj[d.group] = d.values
    })
    return obj
}

newData = formatData(data)

console.log(newData) //easier to see on console.

    var dropdown = d3.select("#tree-select")
            .attr("class","dropdown") //for positioning menu with css
        .append("select"); 

    //create each option element within the incidentDropdown
    dropdown.selectAll("option")
        .data(newData)
        .enter()
        .append("option")
            .attr("value", function(d){ return d.key; })
            .text(function(d) {return d.key;}); 

all = d3.select("body").append('div')
all.append('h1').text('All data')
all.append('p').text(JSON.stringify(newData))

beef = d3.select("body").append('div')
beef.append('h1').text('Beef data')
beef.append('p').text(JSON.stringify(newData.beef))