D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://d3js.org/d3.v3.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js'></script>
  <style>
​
    body {
      font: 10px sans-serif;
    }
​
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
​
    .x.axis path {
      display: none;
    }
​
    .area {
      fill: steelblue;
    }
​
    .line {
      fill: none;
      stroke: red;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
​
  </style>
</head>
​
<body>
  <script>
    const margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
​
    const data = [
      {
        date: '10/21/15',
        trend: 94.72372325,
        yhat: 95.33189559,
        yhat_upper: 98.74627825,
        yhat_lower: 91.98742342
      },
      {
        date: '10/22/15',
        trend: 94.74314846,
        yhat: 95.56356027,
        yhat_upper: 98.8283039,
        yhat_lower: 92.32069554
      },
      {
        date: '10/23/15',
        trend: 94.76257367,
        yhat: 95.52172099,
        yhat_upper: 98.95385476,
        yhat_lower: 92.58206784
      },
      {
        date: '10/24/15',
        trend: 94.78199888,
        yhat: 95.41158996,
        yhat_upper: 98.80994939,
        yhat_lower: 92.07815075
      },
      {
        date: '10/25/15',
        trend: 94.80142409,
        yhat: 93.59095074,
        yhat_upper: 96.8056386,
        yhat_lower: 90.26438693
      },
      {
        date: '10/26/15',
        trend: 94.8208493,
        yhat: 94.23621808,
        yhat_upper: 97.79383244,
        yhat_lower: 90.9244863
      }
    ].map(o => {
      o.date = moment(o.date, 'M/D/YY').toDate();
      return o;
    });
    console.log('data', data);
​
    drawAreaGraph();
    // drawUpperValues();
​
    function drawUpperValues() {
      // const upperValuesData = data.map((d) => d.yhat_upper);
      const svg = d3.select('svg');
​
    }
​
    function drawAreaGraph() {
      const x = d3.time.scale()
        .range([0, width]);
​
      const y = d3.scale.linear()
        .range([height, 0]);
​
      const xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .tickFormat(d3.time.format('%Y-%m-%d'));
​
      const yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');
​
      const area = d3.svg.area()
        .x(function(d) { return x(d.date); })
        .y0(function(d) { return y(d.yhat_lower); })
        .y1(function(d) { return y(d.yhat_upper); });
​
      const svg = d3
        .select('body')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
      x.domain(
        d3.extent(
          data,
          d => d.date
        )
      );
      y.domain([
        d3.min(
          data,
          d => d.yhat_lower
        ),
        d3.max(
          data,
          d => d.yhat_upper
        )
      ]);
​
      svg.append('path')
        .datum(data)
        .attr('class', 'area')
        .attr('d', area);
​
      svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);
​
      svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis);
​
​
​
​
      // draw upper values
      const line = d3.svg.line()
        .x(d => d.date)
        .y(d => d.yhat_upper);
​
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.yhat_upper; })]);
​
      svg
        // .append('g')
        .append('path')
        .attr('class', 'line')
        .attr('d', line(data))
    }
​
  </script>
</body>
​
    