d3js grouped bar chart, is this possible? - d3.js

Question

I want to create a grouped bar chart where each bar is unique and not part of a series.
For example, imagine a bar chart showing the population of each major city, grouped by state.
Is this possible with d3js and any pointers on how to to get started?
Thanks

Answer 1

Yes it is possible!
As with most visualisation the process is one of working out the structure of the chart and then working out how to get the data in to that structure. In this case I think the data in it's simplest form is going to look something like this ...
let groups = [
{ name:'one', values:[1,3,6,2] },
{ name:'two', values:[3,5,7,3,2,5] },
{ name:'three', values:[9,2,5] },
{ name:'four', values:[6] }
];
An array of groups, where each group has some properties including an array of values to be represented as individual bars.
The tricky bit is working out the position of each group and each bar along the horizontal axis. The way I think about this is as follows: If we say each bar has a width of 1 unit, how much space do we want between the groups? Maybe a bar and a half, so 1.5 units. Now each group is going to take up space equal to the number of bars in it (the length of the values array) and the total width required by the chart will be the sum of those values plus the spaces between them.
i.e.
let dataWidth = d3.sum(groups, d=>d.values.length) + (groups.length-1) * groupPadding;
We also want to go through the groups and work out their "start position", where the group is placed horizontally in terms of bar units, like this:
let groupPadding = 1.5;
let currentWidth = 0;
groups = groups.map(group=>{
group.width = group.values.length;
group.startPosition = currentWidth;
currentWidth += group.width+groupPadding;
return group;
});
Next we need to make an x and a y-scale using d3-scale.
For the y-scale let's keep it simple and hard code the maximum value
const yScale = d3.scaleLinear()
.domain([0,10])
.range([chartHeight, 0]); // chart height is just your charts height in pixels
and for the x scale we use the dataWidth we calculated above as the maximum for the domain, we'll use this scale to convert bar units into screen pixels
const xScale = d3.scaleLinear()
.domain([0, barWidth)
.range([0, chartWidth]); //chartWidth, the width of your chart in pixels
OK. Now we have everything we need to know to draw the chart. The structure of the chart as I see envisage it...
Each group in groups is an svg g element positioned according to its startPosition. Each of those g elements contains a set of rect elements, one for each value. Inside the g element you may also want to put stuff like a group label.
Broadly this would look something like this...
Create the groups
const barGroups = chart.selectAll('g.bar-group')
.data(groups)
.enter()
.append('g')
.classed('bar-group', true)
.attr('transform', group=>`translate(${xScale(group.startPosition)}, 0)`);
Add the rectangles
barGroups.each(function(group){
const barGroup = d3.select(this);
barGroup.selectAll('rect')
.data(group.values)
.enter()
.append('rect')
.attr('width', xScale(1))
.attr('height', value => yScale(value))
.attr('x', (value, i) => xScale(i))
.attr('y', value => chartHeight - yScale(value));
Here's a bl.ock that puts it all together and fills in the gaps to give a working example: Grouped Bars