understanding-sampling/src/js/d3/init-barcharts.js

export default (selection, options) => {
  // difference bar chart
  const resultGroup = selection.append('g').attr('class', 'poll-result');
  const differenceGroup = resultGroup.append('g').attr('class', 'poll-result__differences');
  const rasterGroup = resultGroup.append('g').attr('class', 'poll-result__raster');
  const step = 18;
  const yposRectDiff = i => (i * step + options.height / 2.1);
  const fontsize = 16;
  const distance = (options.width - options.xoffset * 2) / (options.numberOfCols - 1);

  // single difference bar chart
  // consisting of a rectanlge
  differenceGroup.selectAll('rect.diff')
    .data(options.data)
    .enter()
    .append('rect')
    .attr('class', 'diff')
    .attr('x', options.width / 2)
    .attr('y', (d, i) => yposRectDiff(i))
    .attr('height', options.barHeight)
    .attr('width', 0)
    .attr('fill-opacity', 0)
    .attr('fill', d => d.color);

  // ... and text
  differenceGroup.selectAll('text.difftext')
    .data(options.data)
    .enter()
    .append('text')
    .attr('class', 'difftext')
    .attr('text-anchor', 'middle')
    .style('font-size', fontsize)
    .attr('x', 0)
    .attr('y', (d, i) => (yposRectDiff(i) + fontsize - 2))
    .attr('fill', d => d.color)
    .attr('fill-opacity', 0)
    .text('');

  // grid of difference bar charts
  for (let x = 0; x < options.numberOfCols; x += 1) {
    for (let y = 0; y < 2; y += 1) {
      if (!(x === options.numberOfCols - 1 && y === 1)) {
        const subgroup = rasterGroup.append('g').attr('class', 'poll-result__raster-item');

        subgroup.selectAll('rect.diffgrid')
          .data(options.data)
          .enter()
          .append('rect')
          .attr('class', `gridbar diff${x}${y}`)
          .attr('x', options.xoffset + x * distance)
          .attr('y', (d, i) => (options.yoffset + i * step + options.yoffsetSecRow * y))
          .attr('height', options.barHeight)
          .attr('width', 0)
          .attr('fill-opacity', 1)
          .attr('fill', d => d.color);

        subgroup.selectAll('text.diffgrid')
          .data(options.data)
          .enter()
          .append('text')
          .attr('class', `difftext${x}${y}`)
          .attr('text-anchor', 'middle')
          .style('font-size', 18)
          .attr('x', 0)
          .attr('y', (d, i) => (options.yoffset + i * step + options.yoffsetSecRow * y + fontsize - 2))
          .attr('fill', d => d.color)
          .attr('fill-opacity', 0)
          .text('0');
      }
    }
  }
};