HK Temperature Heatmap Interactive

<!DOCTYPE html>
<style>
.tooltip {
  position: absolute;
  text-align: center;
  width: 72px;
  height: 12px;
  padding: 8px;
  margin-top: -20px;
  font: 10px sans-serif;
  background: #fff;
  pointer-events: none;
}
</style>
<body></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>
d3.csv('VHHH_temperature_1997_2017.csv', rowProcessor, (error, data) => {
    if (error) throw error

plotHeatmap(data)
})

function rowProcessor ({date, min, max}) {
    return {
        date,
        min: +min,
        max: +max
    }
}

function plotHeatmap (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(width, height, margins)
    drawXAxis(g, xScale)
    drawYAxis(g, yScale)
    drawDots(g, xScale, yScale, colorScale, data)
}

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 defineColorScale () {
    return d3.scaleQuantile()
        .domain(d3.range(0, 40))
        .range([
            "#5E4FA2",
            "#3288BD",
            "#66C2A5",
            "#ABDDA4",
            "#E6F598",
            "#FFFFBF",
            "#FEE08B",
            "#FDAE61",
            "#F46D43",
            "#D53E4F",
            "#9E0142"
        ])
}

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) {
    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 drawDots(g, xScale, yScale, colorScale, data) {
    let minMax = 'max'
    function toggleMinMax () {
        minMax = minMax === 'max' ? 'min' : 'max'
        g.selectAll('rect')
            .attr('fill', d => colorScale(d[minMax]))
    }

const tooltip = d3.select('body')
        .append('div')
        .attr('class', 'tooltip')
        .attr('display', 'none')
    function showTooltip (d) {
        tooltip
            .text(`max: ${d.max} min: ${d.min}`)
            .style('display', 'inline')
            .style("left", (d3.event.pageX - 34) + "px")
            .style("top", (d3.event.pageY - 12) + "px")
    }

function dismissTooltip () {
        tooltip.style('display', 'none')
    }

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))
            .on('click', toggleMinMax)
            .on('mouseover', showTooltip)
            .on('mouseout', dismissTooltip)
            .on('mousemove', showTooltip)
}

</script>

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

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