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.

Built with blockbuilder.org

<!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>

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