Global Land Temperature - Line Chart

This line chart shows average land temperature in degrees celciusin both July and January from 1750. The data set is from Global Temperatures

Forked from Curran's Line Chart of Temperature

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Temperature Visualization</title>
    <style>
      .path-label {
       fill: #8E8883;
        font-size: 20pt;
        font-family: sans-serif;
      }
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #8E8883;
        font-size: 20pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 40pt;
        font-family: sans-serif;
      }
      .legend rect {
        fill:white;
        stroke:black;
        opacity:0.8;
      }

</style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      
      const xValue = d => d.dt;
      const xLabel = 'Time';
      const yValue = d => d.LandAverageTemperature;
      const yLabel = 'Temperature';
      const margin = { left: 120, right: 30, top: 20, bottom: 120 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 100)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scaleTime();
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .ticks(5)
        .tickSize(-innerHeight);

const yTicks = 5;
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(15)
        .tickSize(-innerWidth);

const line = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScale(yValue(d)))
        .curve(d3.curveBasis);

const row = d => {
        d.dt = new Date(d.dt);
        d.LandAverageTemperature = +d.LandAverageTemperature;
        return d;
        
      };

d3.csv('GlobalTemperatures.csv', row, data => {
        
        winter = data.filter(d => {
          return d.dt.getMonth() == new Date('2000-01-01').getMonth();
        });
        summer = data.filter(d => d.dt.getMonth() == new Date('2000-07-07').getMonth());

xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth]);

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice(yTicks);

g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'red')
            .attr('stroke-width', 4)
            .attr('d', line(summer))

g.append('text')
          .attr('class', 'path-label')
          .attr('x', innerWidth / 2)
          .attr('y', 60)
          .text('July')
        	 
        
        g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'steelblue')
            .attr('stroke-width', 4)
            .attr('d', line(winter));

g.append('text')
          .attr('class', 'path-label')
          .attr('x', innerWidth / 2 - 15)
          .attr('y', 230)
          .text('January')
                
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        
      });
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js