Temperatures 2015 (NL)

Every day of the year is represented as a dot on a ring-shaped calendar (the way I picture the year in my head)

by Koen Van den Eeckhout

HTML

<pre...

CSS

pre {
  display: none;
}

svg {
  background-color: #dbe6ec;
}

JavaScript

// Margin convention: http://bl.ocks.org/mbostock/3019563
var margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
};
var width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
var r2 = (width-10)/2; // outer ring radius
var r1 = r2 * 0.6; // inner ring radius
var alpha = 2 * Math.PI / 53;
var monthnames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daynames = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

// Load dataset
var dataset = d3.csv.parse(d3.select("pre#data").text());
// this just grabs the text from the preformatted block
// and parses it as if it was a csv file
// in your real code, you would use d3.csv(filename, callbackFunction) 
// and the rest would be inside your callback function:

// Data manipulations
for (var i = 0; i < dataset.length; i++) {
  dataset[i].month = parseInt(dataset[i].Date.substr(4,2));
	dataset[i].monthname = monthnames[dataset[i].month-1];
  dataset[i].day   = parseInt(dataset[i].Date.substr(6,2)); // Day of the month
  dataset[i].yday  = i+1; // Day of the year
  dataset[i].D     = (dataset[i].yday + 2) % 7 + 1; // Weekday
  dataset[i].dayname = daynames[dataset[i].D-1];
  dataset[i].W     = (dataset[i].yday - dataset[i].D + 3) / 7; // Week number - first week 0!
  dataset[i].temp  = parseInt(dataset[i].Data) / 10; // Temperature
}

// Create circles
var circles = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

var colorScale = d3.scale.category20();
var rScale = d3.scale.linear()
							.domain([d3.min(dataset, function(d) { return d.temp; }),d3.max(dataset, function(d) { return d.temp; })])
          ...