Weather wheel by nitaku

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var INNER_RADIUS, OUTER_RADIUS, arc_generator, height, prec_radius, r_temp, refs, refs_data, refs_labels_north, refs_labels_south, svg, temp_color, width;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  svg.attr({
    viewBox: (-width / 2) + " " + (-height / 2) + " " + width + " " + height
  });

  OUTER_RADIUS = 200;

  INNER_RADIUS = 60;

  r_temp = d3.scale.linear().domain([-20, 40]).range([INNER_RADIUS, OUTER_RADIUS]);

  prec_radius = d3.scale.sqrt().domain([0, 100]).range([0, 32]);

  temp_color = d3.scale.linear().domain([-20, 0, 20, 40]).range([d3.hcl(290, 70, 15), d3.hcl(230, 70, 45), d3.hcl(80, 70, 75), d3.hcl(10, 70, 45)]).interpolate(d3.interpolateHcl);

  arc_generator = d3_shape.arc();

  refs_data = d3.range(-20, 40, 10);

  refs = svg.selectAll('.ref').data(refs_data);

  refs.enter().append('circle').attr({
    "class": 'ref',
    r: function(d) {
      return r_temp(d);
    },
    stroke: function(d) {
      if (d === 0) {
        return '#CCC';
      } else {
        return '#EEE';
      }
    }
  });

  refs_labels_north = svg.selectAll('.ref_label_north').data(refs_data);

  refs_labels_north.enter().append('text').text(function(d) {
    return d + "°C";
  }).attr({
    "class": 'ref_label_north',
    y: function(d) {
      return -r_temp(d);
    },
    dy: '0.35em',
    fill: function(d) {
      if (d === 0) {
        return '#BBB';
      } else {
        return '#DDD';
      }
    }
  });

  refs_labels_south = svg.selectAll('.ref_label_south').data(refs_data);

  refs_labels_south.enter().append('text').text(function(d) {
    return d + "°C";
  }).attr({
    "class": 'ref_label_south',
    y: function(d) {
      return r_temp(d);
    },
    dy: '0.35em',
    fill: function(d) {
      if (d === 0) {
        return '#BBB';
      } else {
        return '#DDD';
      }
    }
  });

  svg.append('circle').attr({
    "class": 'prec_ref',
    r: OUTER_RADIUS
  });

  svg.append('text').text('PISA').attr({
    "class": 'title',
    dy: '0.35em'
  });

  d3.csv('pisa_2014_weather.csv', function(days) {
    var angle, enter_prec_bubbles, enter_temp_bars, prec_bubbles, temp_bars;
    days.forEach(function(d) {
      d['Min TemperatureC'] = +d['Min TemperatureC'];
      d['Max TemperatureC'] = +d['Max TemperatureC'];
      d['Mean TemperatureC'] = +d['Mean TemperatureC'];
      return d['Precipitationmm'] = +d['Precipitationmm'];
    });
    angle = d3.scale.ordinal().domain(days.map(function(d) {
      return d['CET'];
    })).range(d3.range(Math.PI / 2, 2 * Math.PI + Math.PI / 2, 2 * Math.PI / days.length));
    temp_bars = svg.selectAll('.temp_bar').data(days);
    enter_temp_bars = temp_bars.enter().append('path').attr({
      "class": 'bar temp_bar',
      d: function(d, i) {
        return arc_generator({
          innerRadius: r_temp(d['Min TemperatureC']),
          outerRadius: r_temp(d['Max TemperatureC']),
          startAngle: i * 2 * Math.PI / days.length,
          endAngle: (i + 1) * 2 * Math.PI / days.length
        });
      },
      fill: function(d) {
        return temp_color(d['Mean TemperatureC']);
      }
    });
    enter_temp_bars.append('title').text(function(d) {
      return (d3.time.format('%Y, %B %e')(new Date(d['CET']))) + "\nTemperature:\n  Min: " + d['Min TemperatureC'] + " °C\n  Max: " + d['Max TemperatureC'] + " °C\n  Mean: " + d['Mean TemperatureC'] + " °C";
    });
    prec_bubbles = svg.selectAll('.prec_bubble').data(days.sort(function(a, b) {
      return d3.descending(a['Precipitationmm'], b['Precipitationmm']);
    }));
    enter_prec_bubbles = prec_bubbles.enter().append('circle').attr({
      "class": 'prec_bubble',
      r: function(d) {
        return prec_radius(d['Precipitationmm']);
      },
      cx: function(d) {
        return -OUTER_RADIUS * Math.cos(angle(d['CET']));
      },
      cy: function(d) {
        return -OUTER_RADIUS * Math.sin(angle(d['CET']));
      }
    });
    enter_prec_bubbles.append('title').text(function(d) {
      return (d3.time.format('%Y, %B %e')(new Date(d['CET']))) + "\nPrecipitation: " + d['Precipitationmm'] + " mm";
    });
    svg.append('line').attr({
      "class": 'hand',
      x1: 0,
      x2: 0,
      y1: -INNER_RADIUS + 10,
      y2: -OUTER_RADIUS - 40
    });
    return svg.append('text').text('2014').attr({
      "class": 'hand_label',
      x: 4,
      y: -OUTER_RADIUS - 40,
      dy: '0.6em'
    });
  });

}).call(this);

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Weather wheel</title>
    <link rel="stylesheet" href="index.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="d3-path.js"></script>
    <script src="d3-shape.js"></script>
  </head>
  <body>
    <svg></svg>
    <script src="index.js"></script>
  </body>
</html>

d3-path.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define('d3-path', ['exports'], factory) :
  factory((global.d3_path = {}));
}(this, function (exports) { 'use strict';

  var pi = Math.PI;
  var tau = 2 * pi;
  var epsilon = 1e-6;
  var tauEpsilon = tau - epsilon;
  function Path() {
    this._x0 = this._y0 = // start of current subpath
    this._x1 = this._y1 = null; // end of current subpath
    this._ = [];
  }

  function path() {
    return new Path;
  }

  Path.prototype = path.prototype = {
    moveTo: function(x, y) {
      this._.push("M", this._x0 = this._x1 = +x, ",", this._y0 = this._y1 = +y);
    },
    closePath: function() {
      if (this._x1 !== null) {
        this._x1 = this._x0, this._y1 = this._y0;
        this._.push("Z");
      }
    },
    lineTo: function(x, y) {
      this._.push("L", this._x1 = +x, ",", this._y1 = +y);
    },
    quadraticCurveTo: function(x1, y1, x, y) {
      this._.push("Q", +x1, ",", +y1, ",", this._x1 = +x, ",", this._y1 = +y);
    },
    bezierCurveTo: function(x1, y1, x2, y2, x, y) {
      this._.push("C", +x1, ",", +y1, ",", +x2, ",", +y2, ",", this._x1 = +x, ",", this._y1 = +y);
    },
    arcTo: function(x1, y1, x2, y2, r) {
      x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
      var x0 = this._x1,
          y0 = this._y1,
          x21 = x2 - x1,
          y21 = y2 - y1,
          x01 = x0 - x1,
          y01 = y0 - y1,
          l01_2 = x01 * x01 + y01 * y01;

      // Is the radius negative? Error.
      if (r < 0) throw new Error("negative radius: " + r);

      // Is this path empty? Move to (x1,y1).
      if (this._x1 === null) {
        this._.push(
          "M", this._x1 = x1, ",", this._y1 = y1
        );
      }

      // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
      else if (!(l01_2 > epsilon));

      // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
      // Equivalently, is (x1,y1) coincident with (x2,y2)?
      // Or, is the radius zero? Line to (x1,y1).
      else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
        this._.push(
          "L", this._x1 = x1, ",", this._y1 = y1
        );
      }

      // Otherwise, draw an arc!
      else {
        var x20 = x2 - x0,
            y20 = y2 - y0,
            l21_2 = x21 * x21 + y21 * y21,
            l20_2 = x20 * x20 + y20 * y20,
            l21 = Math.sqrt(l21_2),
            l01 = Math.sqrt(l01_2),
            l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
            t01 = l / l01,
            t21 = l / l21;

        // If the start tangent is not coincident with (x0,y0), line to.
        if (Math.abs(t01 - 1) > epsilon) {
          this._.push(
            "L", x1 + t01 * x01, ",", y1 + t01 * y01
          );
        }

        this._.push(
          "A", r, ",", r, ",0,0,", +(y01 * x20 > x01 * y20), ",", this._x1 = x1 + t21 * x21, ",", this._y1 = y1 + t21 * y21
        );
      }
    },
    arc: function(x, y, r, a0, a1, ccw) {
      x = +x, y = +y, r = +r;
      var dx = r * Math.cos(a0),
          dy = r * Math.sin(a0),
          x0 = x + dx,
          y0 = y + dy,
          cw = 1 ^ ccw,
          da = ccw ? a0 - a1 : a1 - a0;

      // Is the radius negative? Error.
      if (r < 0) throw new Error("negative radius: " + r);

      // Is this path empty? Move to (x0,y0).
      if (this._x1 === null) {
        this._.push(
          "M", x0, ",", y0
        );
      }

      // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
      else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
        this._.push(
          "L", x0, ",", y0
        );
      }

      // Is this arc empty? We’re done.
      if (!r) return;

      // Is this a complete circle? Draw two arcs to complete the circle.
      if (da > tauEpsilon) {
        this._.push(
          "A", r, ",", r, ",0,1,", cw, ",", x - dx, ",", y - dy,
          "A", r, ",", r, ",0,1,", cw, ",", this._x1 = x0, ",", this._y1 = y0
        );
      }

      // Otherwise, draw an arc!
      else {
        if (da < 0) da = da % tau + tau;
        this._.push(
          "A", r, ",", r, ",0,", +(da >= pi), ",", cw, ",", this._x1 = x + r * Math.cos(a1), ",", this._y1 = y + r * Math.sin(a1)
        );
      }
    },
    rect: function(x, y, w, h) {
      this._.push("M", this._x0 = this._x1 = +x, ",", this._y0 = this._y1 = +y, "h", +w, "v", +h, "h", -w, "Z");
    },
    toString: function() {
      return this._.join("");
    }
  };

  var version = "0.1.2";

  exports.version = version;
  exports.path = path;

}));

index.coffee

svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

svg
 .attr
   viewBox: "#{-width/2} #{-height/2} #{width} #{height}"
    
OUTER_RADIUS = 200
INNER_RADIUS = 60
    
r_temp = d3.scale.linear()
  .domain([-20,40])
  .range([INNER_RADIUS,OUTER_RADIUS])
  
prec_radius = d3.scale.sqrt()
  .domain([0, 100])
  .range([0,32])
  
temp_color = d3.scale.linear()
  .domain([-20,0,20,40])
  .range([d3.hcl(290,70,15),d3.hcl(230,70,45),d3.hcl(80,70,75),d3.hcl(10,70,45)])
  .interpolate(d3.interpolateHcl)
  
arc_generator = d3_shape.arc()

# reference and labels
refs_data = d3.range(-20,40,10)
refs = svg.selectAll '.ref'
  .data refs_data
  
refs.enter().append 'circle'
  .attr
    class: 'ref'
    r: (d) -> r_temp(d)
    stroke: (d) -> if d is 0 then '#CCC' else '#EEE'
    
refs_labels_north = svg.selectAll '.ref_label_north'
  .data refs_data
  
refs_labels_north.enter().append 'text'
  .text (d) -> "#{d}°C"
  .attr
    class: 'ref_label_north'
    y: (d) -> -r_temp(d)
    dy: '0.35em'
    fill: (d) -> if d is 0 then '#BBB' else '#DDD'
    
refs_labels_south = svg.selectAll '.ref_label_south'
  .data refs_data
  
refs_labels_south.enter().append 'text'
  .text (d) -> "#{d}°C"
  .attr
    class: 'ref_label_south'
    y: (d) -> r_temp(d)
    dy: '0.35em'
    fill: (d) -> if d is 0 then '#BBB' else '#DDD'

svg.append 'circle'
  .attr
    class: 'prec_ref'
    r: OUTER_RADIUS
    
svg.append 'text'
  .text 'PISA'
  .attr
    class: 'title'
    dy: '0.35em'

d3.csv 'pisa_2014_weather.csv', (days) ->
  days.forEach (d) ->
    d['Min TemperatureC'] = +d['Min TemperatureC']
    d['Max TemperatureC'] = +d['Max TemperatureC']
    d['Mean TemperatureC'] = +d['Mean TemperatureC']
    d['Precipitationmm'] = +d['Precipitationmm']
    
  angle = d3.scale.ordinal()
    .domain(days.map (d) -> d['CET'])
    .range(d3.range(Math.PI/2, 2*Math.PI+Math.PI/2, 2*Math.PI/days.length))
    
  temp_bars = svg.selectAll '.temp_bar'
    .data days

  enter_temp_bars = temp_bars.enter().append 'path'
    .attr
      class: 'bar temp_bar'
      d: (d,i) -> arc_generator {
          innerRadius: r_temp(d['Min TemperatureC']),
          outerRadius: r_temp(d['Max TemperatureC']),
          startAngle: i*2*Math.PI/days.length, # FIXME index-based positioning, should be day-based
          endAngle: (i+1)*2*Math.PI/days.length
        }
      fill: (d) -> temp_color(d['Mean TemperatureC'])
      
  enter_temp_bars.append 'title'
    .text (d) -> "#{d3.time.format('%Y, %B %e')(new Date(d['CET']))}\nTemperature:\n  Min: #{d['Min TemperatureC']} °C\n  Max: #{d['Max TemperatureC']} °C\n  Mean: #{d['Mean TemperatureC']} °C"
  
  
  prec_bubbles = svg.selectAll '.prec_bubble'
    .data days.sort (a,b) -> d3.descending(a['Precipitationmm'], b['Precipitationmm']) # draw bubbles from largest to smallest (hover) FIXME this is ugly
    
  enter_prec_bubbles = prec_bubbles.enter().append 'circle'
    .attr
      class: 'prec_bubble'
      r: (d) -> prec_radius(d['Precipitationmm'])
      cx: (d) -> -(OUTER_RADIUS)*Math.cos(angle(d['CET'])) # FIXME day should be converted first to a date
      cy: (d) -> -(OUTER_RADIUS)*Math.sin(angle(d['CET'])) # FIXME bubbles should be centered on the day slice, not at the beginning
      
  enter_prec_bubbles.append 'title'
    .text (d) -> "#{d3.time.format('%Y, %B %e')(new Date(d['CET']))}\nPrecipitation: #{d['Precipitationmm']} mm"

  # draw the hand
  svg.append 'line'
    .attr
      class: 'hand'
      x1: 0
      x2: 0
      y1: -INNER_RADIUS+10
      y2: -OUTER_RADIUS-40
      
  svg.append 'text'
    .text '2014'
    .attr
      class: 'hand_label'
      x: 4
      y: -OUTER_RADIUS-40
      dy: '0.6em'

index.css

@font-face {
  font-family: "Lacuna";
  src: url("lacuna.ttf");
}
@font-face {
  font-family: "Antonio-Light";
  src: url("Antonio-Light.ttf");
}

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 12px;
  overflow: hidden;
}
svg {
  width: 100%;
  height: 100%;
  background: white;
}

.bar {
  stroke-width: 0.5;
  stroke: white;
  fill-opacity: 0.8;
}
.bar:hover {
  fill-opacity: 1;
}

.ref, .prec_ref {
  fill: none;
}
.prec_ref {
  stroke: steelblue;
  opacity: 0.2;
}
.ref_label_north, .ref_label_south {
  text-anchor: middle;
  font-size: 8px;
  text-shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-family: "Lacuna";
}

.prec_bubble {
  fill: steelblue;
  fill-opacity: 0.2;
}
.prec_bubble:hover {
  fill-opacity: 0.8;
}

.title {
  font-size: 32px;
  text-anchor: middle;
  text-shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  fill: #999;
  font-family: "Antonio-Light";
}

.hand {
  stroke: #777;
  stroke-dasharray: 2 2;
  fill: none;
}
.hand_label {
  font-size: 9px;
  font-weight: bold;
  font-family: "Lacuna";
  fill: #555;
}