D3 Examples - d3.v4 linegraph with gradient

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
   <link rel="stylesheet" href="breeding-graph.css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="BreedingGraph.js"></script>
      <style>
        body {
          font-family: roboto;
          background-color: lightgray;
          margin: 0; padding: 12px;
​
        }
        breeding-box {
          display: inline-block;
          background-color: white;
        }
​
        breeding-box h1 {
          background-color: #226A9B;
          margin: 0;
          padding: 6px;
          color: white;
          text-align: center;
          font-weight: normal;
          font-size: 16pt;
        }
​
        breeding-box #chart {
          box-sizing: border-box;
          margin: 20px;
        }
    </style>
​
  </head>
  <body>
  <breeding-box>
    <h1>Max Count of Breeding Pairs 1994-2014</h1>
    <div id="chart"></div>
  </breeding-box>
    <script type="text/javascript">
      var parseTime = d3.timeParse("%y");
      var data = [
      {"year":"94","count":21},
      {"year":"96","count":16},
      {"year":"98","count":24},
      {"year":"00","count":58},
      {"year":"02","count":61},
      {"year":"04","count":81},
      {"year":"06","count":38}
    ].map((d) => {
      // convert from string to Date object
      d['year'] =parseTime(d['year']);
      // coerce count from string to float
      d['count'] = +d['count'];
      return d;
    });
​
    const breedingGraph = new BreedingGraph().mount(document.querySelector("breeding-box #chart"));
    breedingGraph.render(
      data,
      {
      getX: (d) => { return d.year; },
      getY: (d) => { return d.count; },
      gradientStops: [
        {offset: "0%", color: "#4CD9E6"},
        {offset: "100%", color: "#6085CE"}
      ],
      dim: {width: 700, height: 280},
      dotRadius: 5
     })
    </script>
  </body>
</html>
​
    