HK Temperature Heatmap workspace

<!DOCTYPE html>
<body>
  <svg></svg>
</body>
<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>
<script>
  function rowProcessor ({date, min, max}) {
    return {
      date,
      min: +min,
      max: +max
    }
  }

// function drawDots (g, data, xScale, yScale, colorScale) {
  //  g.selectAll('rect')
  //    .data(data)
  //    .enter().append('rect')
  //      .attr('x', d => xScale(moment(d.date).year()))
  //      .attr('y', d => yScale(moment(d.date).month() + 1))
  //      .attr('width', xScale.bandwidth())
  //      .attr('height', yScale.bandwidth())
  //      .attr('fill', d => colorScale(d.max))
  // }

// function defineColorScale () {
  //  return d3.scaleQuantile()
  //    .domain(d3.range(0, 40))
  //    .range([
  //      "#5E4FA2",
  //      "#3288BD",
  //      "#66C2A5",
  //      "#ABDDA4",
  //      "#E6F598",
  //      "#FFFFBF",
  //      "#FEE08B",
  //      "#FDAE61",
  //      "#F46D43",
  //      "#D53E4F",
  //      "#9E0142"
  //    ])
  // }

// function drawYAxis (g, yScale) {
  //  const yAxis = d3.axisLeft(yScale)
  //    .tickFormat(d => moment(d, 'M').format('MMMM'))
  //  g.append('g')
  //    .call(yAxis)
  // }

// function defineYScale (data, height) {
  //  return d3.scaleBand()
  //    .range([0, height])
  //    .domain(d3.range(1, 13))
  //    .padding(0.2)
  // }

// function drawXAxis (g, xScale) {
  //  const xAxis = d3.axisTop(xScale)
  //  g.append('g')
  //    .call(xAxis)
  // }

// function defineXScale (data, width) {
  //  return d3.scaleBand()
  //    .range([0, width])
  //    .domain(d3.map(data, d => d.date.substring(0, 4)).keys())
  //    .padding(0.2)
  // }

// function createCanvas (width, height, margins) {
  //  return d3.select('svg')
  //      .attr('width', width + margins.left + margins.right)
  //      .attr('height', height + margins.top + margins.bottom)
  //    .append('g')
  //      .attr('transform', `translate(${margins.left}, ${margins.top})`)
  // }

d3.csv('VHHH_temperature_1997_2017.csv', rowProcessor, (error, data) => {
    if (error) throw error

console.log(data)

// some constants
    const width = 860
    const height = 450
    const margins = { top: 20, right: 40, bottom: 30, left: 60 }

// const g = createCanvas(width, height, margins)

// const xScale = defineXScale(data, width)
    // drawXAxis(g, xScale)

// const yScale = defineYScale(data, height)
    // drawYAxis(g, yScale)

// const colorScale = defineColorScale()
    // drawDots(g, data, xScale, yScale, colorScale)

// make svg canvas
    const g = d3.select('svg')
        .attr('width', width + margins.left + margins.right)
        .attr('height', height + margins.top + margins.bottom)
      .append('g')
        .attr('transform', `translate(${margins.left}, ${margins.top})`)

// define x scale
    const x = d3.scaleBand()
      .range([0, width])
      .domain(d3.map(data, d => d.date.substring(0, 4)).keys())
      .padding(0.2)

// draw x axis
    const xAxis = d3.axisTop(x)
    g.append('g')
      .call(xAxis)

// define y scale
    const y = d3.scaleBand()
      .range([0, height])
      .domain(d3.range(1, 13))
      .padding(0.2)

// draw y axis
    const yAxis = d3.axisLeft(y)
      .tickFormat(d => moment(d, 'M').format('MMMM'))
    g.append('g')
      .call(yAxis)

// define color scale
    const color = d3.scaleQuantile()
      .domain(d3.range(0, 40))
      .range([
        "#5E4FA2",
        "#3288BD",
        "#66C2A5",
        "#ABDDA4",
        "#E6F598",
        "#FFFFBF",
        "#FEE08B",
        "#FDAE61",
        "#F46D43",
        "#D53E4F",
        "#9E0142"
      ])

// draw heatmap dots
    g.selectAll('rect')
      .data(data)
      .enter().append('rect')
        .attr('x', d => x(moment(d.date).year()))
        .attr('y', d => y(moment(d.date).month() + 1))
        .attr('width', x.bandwidth())
        .attr('height', y.bandwidth())
        .attr('fill', d => color(d.max))
  })
</script>

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

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js