Refactor duplicated chart size configuration and scale initialization

[jackfletch]

As noted (and found to be problematic) in #17, code similar to the following exist in all of the chart components:

const margin = {top: 20, right: 20, bottom: 20, left: 20};
const svgWidth = 540;
const svgHeight = 500;
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.top - margin.bottom;

const x = scaleLinear()
  .domain([0, maxDistance])
  .range([0, width]);
const y = scaleLinear()
  .domain([0, 1])
  .range([height, 0]);

Refactoring this duplicated configuration to a reusable component/function/hook would be wise.