allardw · June 14, 2016 12:12
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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>
diff --git a/temps.tsv b/temps.tsv
diff --git a/thumbnail.png b/thumbnail.png
	<!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>