HK Temperature Heatmap

<!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
  }
}
d3.csv('VHHH_temperature_1997_2017.csv', rowProcessor, (error, data) => {
  if (error) throw error

plot(d3.select('svg'), data)
})

function plot (svg, data) {
  console.log(data)

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

const xScale = defineXScale(data, width)
  const yScale = defineYScale(data, height)
  const colorScale = defineColorScale()

const g = createCanvas(svg, width, height, margins)
  drawXAxis(g, xScale)
  drawYAxis(g, yScale)
  drawDots(g, xScale, yScale, colorScale, data)
}

function drawDots(g, xScale, yScale, colorScale, data) {
  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 drawXAxis (g, xScale) {
  const xAxis = d3.axisTop(xScale)

g.append('g')
    .call(xAxis)
}

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

g.append('g')
    .call(yAxis)
}

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

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 defineYScale (data, height) {
  return d3.scaleBand()
    .range([0, height])
    .domain(d3.range(1, 13))
    .padding(0.2)
}

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

</script>

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

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