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()
               ...