d3:area-experiment

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 margins = {
  top: 10,
  bottom: 50,
  left: 40,
  right: 20,
};

const data = [{
    x: 0,
    y1: 2,
    y2: 3
  },

  {
    x: 1,
    y1: 3,
    y2: 5
  },

  {
    x: 2,
    y1: 2,
    y2: 8
  },
  {
    x: 3,
    y1: 5,
    y2: 7
  },
  {
    x: 4,
    y1: 3,
    y2: 6
  },
  {
    x: 5,
    y1: 2,
    y2: 3
  },
  {
    x: 6,
    y1: 4,
    y2: 5
  },
  {
    x: 7,
    y1: 3,
    y2: 8
  },
  {
    x: 8,
    y1: 3,
    y2: 5
  },
  {
    x: 9,
    y1: 4,
    y2: 5
  },
  {
    x: 10,
    y1: 1,
    y2: 9
  },

];



const width = 700;
const height = 400;

const svg = renderSVG(width, height);

const xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([margins.left, width - margins.right])

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

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const area = d3.area()
  .x(d => xScale(d.x))
  .y0(d => yScale(d.y1))
  .y1(d => yScale(d.y2))

svg.append('path')
  .datum(data)
  .attr('d', area)
  .attr('fill', 'red')

svg.append('g').attr('transform', `translate(0 , ${height - margins.bottom})`).call(xAxis);
svg.append('g').call(yAxis).attr('transform', `translate(${margins.left}, 0)`);

function renderSVG(width, height) {
  return d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);
}