You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.8 KiB
102 lines
2.8 KiB
'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();
|
|
})();
|
|
|