d3.v4 linegraph with gradient

<!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;
    });

https://d3js.org/d3.v4.min.js