/* global d3 */

// D3 convention: define margin as an object called margin with these props:
let margin = {
  top: 10,
  right: 20,
  bottom: 25,
  left: 25
};
let width = 425 - margin.left - margin.right;
let height = 625 - margin.top - margin.bottom;

let svg = d3.select('.chart')
  .append('svg')
    // Match the size of the chart-containing <div>.
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', () => `translate(${margin.left},${margin.top})`);
// Everything below this line no longer needs to care about margins.

// At this point, the "svg" variable actually contains the <g> selection.
svg.append('rect')
  .attr('width', width / 2)
  .attr('height', height)
  .style('fill', 'lightblue')
  .style('stroke', 'green');

svg.append('rect')
  .attr('x', width / 2)
  .attr('width', width / 2)
  .attr('height', height)
  .style('fill', 'lightblue')
  .style('stroke', 'green');