'use strict'; (function() { var mapFile = 'data/map.json'; var stationsFile = 'data/stations.json'; var w = 450; var h = 450; var s = 25; var svg = d3.select("body").append("svg") .attr("style", "border:1px solid lime") .attr("width", w) .attr("height", h); var projection = d3.geo.mercator() .center([-122, 38]) .scale(1960) .translate([w / 2, h / 2]); /** * */ function drawMap() { d3.json(mapFile, function(error, json) { var path = d3.geo.path().projection(projection); svg.selectAll('.subunit') .data(json.features) .enter().append('path') .attr('d', path) .attr('stroke', 'lime'); }); }; /** * */ function drawStations() { function randomColor() { var hexes = ['#ff0000', '#ffff00', '#ff00ff', '#00ffff', '#0000ff', '#00ff00']; var random = Math.floor(Math.random() * hexes.length); return hexes[random]; }; d3.json(stationsFile, function(error, json) { var tmp; var zzz = -1; json.stations.forEach(function(station) { // console.log(station); tmp = projection([station.lon, station.lat]); station.x = tmp[0]; station.y = tmp[1]; if (zzz === -1) { zzz = 0 mesh.addSeed(new MeshSeed(tmp[0], tmp[1], randomColor(), mesh.seedWeight), faces); } }); drawMesh(); svg.selectAll('.station') .data(json.stations) .enter().append('circle') .attr('cx', function(d) { return d.x; }) .attr('cy', function(d) { return d.y; }) .attr('r', 5) .attr('fill', 'crimson'); }); }; /** * */ function drawMesh() { mesh.calculateFills(faces); svg.selectAll('rect') .data(faces) .enter() .append('rect') .attr('id', function(d) { return d.id; }) .attr('x', function(d) { return d.x; }) .attr('y', function(d) { return d.y; }) .attr('width', function(d) { return d.side; }) .attr('height', function(d) { return d.side; }) .attr('fill', function(d) { return d.fill; }) // .attr('stroke', '#aaa') drawMap(); }; var mesh = new Mesh(w, h, s); var faces = mesh.initFaces(w, h, s); // TODO update to promise chain // TODO add render type to mesh drawStations(); })();