(function() { var global, new_square; global = { SIDE: 80 }; window.main = function() { var colorify, d, data, height, path_generator, squares, svg, width; width = 960; height = 500; svg = d3.select('body').append('svg').attr('width', width).attr('height', height); /* create the GeoJSON */ data = [ { i: 1, j: 1, type: 'A' }, { i: 4, j: 2, type: 'B' }, { i: 3, j: 3, type: 'C' }, { i: 3, j: 4, type: 'C' }, { i: 3, j: 7, type: 'B' }, { i: 2, j: 7, type: 'D' } ]; squares = { type: 'FeatureCollection', features: (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = data.length; _i < _len; _i++) { d = data[_i]; _results.push(new_square(d)); } return _results; })() }; /* define a color scale */ colorify = d3.scale.category10().domain(['A', 'B', 'C', 'D']); /* identity projection. see http://bl.ocks.org/mbostock/5663666 for reference */ path_generator = d3.geo.path().projection(d3.geo.transform({ point: function(x, y) { return this.stream.point(x, y); } })); /* draw the result */ return svg.selectAll('.square').data(squares.features).enter().append('path').attr('class', 'square').style('fill', function(d) { return colorify(d.properties.type); }).attr('d', path_generator); }; /* create a new square */ new_square = function(d) { return { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[d.j * global.SIDE, d.i * global.SIDE], [(d.j + 1) * global.SIDE, d.i * global.SIDE], [(d.j + 1) * global.SIDE, (d.i + 1) * global.SIDE], [d.j * global.SIDE, (d.i + 1) * global.SIDE], [d.j * global.SIDE, d.i * global.SIDE]]] }, properties: { type: d.type } }; }; }).call(this);