Skip to content

Instantly share code, notes, and snippets.

@leoyuholo

leoyuholo/.block

Last active November 1, 2017 12:45
Show Gist options
  • Save leoyuholo/9d0e116122cb9cae5caeb491b3f13484 to your computer and use it in GitHub Desktop.
Save leoyuholo/9d0e116122cb9cae5caeb491b3f13484 to your computer and use it in GitHub Desktop.
Download ZIP
HK Temperature Heatmap Interactive
Raw
.block
license: mit
Raw
index.html
<!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>
Raw
VHHH_temperature_1997_2017.csv
date min max
1997-01 10 26
1997-02 11 26
1997-03 14 28
1997-04 19 29
1997-05 21 32
1997-06 23 32
1997-07 23 35
1997-08 25 37
1997-09 20 33
1997-10 19 32
1997-11 16 31
1997-12 12 27
1998-01 9 27
1998-02 9 27
1998-03 12 29
1998-04 19 33
1998-05 21 33
1998-06 22 33
1998-07 24 34
1998-08 25 35
1998-09 24 34
1998-10 21 33
1998-11 18 30
1998-12 14 28
1999-01 9 26
1999-02 12 28
1999-03 12 31
1999-04 18 32
1999-05 18 32
1999-06 25 35
1999-07 26 35
1999-08 24 36
1999-09 23 34
1999-10 20 33
1999-11 12 29
1999-12 5 24
2000-01 7 25
2000-02 8 25
2000-03 19 28
2000-04 19 29
2000-05 22 33
2000-06 22 34
2000-07 25 35
2000-08 25 35
2000-09 24 33
2000-10 19 33
2000-11 13 28
2000-12 11 26
2001-01 10 25
2001-02 10 27
2001-03 14 29
2001-04 15 33
2001-05 23 33
2001-06 24 35
2001-07 24 34
2001-08 25 35
2001-09 25 34
2001-10 21 33
2001-11 13 30
2001-12 8 29
2002-01 8 26
2002-02 9 26
2002-03 14 28
2002-04 17 33
2002-05 23 34
2002-06 24 35
2002-07 24 35
2002-08 24 35
2002-09 23 34
2002-10 18 31
2002-11 15 29
2002-12 6 29
2003-01 7 25
2003-02 12 27
2003-03 10 28
2003-04 19 32
2003-05 22 33
2003-06 24 34
2003-07 27 35
2003-08 25 35
2003-09 23 34
2003-10 20 32
2003-11 13 33
2003-12 10 27
2004-01 7 24
2004-02 7 26
2004-03 13 27
2004-04 18 32
2004-05 19 33
2004-06 25 36
2004-07 24 37
2004-08 25 36
2004-09 24 34
2004-10 20 32
2004-11 16 29
2004-12 7 27
2005-01 5 24
2005-02 8 26
2005-03 9 28
2005-04 14 30
2005-05 14 32
2005-06 19 34
2005-07 25 37
2005-08 24 34
2005-09 24 35
2005-10 20 34
2005-11 15 31
2005-12 10 26
2006-01 8 26
2006-02 10 26
2006-03 9 28
2006-04 15 33
2006-05 20 33
2006-06 23 35
2006-07 25 37
2006-08 25 34
2006-09 20 34
2006-10 23 32
2006-11 18 31
2006-12 12 29
2007-01 10 24
2007-02 11 26
2007-03 11 30
2007-04 12 31
2007-05 21 34
2007-06 23 35
2007-07 25 35
2007-08 25 35
2007-09 25 34
2007-10 21 33
2007-11 12 29
2007-12 12 27
2008-01 7 27
2008-02 7 21
2008-03 11 28
2008-04 17 31
2008-05 20 33
2008-06 24 34
2008-07 24 36
2008-08 24 34
2008-09 25 35
2008-10 23 32
2008-11 12 31
2008-12 10 27
2009-01 8 25
2009-02 15 29
2009-03 13 29
2009-04 17 30
2009-05 21 33
2009-06 24 34
2009-07 24 35
2009-08 25 36
2009-09 25 35
2009-10 23 33
2009-11 9 32
2009-12 10 25
2010-01 10 26
2010-02 7 29
2010-03 8 29
2010-04 13 29
2010-05 21 32
2010-06 21 34
2010-07 24 36
2010-08 25 35
2010-09 24 35
2010-10 16 34
2010-11 17 28
2010-12 5 28
2011-01 6 18
2011-02 8 28
2011-03 13 28
2011-04 18 31
2011-05 20 33
2011-06 24 36
2011-07 26 36
2011-08 25 36
2011-09 23 35
2011-10 21 31
2011-11 17 32
2011-12 10 25
2012-01 7 23
2012-02 9 27
2012-03 12 30
2012-04 19 31
2012-05 25 34
2012-06 26 34
2012-07 24 36
2012-08 26 36
2012-09 24 34
2012-10 18 31
2012-11 13 30
2012-12 7 27
2013-01 10 25
2013-02 11 27
2013-03 13 30
2013-04 16 31
2013-05 18 34
2013-06 23 36
2013-07 25 35
2013-08 25 34
2013-09 24 34
2013-10 19 32
2013-11 13 31
2013-12 9 25
2014-01 10 25
2014-02 6 26
2014-03 14 29
2014-04 18 30
2014-05 19 34
2014-06 25 36
2014-07 26 35
2014-08 24 36
2014-09 26 35
2014-10 23 35
2014-11 18 30
2014-12 11 26
2015-01 11 25
2015-02 11 28
2015-03 15 29
2015-04 15 32
2015-05 23 34
2015-06 25 36
2015-07 25 35
2015-08 25 37
2015-09 25 34
2015-10 19 33
2015-11 15 31
2015-12 11 28
2016-01 3 25
2016-02 8 28
2016-03 10 27
2016-04 20 30
2016-05 21 33
2016-06 25 36
2016-07 25 36
2016-08 25 35
2016-09 23 35
2016-10 21 32
2016-11 13 31
2016-12 11 27
2017-01 13 27
2017-02 10 26
2017-03 14 27
2017-04 16 31
2017-05 22 33
2017-06 25 35
2017-07 25 37
2017-08 25 37
2017-09 26 35
2017-10 20 35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment