I've created a grouped bar chart and am trying to set the y domain to the largest bar value. Doing that rather than a static number that has to be changed depending on the data. I'm confused on how to use d3.max()
with multiple columns in a CSV file. And I'm trying to make it so you don't have to use a specific column name, since that may be different in other CSV files. Right now the column names are cat1, cat2, and cat3. I'm using D3 v7
Data
name,cat1,cat2,cat3
Item 1,50,102,302
Item 2,79,140,330
Item 3,200,180,120
Item 4,104,80,83
Item 5,90,320,130
Item 6,85,114,130
I kind of understand how to use d3.max()
but definitely not in a situation like this.
Here's how I'm currently using it. You'll see I have a 350
set in the y domain. And I'm simply trying console log the max value, for now. I realize I'm not doing this correctly but am not sure how to.
D3
const data = await d3.csv(src);
console.log(d3.max(data, d => {
return d;
}));
// returns {name: 'Item 1', cat1: '50', cat2: '102', cat3: '302'}
// Would like to use the max value
// rather than 350
y.domain([350, 0])
.range([0, height]);
Thank you for your help.
I modified the code for the SVG within the container
and get dynamically max value from csv file