(function() {

  window.main = function() {
    var colorify, dx, dy, height, path_generator, radius, svg, vis, width;
    width = 960;
    height = 500;
    svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
    vis = svg.append('g').attr('transform', 'translate(640, 120)');
    /* custom projection to make hexagons appear regular (y axis is also flipped)
    */
    radius = 0.6;
    dx = radius * 2 * Math.sin(Math.PI / 3);
    dy = radius * 1.5;
    path_generator = d3.geo.path().projection(d3.geo.transform({
      point: function(x, y) {
        return this.stream.point(x * dx / 2, -(y - (2 - (y & 1)) / 3) * dy / 2);
      }
    }));
    /* define a color scale (Colorbrewer's Set3)
    */
    colorify = d3.scale.ordinal().domain(['A', 'B', 'C', 'D']).range(["#8dd3c7", "#ffffb3", "#bebada", "#fb8072"]);
    /* load topoJSON data
    */
    return d3.json('readme.regions.topo.json', function(error, data) {
      /* draw the cells
      */      vis.selectAll('.region').data(topojson.feature(data, data.objects.regions).features).enter().append('path').attr('class', 'region').attr('d', path_generator).attr('fill', function(d) {
        return colorify(d.properties['class']);
      });
      /* draw the boundaries
      */
      vis.append('path').datum(topojson.mesh(data, data.objects.regions, function(a, b) {
        return a === b;
      })).attr('d', path_generator).attr('class', 'outer boundary');
      return vis.append('path').datum(topojson.mesh(data, data.objects.regions, function(a, b) {
        return a !== b;
      })).attr('d', path_generator).attr('class', 'boundary');
    });
  };

}).call(this);