Dutch weather coffee cup

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

<!DOCTYPE html>
<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