Skip to content

Instantly share code, notes, and snippets.

@a10k

a10k/index.html

Created November 30, 2015 10:49
Show Gist options
  • Save a10k/00947b6f336ef9c9104a to your computer and use it in GitHub Desktop.
Save a10k/00947b6f336ef9c9104a to your computer and use it in GitHub Desktop.
Download ZIP
uk temp
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UK Temperature History</title>
<link rel="stylesheet" href="http://charts.animateddata.co.uk/uktemperaturelines/css/reset.css">
<link rel="stylesheet" href="http://charts.animateddata.co.uk/uktemperaturelines/css/style.css">
<style>
body,html{
background-color: #fff
}
html::-webkit-scrollbar {
display: none;
}
path{
stroke:#002776 !important;
}
line{
stroke:#00A1DE !important;
}
</style>
</head>
<body>
<div id="chart">
<svg>
</svg>
</div>
<div id="widgets">
<div id="header">
<h1 style="color:#002776">UK Temperature History</h1>
<p>Explore the temperature in the United Kingdom since 1910 by scrolling the page <span class="emphasis">up</span> and <span class="emphasis">down</span>. Visit years marked in <span style="color: indianred;">red</span> or <span style="color: steelblue;">blue</span> that have significant weather events. You can also sort by <span class="emphasis">year</span>, <span class="emphasis">maximum</span>, <span class="emphasis">minimum</span> or <span class="emphasis">mean</span> temperature</p>
</div>
<div id="menu">
</div>
<div id="info">
</div>
</div>
<script src="http://charts.animateddata.co.uk/uktemperaturelines/js/jquery-1.10.2.min.js"></script>
<script src="http://charts.animateddata.co.uk/uktemperaturelines/js/d3.v3.min.js"></script>
<script src="http://charts.animateddata.co.uk/uktemperaturelines/js/underscore-min.js"></script>
<script type="text/javascript">
// Copyright 2013 Peter Cook @prcweb prcweb.co.uk
var chart = {
data: null,
xScale: null,
yScale: null,
svgLine: null,
colorScale: null,
perspectiveOffsetX: 4,
perspectiveOffsetY: 4,
chartHeight: 500,
lineWidth: 400,
lineHeight: 90,
bodyHeight: 2000, // Scroll height
windowHeight: 0,
scrollScale: null,
menu: [
{'label': 'Year', 'sortBy': 'year'},
{'label': 'Maximum', 'sortBy': 'max'},
{'label': 'Minimum', 'sortBy': 'min'},
{'label': 'Mean', 'sortBy': 'mean'}
],
uiState: {
selectedIndex: 0,
selectedDatum: null, // Automatically updated
sortBy: 'year',
sorting: false
},
sortFunction: {},
openingTimer: null,
translate: function(x, y) {return 'translate('+x+','+y+')';},
init: function() {
var data = {};
var dataset = _.map(this.data.meanTemp, function(data, k) {
var yearAve = _.reduce(data, function(m, v) {return m + v;}, 0) / 12;
var yearMax = _.max(data);
var yearMin = _.min(data);
return {year: +k, data: data, mean: yearAve, max: yearMax, min: yearMin};
});
this.data.meanTemp = {data: dataset.reverse() , extent: [-2, 16]};
d3.select('body').style('height', this.bodyHeight + 'px');
this.windowHeight = $(window).height();
this.scrollScale = d3.scale.linear().domain([0, this.bodyHeight - this.windowHeight * 0.99]).range([0, 102]).clamp(true);
this.sortFunction.year = function(a, b) {return d3.descending(a.year, b.year);}
this.sortFunction.mean = function(a, b) {return d3.descending(a.mean, b.mean);}
this.sortFunction.max = function(a, b) {return d3.descending(a.max, b.max);}
this.sortFunction.min = function(a, b) {return d3.ascending(a.min, b.min);}
this.initChart();
this.initEvents();
this.initMenu();
},
initMenu: function() {
var that = this;
d3.select('#menu')
.text('Sort by: ')
.selectAll('span')
.data(this.menu)
.enter()
.append('span')
.html(function(d, i) {
var html = '<span class="button">' + d.label + '</span>';
if(i < that.menu.length - 1) html += ' / ';
return html;
});
d3.select('#menu')
.selectAll('span.button')
.classed('selected', function(d, i) {return i===0;})
.on('click', function() {
var d = d3.select(this.parentNode).datum();
console.log(d, d.sortBy);
d3.selectAll('#menu span.button')
.classed('selected', false);
d3.select(this)
.classed('selected', true);
that.updateSort(d.sortBy);
});
},
updateVisibleYears: function() {
var that = chart; // Better way to do this?
var index = that.uiState.selectedIndex;
var years = d3.selectAll('#chart .years g.year');
years.classed('hover', false);
years
.filter(function(d, i) {return i === index;})
.classed('hover', true);
d3.selectAll('.axes')
.attr('transform', that.translate(30 + index * that.perspectiveOffsetX, that.chartHeight + that.yScale(0) + -index * that.perspectiveOffsetY));
years
.style('opacity', function(d, i) {
if(i < index) return 0;
return that.colorScale(i);
});
var datum = years.filter(function(d, i) {return i === index;}).datum();
that.uiState.selectedDatum = datum;
that.updateInfo();
},
updateInfo: function() {
var that = chart;
var d = that.uiState.selectedDatum;
var html = '<h2>' + d.year + '</h2>';
html += _.has(that.data.info, d.year) ? that.data.info[d.year].text : '';
html += '<p>Hottest month: ' + d.max + '&deg;C</p>';
html += '<p>Coolest month: ' + d.min + '&deg;C</p>';
html += '<p>Year average: ' + d.mean.toFixed(1) + '&deg;C</p>';
d3.select('#info')
.html(html);
},
handleScroll: function() {
var that = chart; // Better way to do this?
if(that.uiState.sorting) return;
var scroll = $(window).scrollTop();
that.uiState.selectedIndex = Math.round(that.scrollScale(scroll));
that.updateVisibleYears();
},
initEvents: function() {
var that = this;
$(window).scroll(this.handleScroll);
$(window).on('touchmove', this.handleScroll);
},
initChart: function() {
var that = this;
this.xScale = d3.scale.linear()
.domain([0, 11])
.range([0, this.lineWidth]);
this.yScale = d3.scale.linear()
.domain(this.data.meanTemp.extent)
.range([this.lineHeight, 0]);
this.colorScale = d3.scale.linear()
.domain([0, 102])
.range([1, 0.5]);
this.svgLine = d3.svg.line()
.interpolate('cardinal')
.x(function(d, i) {return that.xScale(i);})
.y(function(d) {return that.yScale(d);});
// YEAR LINES
var years = d3.select('#chart svg')
.append('g')
.classed('years', true)
.attr('transform', this.translate(30, this.chartHeight))
.selectAll('g.year')
.data(this.data.meanTemp.data)
.enter()
.append('g')
.attr('class', function(d, i) {return 'year-' + d.year;})
.classed('year', true)
.sort(this.sortFunction[this.uiState.sortBy])
.attr('transform', function(d, i) {
return that.translate(i * that.perspectiveOffsetX, -i * that.perspectiveOffsetY);
})
.style('opacity', function(d, i) {
return that.colorScale(i);
});
// Add paths
years
.append('path')
.attr('d', function(d, i) {
return that.svgLine(d.data);
});
// Base and end lines
years
.append('line')
.classed('base', true)
.attr('x1', 0)
.attr('y1', this.yScale(0))
.attr('x2', this.xScale(11))
.attr('y2', this.yScale(0));
years
.append('line')
.classed('start', true)
.attr('x1', 0)
.attr('y1', this.yScale(0))
.attr('x2', 0)
.attr('y2', function(d) {return that.yScale(d.data[0]);});
years
.append('line')
.classed('end', true)
.attr('x1', this.xScale(11))
.attr('y1', this.yScale(0))
.attr('x2', this.xScale(11))
.attr('y2', function(d) {return that.yScale(d.data[11]);});
years
.append('text')
.classed('label', true)
.attr('x', this.xScale(11) + 5)
.attr('y', this.yScale(0))
.text(function(d) {return d.year;})
.each(function(d) {
if(!_.has(that.data.info, d.year)) return;
var color = that.data.info[d.year].class === 'hot' ? 'indianred' : 'steelblue';
d3.select(this)
.style('opacity', 1)
.style('font-weight', '100')
.style('fill', color);
});
d3.select('#chart svg')
.append('g')
.classed('axes', true)
.attr('transform', this.translate(30, this.chartHeight));
this.renderAxes();
},
renderAxes: function() {
var monthScale = d3.scale.ordinal()
.domain(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
.rangePoints([0, this.lineWidth]);
var yAxis = d3.svg.axis()
.scale(this.yScale)
.orient('left')
.tickValues([0, 2, 4, 6, 8, 10, 12, 14, 16]);
d3.select('#chart .axes')
.append('g')
.classed('axis y', true)
.attr('transform', this.translate(0, -this.yScale(0)))
.call(yAxis);
var xAxis = d3.svg.axis()
.scale(monthScale)
.orient('bottom');
d3.select('#chart .axes')
.append('g')
.classed('axis x', true)
.call(xAxis);
},
updateSort: function(sortBy) {
var that = this;
this.uiState.sortBy = sortBy;
// Do the sort
var years = d3.select('#chart .years')
.selectAll('g.year')
.sort(this.sortFunction[this.uiState.sortBy]);
// Persist the chosen year: get the index of the chosen year
d3.selectAll('#chart .years g.year')
.each(function(d, i) {
if(d.year === that.uiState.selectedDatum.year) index = i;
});
that.uiState.selectedIndex = index;
// Transform the axes
d3.selectAll('.axes')
.transition()
.duration(2000)
.attr('transform', that.translate(25 + index * that.perspectiveOffsetX, that.chartHeight + that.yScale(0) + -index * that.perspectiveOffsetY))
.each('end', function() {
that.uiState.sorting = false;
});
// Transform the year paths
d3.selectAll('#chart .years .year')
.transition()
.duration(2000)
.attr('transform', function(d, i) {
return that.translate(i * that.perspectiveOffsetX, -i * that.perspectiveOffsetY);
})
.style('opacity', function(d, i) {
if(i < index) return 0;
return that.colorScale(i);
});
// Reset scroll
this.uiState.sorting = true;
$(window).scrollTop(this.scrollScale.invert(index));
}
}
d3.json('temp.json', function(temperatureData) {
chart.data = temperatureData;
chart.init();
chart.updateVisibleYears();
});
</script>
</body>
</html>
Raw
temp.json
{
"meanTemp": {"1910": [2.6, 3.9, 5.4, 6.0, 10.1, 13.3, 13.2, 14.1, 11.8, 9.9, 2.8, 5.5], "1911": [3.5, 4.0, 4.3, 6.6, 11.7, 13.2, 16.2, 16.5, 12.7, 8.4, 5.0, 5.3], "1912": [3.0, 4.2, 6.1, 7.9, 10.5, 12.5, 14.5, 11.7, 10.3, 7.7, 5.4, 5.5], "1913": [3.5, 4.2, 4.9, 6.8, 10.1, 12.8, 13.6, 14.2, 12.7, 10.1, 7.3, 4.2], "1914": [2.8, 5.5, 4.8, 8.6, 9.4, 13.1, 14.6, 14.8, 12.2, 9.4, 5.8, 3.4], "1915": [3.0, 3.1, 4.2, 6.8, 9.3, 12.8, 13.4, 14.1, 12.2, 8.3, 2.6, 3.9], "1916": [6.3, 2.8, 2.5, 7.0, 9.9, 10.6, 14.0, 14.9, 12.0, 9.4, 6.1, 2.0], "1917": [1.1, 1.0, 2.5, 4.3, 10.8, 13.2, 14.7, 14.4, 12.7, 6.6, 7.0, 2.0], "1918": [2.6, 5.5, 4.9, 5.9, 11.4, 11.9, 14.1, 14.7, 10.4, 8.3, 4.9, 5.6], "1919": [2.4, 1.2, 2.5, 6.2, 11.7, 12.5, 12.9, 14.3, 11.6, 7.2, 2.3, 4.2], "1920": [3.9, 5.0, 5.8, 6.8, 10.3, 12.9, 12.9, 12.5, 11.8, 9.7, 6.5, 3.5], "1921": [5.8, 4.2, 5.9, 7.3, 10.0, 13.0, 16.2, 13.8, 12.8, 11.6, 4.4, 5.7], "1922": [2.9, 3.7, 4.0, 4.6, 10.9, 12.2, 12.3, 12.3, 11.0, 7.6, 5.3, 4.8], "1923": [4.9, 4.5, 5.7, 6.3, 8.0, 11.2, 15.7, 13.6, 11.1, 8.6, 2.8, 3.1], "1924": [3.8, 2.9, 3.2, 6.0, 9.7, 12.4, 13.9, 13.0, 11.9, 9.1, 6.4, 6.1], "1925": [4.6, 3.9, 4.2, 6.3, 10.1, 13.4, 15.4, 14.3, 10.4, 9.5, 3.4, 2.1], "1926": [3.9, 5.5, 5.5, 8.1, 8.9, 12.3, 15.4, 14.9, 13.0, 7.0, 5.1, 3.8], "1927": [3.8, 3.7, 6.1, 6.7, 9.4, 10.8, 14.5, 14.4, 11.2, 9.3, 5.3, 1.5], "1928": [4.2, 4.8, 4.9, 7.1, 9.6, 11.2, 14.4, 13.9, 11.5, 9.1, 6.7, 3.1], "1929": [1.1, 0.3, 5.7, 5.6, 10.0, 11.8, 14.4, 13.8, 13.9, 8.4, 5.8, 4.7], "1930": [4.3, 1.8, 4.0, 7.2, 9.5, 13.7, 14.0, 14.4, 12.4, 9.3, 5.1, 3.8], "1931": [2.6, 3.0, 3.1, 6.6, 10.0, 12.5, 14.0, 13.1, 10.8, 8.2, 6.9, 5.0], "1932": [5.5, 3.2, 4.1, 5.6, 9.1, 12.8, 14.6, 15.4, 11.8, 7.7, 5.7, 4.9], "1933": [1.9, 3.3, 6.3, 7.9, 10.5, 14.0, 16.3, 15.9, 13.7, 9.2, 5.1, 1.9], "1934": [4.0, 3.9, 4.0, 6.5, 9.9, 13.4, 16.4, 13.9, 13.0, 9.2, 5.3, 6.9], "1935": [4.0, 4.6, 5.7, 6.8, 9.0, 13.3, 15.4, 15.2, 12.1, 8.4, 5.7, 2.1], "1936": [2.6, 1.9, 5.8, 5.4, 10.1, 13.2, 14.1, 14.8, 13.1, 8.6, 5.0, 4.5], "1937": [4.3, 4.1, 2.4, 7.9, 10.8, 12.7, 14.5, 15.2, 12.1, 9.2, 4.9, 2.2], "1938": [4.7, 4.2, 8.0, 6.9, 9.3, 12.7, 13.6, 14.5, 12.5, 9.3, 7.8, 3.5], "1939": [3.0, 4.9, 5.1, 7.3, 10.2, 12.9, 13.9, 15.1, 13.0, 7.5, 7.3, 2.9], "1940": [-1.1, 2.0, 4.9, 7.2, 11.3, 14.9, 13.6, 14.1, 11.4, 8.7, 5.9, 3.3], "1941": [-0.1, 2.3, 3.9, 5.5, 8.2, 13.4, 15.5, 13.4, 13.6, 9.4, 5.7, 4.9], "1942": [1.0, 0.2, 4.1, 7.9, 9.7, 12.6, 14.0, 14.8, 12.3, 9.3, 4.7, 5.8], "1943": [3.9, 5.2, 5.9, 9.2, 10.4, 12.9, 14.6, 14.1, 11.8, 9.8, 5.6, 3.4], "1944": [5.1, 3.0, 4.5, 8.8, 9.9, 12.2, 14.9, 15.5, 11.2, 8.3, 5.1, 3.3], "1945": [-0.2, 5.9, 7.2, 8.6, 10.5, 13.0, 15.2, 14.6, 13.2, 10.7, 6.7, 4.6], "1946": [2.6, 4.9, 4.5, 8.5, 9.5, 11.8, 14.6, 13.2, 12.7, 8.8, 6.9, 2.6], "1947": [1.8, -2.0, 2.2, 7.2, 11.5, 13.7, 15.2, 17.0, 13.3, 9.9, 6.1, 4.4], "1948": [3.8, 3.9, 7.3, 7.8, 9.9, 12.3, 14.2, 13.6, 12.5, 9.0, 6.7, 4.9], "1949": [4.6, 4.8, 4.4, 8.7, 9.7, 13.4, 15.6, 15.2, 14.6, 10.7, 5.9, 4.7], "1950": [3.9, 4.0, 6.5, 6.3, 10.0, 14.4, 14.6, 14.3, 11.6, 8.8, 4.7, 0.7], "1951": [2.9, 2.6, 3.2, 5.5, 8.7, 12.3, 14.7, 13.5, 12.8, 9.2, 7.3, 4.7], "1952": [1.7, 2.8, 5.6, 8.3, 11.6, 12.5, 15.0, 14.5, 9.9, 8.1, 3.5, 2.6], "1953": [3.2, 3.8, 5.2, 6.1, 11.3, 13.0, 14.1, 14.6, 12.9, 9.2, 7.5, 6.1], "1954": [2.6, 1.8, 4.7, 6.7, 10.1, 12.1, 12.9, 13.2, 11.3, 10.4, 5.9, 5.6], "1955": [1.8, 0.3, 2.6, 8.3, 8.5, 12.4, 16.0, 16.4, 13.1, 8.2, 6.6, 4.5], "1956": [2.7, -0.2, 5.3, 5.8, 10.6, 11.8, 14.3, 12.2, 13.0, 8.7, 5.7, 5.2], "1957": [4.5, 3.9, 7.9, 7.7, 9.3, 13.4, 14.8, 14.1, 11.2, 9.7, 5.8, 3.9], "1958": [2.6, 3.5, 2.6, 6.4, 9.5, 12.3, 14.5, 14.4, 13.9, 9.9, 5.9, 3.8], "1959": [0.9, 3.8, 6.2, 8.1, 11.2, 13.5, 15.4, 15.7, 13.5, 11.4, 6.2, 4.8], "1960": [3.1, 2.7, 5.3, 8.0, 11.5, 14.4, 13.8, 13.7, 11.9, 9.3, 6.0, 3.0], "1961": [2.7, 5.8, 7.4, 8.5, 9.7, 12.9, 13.6, 13.9, 13.6, 9.7, 5.3, 1.8], "1962": [3.6, 3.7, 1.9, 6.5, 9.0, 12.3, 13.2, 13.0, 11.4, 9.7, 4.7, 2.2], "1963": [-1.8, -1.1, 5.0, 7.2, 9.1, 13.3, 13.6, 12.9, 11.8, 9.7, 6.6, 2.4], "1964": [3.3, 3.7, 3.6, 7.6, 11.5, 12.3, 14.3, 13.9, 12.7, 8.1, 6.5, 2.7], "1965": [2.4, 2.7, 4.1, 7.0, 10.1, 12.9, 12.4, 13.4, 11.2, 9.9, 3.5, 3.3], "1966": [2.2, 4.0, 5.6, 5.7, 9.8, 13.8, 13.6, 13.3, 12.8, 8.9, 4.5, 4.1], "1967": [3.7, 4.5, 5.7, 6.8, 8.8, 12.9, 14.8, 14.2, 12.4, 9.2, 4.9, 3.7], "1968": [3.5, 1.1, 5.2, 6.9, 8.4, 13.3, 13.5, 14.1, 12.5, 11.1, 5.5, 2.6], "1969": [4.4, 0.1, 2.6, 6.3, 9.7, 12.7, 15.1, 15.0, 12.6, 11.8, 4.0, 2.8], "1970": [3.0, 1.8, 2.9, 5.5, 11.3, 14.7, 13.4, 14.7, 12.9, 9.5, 6.3, 3.7], "1971": [3.9, 4.1, 4.4, 6.8, 10.3, 11.1, 15.2, 14.2, 13.2, 10.4, 5.3, 6.0], "1972": [3.1, 3.5, 5.5, 7.3, 9.4, 10.5, 14.2, 13.6, 10.7, 9.7, 5.2, 4.9], "1973": [3.9, 3.4, 5.5, 5.9, 9.9, 13.4, 14.3, 14.9, 12.8, 8.3, 5.1, 4.0], "1974": [5.0, 4.6, 4.7, 7.2, 9.8, 12.3, 13.5, 13.8, 10.7, 6.9, 5.6, 6.5], "1975": [5.3, 4.0, 3.9, 7.1, 8.6, 13.1, 15.5, 16.8, 11.8, 9.3, 5.4, 4.7], "1976": [4.5, 3.8, 4.0, 7.1, 10.4, 15.0, 16.5, 15.8, 12.0, 9.4, 5.3, 1.4], "1977": [1.9, 3.6, 5.8, 6.0, 9.2, 11.2, 14.6, 13.9, 11.7, 10.7, 5.1, 5.2], "1978": [2.3, 1.4, 5.5, 5.4, 10.5, 12.3, 13.3, 13.7, 12.6, 10.8, 7.3, 3.3], "1979": [-0.5, 0.6, 3.3, 6.4, 8.4, 12.7, 14.4, 13.4, 11.9, 10.2, 5.6, 4.5], "1980": [1.8, 4.6, 3.7, 7.7, 10.0, 12.6, 13.3, 14.4, 13.3, 7.8, 5.5, 4.7], "1981": [3.8, 2.6, 6.3, 6.8, 10.3, 12.0, 14.1, 14.9, 13.2, 6.9, 6.5, 0.1], "1982": [2.3, 4.3, 5.1, 7.7, 10.2, 13.7, 15.1, 14.4, 12.7, 9.2, 6.5, 3.5], "1983": [5.4, 1.4, 5.6, 5.6, 8.9, 12.8, 17.3, 16.0, 12.2, 9.2, 6.7, 5.1], "1984": [2.3, 3.2, 3.9, 7.3, 9.0, 13.1, 15.3, 15.9, 12.1, 9.7, 6.8, 4.7], "1985": [0.4, 2.2, 3.8, 7.2, 9.6, 11.4, 14.5, 13.2, 12.9, 10.0, 3.1, 5.2], "1986": [2.5, -1.2, 4.3, 4.8, 9.8, 13.3, 14.2, 12.2, 10.4, 9.7, 6.7, 4.8], "1987": [0.7, 3.0, 3.3, 8.8, 9.0, 11.3, 14.6, 14.2, 12.2, 8.4, 5.8, 4.9], "1988": [4.1, 3.9, 5.1, 7.1, 10.5, 13.4, 13.5, 13.9, 12.1, 9.4, 5.1, 6.6], "1989": [5.8, 4.9, 6.0, 5.5, 11.5, 13.0, 16.5, 14.8, 12.9, 10.5, 5.8, 3.8], "1990": [5.5, 5.9, 7.2, 7.1, 11.4, 12.4, 15.2, 16.1, 11.7, 10.5, 5.8, 3.8], "1991": [2.6, 1.4, 6.7, 6.9, 10.0, 10.9, 15.9, 15.7, 13.1, 9.0, 5.7, 4.4], "1992": [3.6, 4.8, 6.1, 7.4, 12.0, 14.4, 14.6, 13.8, 11.9, 6.7, 6.1, 3.2], "1993": [4.7, 4.7, 5.6, 8.2, 10.0, 13.4, 13.7, 13.1, 11.2, 7.3, 4.1, 3.9], "1994": [4.0, 2.4, 5.9, 6.8, 9.3, 12.7, 16.0, 14.3, 11.4, 9.0, 8.8, 5.4], "1995": [3.5, 4.9, 4.2, 7.6, 10.2, 12.9, 16.6, 17.3, 12.4, 11.6, 6.9, 1.7], "1996": [3.9, 2.0, 3.7, 7.4, 8.0, 12.9, 14.7, 15.1, 12.6, 10.3, 4.7, 2.5], "1997": [2.2, 5.2, 7.1, 7.9, 10.2, 12.6, 15.3, 17.1, 12.7, 9.2, 7.7, 5.2], "1998": [4.3, 6.8, 6.7, 6.6, 11.5, 12.6, 14.0, 14.4, 13.4, 9.0, 5.2, 4.9], "1999": [4.5, 4.2, 6.2, 8.3, 11.4, 12.4, 15.9, 14.8, 14.2, 9.8, 6.8, 3.6], "2000": [4.3, 5.0, 6.5, 6.7, 10.8, 13.1, 14.1, 15.2, 13.4, 9.2, 5.8, 4.6], "2001": [2.6, 3.4, 4.1, 6.7, 11.4, 12.6, 15.3, 15.2, 12.3, 12.2, 6.8, 3.1], "2002": [5.0, 5.5, 6.5, 8.2, 10.8, 13.2, 14.4, 15.6, 13.2, 8.7, 7.5, 4.8], "2003": [3.7, 3.4, 6.7, 8.9, 10.7, 14.6, 16.2, 16.5, 13.1, 8.2, 7.4, 4.3], "2004": [4.4, 4.4, 5.7, 8.5, 11.1, 14.0, 14.4, 16.1, 13.4, 9.4, 7.1, 5.0], "2005": [5.3, 3.7, 6.4, 7.9, 10.0, 14.1, 15.3, 14.9, 13.8, 11.7, 5.6, 4.2], "2006": [3.9, 3.5, 3.9, 7.4, 10.7, 14.5, 17.8, 15.0, 15.2, 11.7, 7.2, 5.5], "2007": [5.9, 5.2, 6.3, 10.2, 10.7, 13.7, 14.3, 14.4, 12.6, 10.3, 6.9, 4.4], "2008": [5.3, 4.9, 5.1, 7.1, 12.2, 12.9, 15.3, 15.1, 12.5, 8.7, 6.2, 3.1], "2009": [2.8, 3.7, 6.1, 8.9, 10.9, 13.7, 15.2, 15.4, 13.2, 10.4, 7.3, 2.1], "2010": [0.9, 1.9, 5.1, 8.0, 9.8, 14.2, 15.6, 14.2, 12.8, 9.4, 4.3, -0.9], "2011": [3.1, 5.3, 5.8, 10.7, 11.0, 12.7, 14.2, 14.1, 13.8, 11.3, 8.7, 4.8], "2012": [4.7, 4.2, 7.7, 6.3, 10.5, 12.3, 14.1, 15.3, 11.9, 8.2, 5.8, 3.8]},
"info" : {
"2006": {"class": "hot", "text": "<p>July 2006 stands as the <a href='http://www.metoffice.gov.uk/climate/uk/interesting/july2006'>warmest month</a> since records began in 1659 causing damage to road surfaces and buckling of rail lines.</p><p>It's been estimated that excess deaths due to the heat was <a href='https://www.gov.uk/government/uploads/system/uploads/attachment_data/file/201039/Heatwave-Main_Plan-2013.pdf'>680 people</a>.</p>"},
"2003": {"class": "hot", "text": "<p>Although not recorded as one of the top 5 warmest months, August 2003 averaged 16.5&deg;C and had the <a href='http://www.bbc.co.uk/weather/features/23642901'>hottest day ever recorded</a>.</p><p>Excess deaths in August 2003 were estimated at <a href='https://www.gov.uk/government/uploads/system/uploads/attachment_data/file/201039/Heatwave-Main_Plan-2013.pdf'>over 2000</a>.</p>"},
"1983": {"class": "hot", "text": "<p>July 1983 was the second warmest month on record resulting in a <a href='http://news.bbc.co.uk/1/hi/uk/3140675.stm'>rush on barbecue gear, salads, beer and soft drinks</a> and speed restrictions on railways.</p>"},
"1976": {"class": "hot", "text": "<p>The July 1976 heat wave led to the <a href='http://en.wikipedia.org/wiki/1976_United_Kingdom_heat_wave'>hottest summer average temperature since records began</a> causing a severe drought in the UK.</p><p>50,000 trees were destroyed by fire Hurn Forest, Dorset whilst £500 million worth of crops failed.</p>"},
"1963": {"class": "cold", "text": "<p>The winter of 1962/63, also known as the Big Freeze of 1963, was one of the <a href='http://en.wikipedia.org/wiki/Winter_of_1962%E2%80%9363_in_the_United_Kingdom'>coldest winters on record</a> in the UK.</p><p>The long bitterly cold spell caused <a href='http://www.metoffice.gov.uk/education/teens/case-studies/severe-winters'>lakes and rivers to freeze</a>, even the sea froze in places.</p>"},
"1947": {"class": "cold", "text": "<p>The UK suffered a <a href='http://en.wikipedia.org/wiki/Winter_of_1946%E2%80%9347_in_the_United_Kingdom'>harsh winter in 1946/47</a> bringing large snow drifts causing roads and railways to be blocked. Coal supplies struggled to get through to power stations resulting in energy rations.</p><p>As warmer weather reached the UK the melt water caused <a href='http://www.metoffice.gov.uk/education/teens/case-studies/severe-winters'>floods</a>, damaging hundreds of homes.</p><p>Ironically the summer of 1947 had one of the warmest <a href='http://www.ukweatherworld.co.uk/forum/index.php?/topic/55504-the-heatwave-of-late-may-early-june-1947/'>Augusts on record</a>.</p>"},
"1911": {"class": "hot", "text": "<p>The 10th hottest year on record, the UK endured a heatwave lasting two and a half months. Fatalities <a href='http://en.wikipedia.org/wiki/1911_United_Kingdom_heat_wave'>became common</a> whilst food spoiled very quickly and sewage spilled out.</p><p>The ensuing drought affected agriculture resulting in higher food prices.</p>"}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment