This animation shows a representation of montly mean temperatures from 1906-2016 in the Netherlands.
Inspiration for this datavizualization came from the climate spiral by Ed Hawkins and the Measuring Cup by Mitchell Whitelaw
Data source: KNMI
xxxxxxxxxx
<meta charset="utf-8">
<style>
path {
fill: none;
}
</style>
<div id="viz"></div>
<div id="slider"></div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var width = 960,
height = 500;
var r = 150;
var center = {"x":0,"y":0};
var colours = ["#fff5eb", "#fee6ce", "#fdd0a2", "#fdae6b", "#fd8d3c", "#f16913", "#d94801", "#a63603", "#7f2704", "#7f2704"];
var heatmapColour = d3.scale.linear()
.domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
.range(colours);
var c = d3.scale.linear().domain([1906,2017]).range([0,1]);
var svg = d3.select("#viz").append("svg")
.attr("width",width)
.attr("height",height)
.attr("id", "root")
.append("g")
.attr("transform","translate("+width/2+","+350+")");
describeRadial = function(center, startRadius, endRadius, startAngle, endAngle) {
var start = polarToCartesian(center, startRadius, startAngle);
var end = polarToCartesian(center, endRadius, endAngle);
d = [
"M", start.x, start.y,
"A", startRadius, endRadius, 0, 0, 1, end.x, end.y
].join(" ");
return d;
}
describeLine = function(center, startRadius, endRadius, startAngle, endAngle) {
var start = polarToCartesian(center, startRadius, startAngle);
var end = polarToCartesian(center, endRadius, endAngle);
d = [
"M", start.x, start.y,
"L", end.x, end.y
].join(" ");
return d;
}
d3.tsv("temps.tsv", function(error, data) {
console.log(data);
var segments = [];
data.forEach(function(d,i) {
if (i+1 < data.length) {
v = {
v1: data[i].temp,
v2: data[i+1].temp,
t1: data[i].date,
t2: data[i+1].date
}
segments.push(v)
}
})
var paths = svg.selectAll("path")
.data(segments)
.enter().append("path")
.attr("d",function(d) {
sr = 15*d.v1 + r;
er = 15*d.v2 + r;
sa = 360*(d.t1 - Math.floor(d.t1));
ea = 360*(d.t2 - Math.floor(d.t2));
return describeLine(center, sr, er, sa, ea)
})
.style("opacity","0")
.style("stroke",function(d) {return heatmapColour(c(d.t1))})
.attr("transform",function(d,i) {return "scale(1,0.5) translate(0," + -i/3 + ")"})
.on("mouseover", function(d) {
console.log(d.t1)
});
paths.transition()
.delay(function(d,i) {return i*10})
.style("opacity","1")
//.style("stroke",function(d) {return heatmapColour(c(d.t1))});
});
function polarToCartesian(center, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: center.x + (radius * Math.cos(angleInRadians)),
y: center.y + (radius * Math.sin(angleInRadians))
};
}
</script>
https://d3js.org/d3.v3.min.js
https://code.jquery.com/jquery-1.10.2.js
https://code.jquery.com/ui/1.11.4/jquery-ui.js