responsive bar chart

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();
}

forked from jfsiii‘s block: responsive bar chart