d3article-en2.2

const legendContainer = d3.select('.legend');

const legends = legendContainer
  .append('svg')
  .attr('width', 150)
  .attr('height', 353)
  .selectAll('g')
  .data(regionsIds)
  .enter()
  .append('g')
  .attr('class', 'legend-item')
  .attr('transform', (regionId, index) => `translate(0,${ index * 20 })`)
  .on('click', clickLegendHandler);

legends.append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', 12)
  .attr('height', 12)
  .style('fill', regionId => colorScale(regionId))
  .select(function() { return this.parentNode; })
  .append('text')
  .attr('x', 20)
  .attr('y', 10)
  .text(regionId => regionsNamesById[regionId])
  .attr('class', 'textselected')
  .style('text-anchor', 'start')
  .style('font-size', 12);