D3 Examples - Area Chart Reusable Pattern

Area Chart Reusable Pattern

Average temperature in of Nottingham, England 1920-39. I'm assuming it is °F as the data doesn't specify. Data from https://vincentarelbundock.github.io/Rdatasets/datasets.html

Making use of d3.area and playing around with colors.

Also, I didn't anticipate this to look so jagged so I will probably add a brush to it later.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="areaChart.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .label {
      fill: black;
      text-transform: uppercase;
      font-size: 13px;
    }
  </style>
</head>
​
<body>
  <script>
        var body = d3.select("body")
        chart = areaChart(),
        parseTime = d3.timeParse('%m, %Y'),
        format = d3.timeFormat("%d-%b-%Y"),
        p2 = d3.timeParse("%d-%b-%Y");
    
    chart.width(+window.innerWidth)
        .height(+window.innerHeight)
    
    
        d3.csv('nottem.csv', function(d) {
      //get the data in the right format (i can't possibly be doing this right...)
      var time = d.time;
      year = time.slice(0, 4)
      //get the fraction of a year and convert to month as integer
      month = Math.ceil(time.slice(4,7) * 12 + 1);
      d.time = format(parseTime(month + ', ' + year))
      d.nottem = +d.nottem;
      return d;
    }, function(err, data) {
      if(err) throw new Error()
​
      d3.select('body')
        .datum(data)
        .call(chart)
    })
    
    
  </script>
</body>
​
    