d3:russian-reactor-technology

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

CSS

svg {
  background: #fff1e5;
}

JavaScript

const reactors = [{
    year: 1987,
    russian: 5,
    nonRussian: 5,
  },
  {
    year: 1988,
    russian: 10,
    nonRussian: 10
  },
  {
    year: 1989,
    russian: 17,
    nonRussian: 13
  },
  {
    year: 1990,
    russian: 8,
    nonRussian: 9
  },
  {
    year: 1991,
    russian: 9,
    nonRussian: 10
  }, {
    year: 1992,
    russian: 10,
    nonRussian: 13
  }, {
    year: 1993,
    russian: 3,
    nonRussian: 5
  },
  {
    year: 1994,
    russian: 10,
    nonRussian: 15
  },
  {
    year: 1995,
    russian: 1,
    nonRussian: 8
  },
];

const minY = 0;
const maxY = d3.max(reactors, (d) => {
  return d.russian + d.nonRussian;
});

const width = 400;
const height = 300;

const margins = {
  top: 40,
  bottom: 40,
  left: 40,
  right: 30,
};

const xScale = d3.scaleBand()
  .domain(reactors.map(d => d.year))
  .range([margins.left, width - margins.right])
  .paddingInner(0.4)
  .paddingOuter(0.2)

const yScale = d3.scaleLinear()
  .domain([minY, maxY])
  .range([height - margins.bottom, margins.top])

const xAxis = createXAxis(xScale);
const yAxis = createYAxis(yScale);

const svg = renderSVG(width, height);

renderXAxis(svg, xAxis);
renderYAxis(svg, yAxis);
renderBlocks(svg, reactors, xScale);

function renderBlocks(svg, data) {

  const blockWidth = xScale.bandwidth();

  svg.append('g')
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', d => xScale(d.year))
    .attr('width', blockWidth)
    .attr('height', d => height - margins.bottom - yScale(d.nonRussian))
    .attr('fill', 'rgb(30, 143, 204)')
    .attr('y', d => {
      return yScale(d.nonRussian)
    })

  svg.append('g')
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', d => xScale(d.year))
    .attr('width', blockWidth)
    .attr('height', d => height - margins.bottom - yScale(d.russian))
    .attr('fill', 'rgb(243, 77, 91)')
    .attr('y', d => {
      return yScale(d.russian) - (height - margins.bottom -...