Skip to content

Instantly share code, notes, and snippets.

@leoyuholo

leoyuholo/.block

Last active November 1, 2017 06:07
Show Gist options
  • Save leoyuholo/9c2209fdcaddb3eaf90c48de6aeec844 to your computer and use it in GitHub Desktop.
Save leoyuholo/9c2209fdcaddb3eaf90c48de6aeec844 to your computer and use it in GitHub Desktop.
Download ZIP
HK Temperature Heatmap mono
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<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>
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
console.log(data)
// some constants
const width = 860
const height = 450
const margins = { top: 20, right: 40, bottom: 30, left: 60 }
// make svg canvas
const g = 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})`)
// 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>
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