a responsive bar chart. open in a new window ↗️
to enjoy the buttery responsiveness
forked from micahstubbs‘s block: responsive bar chart
Note the React-ish renderBars
function, using the d3 v4 approach to selections
function renderBars() {
const updateSelection = layers.barGroup.selectAll('rect').data(data);
const enterSelection = updateSelection.enter().append('rect');
const mergeSelection = updateSelection.merge(enterSelection);
const exitSelection = updateSelection.exit();
enterSelection
.classed('rect', true)
.style('fill', faintGray)
.on('mouseover', onBarActive)
.on('mouseout', onBarInactive);
mergeSelection
.transition().duration(150)
.attrs({
x: (d) => xScale(xValue(d)),
width: xScale.bandwidth,
y: (d) => yScale(yValue(d)),
height: (d) => yScale(0) - yScale(yValue(d))
});
exitSelection
.on('mouseover', null)
.on('mouseout', null)
.remove();
}