D3 Examples - HK Temperature Line Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
    .maxLine {
      stroke: red;
    }
    .minLine {
      stroke: blue;
    }
​
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
  </style>
</head>
​
<body>
  <script>
    function defineXScale(year, width) {
      return d3.scaleTime()
        .range([0, width])
        .domain([new Date(year, 0, 1), new Date(year, 11, 31)])
    }
    
    function createCanvas(width, height, margins) {
      return d3.select('body')
        .append('svg')
            .attr('width', width + margins.left + margins.right)
            .attr('height', height + margins.top + margins.bottom)
        .append('g')
            .attr('transform', `translate(${margins.left}, ${margins.top})`)
    }
    
    function drawXAxis (g, xScale, height) {
      const xAxis = d3.axisBottom(xScale)
                      .ticks(d3.timeMonth)
                      .tickFormat(d3.timeFormat("%B"));
​
      g.append('g')
        .attr('transform', `translate(0,${height})`)
        .call(xAxis)
    }
    
    function defineYScale(height) {
      return d3.scaleLinear()
        .range([0, height])
        .domain([40, 0])
    }
    
    function drawYAxis(g, yScale) {
      const yAxis = d3.axisLeft(yScale)
                                    .ticks(6)
      
      g.append('g')
        .call(yAxis)
    }
    
    function drawLines(g, xScale, yScale, data, attr) {
      const maxLine = d3.line()
                                 .x(d => xScale(d.date.toDate()))
                                 .y(d => yScale(d[attr]))
​
      g.append('path')
        .attr('class', `line ${attr}Line`)
        .attr('d', maxLine(data))
    }
    
    function plotLineChart(data) {
      console.log(data)
      const width = 860
      const height = 90
      const margins = { top: 20, right: 40, bottom: 30, left: 60 }
​
      const xScale = defineXScale(data[0].date.year(), width)
      const yScale = defineYScale(height)
      // const colorScale = defineColorScale()
​
      const g = createCanvas(width, height, margins)
      drawXAxis(g, xScale, height)
      drawYAxis(g, yScale)
      drawLines(g, xScale, yScale, data, 'min')
      drawLines(g, xScale, yScale, data, 'max')
    }
    
    function rowProcessor(row) {
      return {
        date: moment(row.date),
        max: +row.max_temperature,
        min: +row.min_temperature
      }
    }
    
    d3.csv('temperature_daily.csv', rowProcessor, (error, data) => {
      if (error) throw error
      
      plotLineChart(data.filter(d => d.date.year() === 1997))
      plotLineChart(data.filter(d => d.date.year() === 1998))
      plotLineChart(data.filter(d => d.date.year() === 1999))
      plotLineChart(data.filter(d => d.date.year() === 2000))
      plotLineChart(data.filter(d => d.date.year() === 2001))
    })
​
​
  </script>
</body>
​
    