ben-burlingham
10 years ago
parent
796fe7746c
commit
080a4251a9
15 changed files with 533 additions and 17846 deletions
@ -0,0 +1,19 @@ |
|||||||
|
//=============================
|
||||||
|
//
|
||||||
|
// IIFE ENTRY POINT
|
||||||
|
//
|
||||||
|
//=============================
|
||||||
|
(function() { |
||||||
|
Promise.resolve() |
||||||
|
.then(BuoyAnalysisData.populateMapData) |
||||||
|
.then(BuoyAnalysisData.populateSrcFile) |
||||||
|
|
||||||
|
.then(BuoyAnalysisSvgMap.drawMap) |
||||||
|
.then(BuoyAnalysisSvgMap.drawStations) |
||||||
|
.then(BuoyAnalysisSvgMap.drawReticle) |
||||||
|
|
||||||
|
.then(BuoyAnalysisUiDom.populateMonths) |
||||||
|
.then(BuoyAnalysisUiDom.populateStationDetail) |
||||||
|
|
||||||
|
.then(BuoyAnalysisUiBehaviors.attachBehaviors) |
||||||
|
})(); |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,90 @@ |
|||||||
|
var BuoyAnalysisData = { |
||||||
|
mapW: 450, |
||||||
|
|
||||||
|
mapH: 450, |
||||||
|
|
||||||
|
mapJson: {}, |
||||||
|
|
||||||
|
stationJson: {}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
populateMapData: function() { |
||||||
|
return new Promise(function(resolve) { |
||||||
|
d3.json('client/_map.json', function(error, json) { |
||||||
|
BuoyAnalysisData.mapJson = json; |
||||||
|
resolve(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
populateSrcFile: function() { |
||||||
|
return new Promise(function(resolve) { |
||||||
|
d3.json('client/_stations.json', function(error, json) { |
||||||
|
BuoyAnalysisData.stationJson = json; |
||||||
|
resolve(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
calculateYearlyAverages: function(stations) { |
||||||
|
var sum, count, avg; |
||||||
|
var years = {}; |
||||||
|
|
||||||
|
for (var i = 1982; i < 2016; i++) { |
||||||
|
sum = 0; |
||||||
|
count = 0; |
||||||
|
|
||||||
|
stations.forEach(function(id) { |
||||||
|
avg = BuoyAnalysisData.stationJson[id]['avgs' + i]; |
||||||
|
|
||||||
|
if (avg === undefined || avg.y === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
sum += avg.y; |
||||||
|
count++; |
||||||
|
}); |
||||||
|
|
||||||
|
years['y' + i] = (sum / count) || 0; |
||||||
|
} |
||||||
|
|
||||||
|
return years; |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
calculateMonthlyAverages: function(stations, year) { |
||||||
|
var sum, count, avg; |
||||||
|
var months = {}; |
||||||
|
|
||||||
|
for (var i = 0; i < 12; i++) { |
||||||
|
sum = 0; |
||||||
|
count = 0; |
||||||
|
|
||||||
|
stations.forEach(function(id) { |
||||||
|
avg = BuoyAnalysisData.stationJson[id]['avgs' + year]; |
||||||
|
|
||||||
|
if (avg === undefined || avg.m[i] === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
sum += avg.m[i]; |
||||||
|
count++; |
||||||
|
}); |
||||||
|
|
||||||
|
months['m' + i] = (sum / count) || 0; |
||||||
|
} |
||||||
|
|
||||||
|
return months; |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
var BuoyAnalysisSvgMap = { |
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
projection: d3.geo.mercator() |
||||||
|
.center([-122, 38]) |
||||||
|
.scale(1960) |
||||||
|
.translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]), |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
drawMap: function() { |
||||||
|
var path = d3.geo.path().projection(BuoyAnalysisSvgMap.projection); |
||||||
|
|
||||||
|
d3.select("svg#map").selectAll('.subunit') |
||||||
|
.data(BuoyAnalysisData.mapJson.features) |
||||||
|
.enter().append('path') |
||||||
|
.attr('d', path) |
||||||
|
.attr('fill', 'khaki') |
||||||
|
.attr('stroke', 'lime'); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
drawStations: function() { |
||||||
|
var tmp; |
||||||
|
var station; |
||||||
|
var stations = []; |
||||||
|
|
||||||
|
for (var prop in BuoyAnalysisData.stationJson) { |
||||||
|
station = BuoyAnalysisData.stationJson[prop]; |
||||||
|
|
||||||
|
tmp = BuoyAnalysisSvgMap.projection([station.lon, station.lat]); |
||||||
|
station.x = tmp[0]; |
||||||
|
station.y = tmp[1]; |
||||||
|
|
||||||
|
stations.push(station); |
||||||
|
} |
||||||
|
|
||||||
|
d3.select("svg#map").selectAll('.station') |
||||||
|
.data(stations) |
||||||
|
.enter().append('circle') |
||||||
|
.attr('cx', function(d) { return d.x; }) |
||||||
|
.attr('cy', function(d) { return d.y; }) |
||||||
|
.attr('r', 3) |
||||||
|
.attr('id', function(d) { return 's' + d.id; }) |
||||||
|
.attr('fill', '#f00') |
||||||
|
.attr('stroke', '#f00') |
||||||
|
.attr('stroke-width', 5) |
||||||
|
// .on("mouseover", startAnimateDetail)
|
||||||
|
// .on("mouseout", stopAnimateDetail)
|
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
drawReticle: function() { |
||||||
|
d3.select("svg#map").append('circle') |
||||||
|
.attr('r', 50) |
||||||
|
.attr('fill', 'rgba(200, 200, 200, 0.5)') |
||||||
|
.attr('stroke', '#f00') |
||||||
|
.attr("transform", "translate(" + 100 + "," + 100 + ")") |
||||||
|
.data([ {"x": 100, "y": 100} ]) |
||||||
|
.classed('reticle', true); |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
var BuoyAnalysisUiBehaviors = { |
||||||
|
stationClick: function() { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
stationMouseover: function() { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
reticleDrag: function(d) { |
||||||
|
d.x += d3.event.dx |
||||||
|
d.y += d3.event.dy |
||||||
|
|
||||||
|
d3.select(this).attr('transform', 'translate(' + [ d.x, d.y ] + ')'); |
||||||
|
}, |
||||||
|
|
||||||
|
reticleDragEnd: function(d) { |
||||||
|
var dX, dY, squares, distance, station; |
||||||
|
var stations = []; |
||||||
|
|
||||||
|
for (var s in BuoyAnalysisData.stationJson) { |
||||||
|
station = BuoyAnalysisData.stationJson[s]; |
||||||
|
|
||||||
|
dX = d.x - station.x; |
||||||
|
dY = d.y - station.y; |
||||||
|
|
||||||
|
squares = Math.pow(dX, 2) + Math.pow(dY, 2) |
||||||
|
distance = Math.pow(squares, 0.5); |
||||||
|
|
||||||
|
if (distance < 50) { |
||||||
|
stations.push(s); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
BuoyAnalysisData.calculateYearlyAverages(stations); |
||||||
|
BuoyAnalysisData.calculateMonthlyAverages(stations, 1982); |
||||||
|
}, |
||||||
|
|
||||||
|
reticleResize: function() { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
attachBehaviors: function() { |
||||||
|
// d3.selectAll('.detail')
|
||||||
|
// .on('mouseover', startAnimateStation)
|
||||||
|
// .on('mouseout', stopAnimateStation);
|
||||||
|
|
||||||
|
d3.select('.reticle') |
||||||
|
.call(d3.behavior.drag() |
||||||
|
.on('drag', BuoyAnalysisUiBehaviors.reticleDrag) |
||||||
|
.on('dragend', BuoyAnalysisUiBehaviors.reticleDragEnd) |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// function startAnimateStation() {
|
||||||
|
// var id = d3.event.target.id || d3.event.target.parentNode.id;
|
||||||
|
// var selector = '#' + id.split('-')[1];
|
||||||
|
|
||||||
|
// d3.select(selector)
|
||||||
|
// .transition()
|
||||||
|
// .attr('r', '10')
|
||||||
|
// .duration(200)
|
||||||
|
// };
|
||||||
|
|
||||||
|
// function stopAnimateStation() {
|
||||||
|
// var id = d3.event.target.id || d3.event.target.parentNode.id;
|
||||||
|
// var selector = '#' + id.split('-')[1];
|
||||||
|
|
||||||
|
// d3.select(selector)
|
||||||
|
// .transition()
|
||||||
|
// .attr('r', '3')
|
||||||
|
// .duration(200)
|
||||||
|
// };
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// *
|
||||||
|
// */
|
||||||
|
// function startAnimateDetail() {
|
||||||
|
// var id = d3.event.target.id;
|
||||||
|
// d3.select('#detail-' + id)
|
||||||
|
// .classed('active', true)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// *
|
||||||
|
// */
|
||||||
|
// function stopAnimateDetail() {
|
||||||
|
// var id = d3.event.target.id;
|
||||||
|
// d3.select('#detail-' + id)
|
||||||
|
// .classed('active', false)
|
||||||
|
// }
|
||||||
@ -0,0 +1,67 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
var BuoyAnalysisUiDom = { |
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
populateMonths: function() { |
||||||
|
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; |
||||||
|
|
||||||
|
var div; |
||||||
|
var bottom = document.querySelector('.container-bottom'); |
||||||
|
|
||||||
|
for (var i = 0; i < 12; i++) { |
||||||
|
div = document.createElement('div'); |
||||||
|
div.className = 'month'; |
||||||
|
div.innerHTML = months[i]; |
||||||
|
bottom.appendChild(div); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
populateStationDetail: function() { |
||||||
|
var div, name, lat, lon; |
||||||
|
var center = document.querySelector('.container-center'); |
||||||
|
var arr = []; |
||||||
|
|
||||||
|
for (var prop in BuoyAnalysisData.stationJson) { |
||||||
|
arr.push({ |
||||||
|
id: prop, |
||||||
|
lat: BuoyAnalysisData.stationJson[prop].lat, |
||||||
|
lon: BuoyAnalysisData.stationJson[prop].lon, |
||||||
|
name: BuoyAnalysisData.stationJson[prop].name |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
arr.sort(function(a, b) { |
||||||
|
return a.lon < b.lon; |
||||||
|
}); |
||||||
|
|
||||||
|
arr.forEach(function(obj) { |
||||||
|
name = document.createElement('span'); |
||||||
|
name.className = 'station-name'; |
||||||
|
name.innerHTML = obj.name; |
||||||
|
|
||||||
|
lat = document.createElement('span'); |
||||||
|
lat.className = 'station-lat'; |
||||||
|
lat.innerHTML = obj.lat; |
||||||
|
|
||||||
|
lon = document.createElement('span'); |
||||||
|
lon.className = 'station-lon'; |
||||||
|
lon.innerHTML = obj.lon; |
||||||
|
|
||||||
|
div = document.createElement('div'); |
||||||
|
div.className = 'detail'; |
||||||
|
div.id = 'detail-' + obj.id; |
||||||
|
div.style.border = '1px solid red' |
||||||
|
|
||||||
|
div.appendChild(name); |
||||||
|
div.appendChild(lat); |
||||||
|
div.appendChild(lon); |
||||||
|
|
||||||
|
center.appendChild(div); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
@ -1,174 +0,0 @@ |
|||||||
'use strict'; |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
function Mesh(width, height, side) { |
|
||||||
// Length of a side
|
|
||||||
this.side = side; |
|
||||||
this.width = width; |
|
||||||
this.height = height; |
|
||||||
|
|
||||||
// How far a seed will extend its reach
|
|
||||||
this.seedWeight = 5; |
|
||||||
|
|
||||||
// Color seed coordinants
|
|
||||||
// this.addSeed(new MeshSeed(0, 0, '#ff0000', this.seedWeight), faces);
|
|
||||||
// this.addSeed(new MeshSeed(0, this.height - 1, '#0000ff', this.seedWeight), faces);
|
|
||||||
// this.addSeed(new MeshSeed(this.width - 1, 0, '#00ff00', this.seedWeight), faces);
|
|
||||||
// this.addSeed(new MeshSeed(this.width - 1, this.height - 1, '#ffff00', this.seedWeight), faces);
|
|
||||||
|
|
||||||
// this.calculateFills(faces);
|
|
||||||
|
|
||||||
// var svg = d3.select("body").append("svg").attr('width', this.width).attr('height', this.height);
|
|
||||||
|
|
||||||
// d3.select(id).attr('fill', seed.fill);
|
|
||||||
// for (var i = 0, len = seeds.length; i < len; i++) {
|
|
||||||
// d3.select(seeds[i].faceId).attr('fill', seeds[i].fill);
|
|
||||||
// }
|
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
Mesh.prototype = { |
|
||||||
/** |
|
||||||
* Faces must be a one dimensional array to pass to D3. |
|
||||||
*/ |
|
||||||
initFaces: function(width, height, side) { |
|
||||||
var countW = Math.ceil(width / side); |
|
||||||
var countH = Math.ceil(height / side); |
|
||||||
var all = []; |
|
||||||
|
|
||||||
for (var w = 0; w < countW; w++) { |
|
||||||
for (var h = 0; h < countH; h++) { |
|
||||||
all.push(new MeshFace( |
|
||||||
`f-${w}-${h}-${all.length}`, |
|
||||||
w * side, |
|
||||||
h * side, |
|
||||||
side |
|
||||||
)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return all; |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
calculateFills: function(faces) { |
|
||||||
var len = faces.length; |
|
||||||
var hexes, colors; |
|
||||||
|
|
||||||
var populate = function(color) { |
|
||||||
var arr = []; |
|
||||||
for (var k = 0; k < color.weight; k++) { |
|
||||||
arr.push(color.hex); |
|
||||||
} |
|
||||||
return arr; |
|
||||||
}; |
|
||||||
|
|
||||||
for (var i = 0; i < len; i++) { |
|
||||||
hexes = []; |
|
||||||
|
|
||||||
for (var j = 0; j < faces[i].colors.length; j++) { |
|
||||||
colors = faces[i].colors[j]; |
|
||||||
hexes = hexes.concat(populate(colors)); |
|
||||||
} |
|
||||||
|
|
||||||
while (hexes.length < this.seedWeight) { |
|
||||||
hexes.push('#ffffff'); |
|
||||||
} |
|
||||||
|
|
||||||
faces[i].fill = this.averageHexCollection(hexes); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
addSeed: function(seed, faces) { |
|
||||||
var faceX = Math.floor(seed.x / this.side); |
|
||||||
var faceY = Math.floor(seed.y / this.side); |
|
||||||
|
|
||||||
var countX = this.width / this.side; |
|
||||||
var countY = this.height / this.side; |
|
||||||
|
|
||||||
var n = this.seedWeight; |
|
||||||
var len = faces.length; |
|
||||||
var delta, index, weight; |
|
||||||
|
|
||||||
for (var x = (faceX - n + 1); x < faceX + n; x++) { |
|
||||||
if (x < 0 || x >= countX) { |
|
||||||
continue; |
|
||||||
} |
|
||||||
|
|
||||||
for (var y = (faceY - n + 1); y < faceY + n; y++) { |
|
||||||
if (y < 0 || y >= countY) { |
|
||||||
continue; |
|
||||||
} |
|
||||||
|
|
||||||
// Weights decrement outwards from source in a given shape:
|
|
||||||
|
|
||||||
// Diamonds:
|
|
||||||
// delta = Math.abs(faceX - x) + Math.abs(faceY - y);
|
|
||||||
// weight = Math.max(0, n - delta);
|
|
||||||
|
|
||||||
// Squares:
|
|
||||||
var weight = n - Math.max(Math.abs(faceX - x), Math.abs(faceY - y)); |
|
||||||
|
|
||||||
index = x * countY + y; |
|
||||||
|
|
||||||
if (weight > 0 && index >= 0 && index < len) { |
|
||||||
faces[index].colors.push({ hex: seed.fill, weight: weight }); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
averageComponentCollection: function(collection) { |
|
||||||
var len = collection.length; |
|
||||||
var total = 0; |
|
||||||
|
|
||||||
for (var i = 0; i < len; i++) { |
|
||||||
total += parseInt(collection[i], 16); |
|
||||||
} |
|
||||||
|
|
||||||
var avg = Math.round(total / len); |
|
||||||
avg = avg.toString(16); |
|
||||||
avg = ('00' + avg).slice(-2); |
|
||||||
|
|
||||||
return avg; |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
averageHexCollection: function(collection) { |
|
||||||
// check hex against regex
|
|
||||||
|
|
||||||
var allR = []; |
|
||||||
var allG = []; |
|
||||||
var allB = []; |
|
||||||
var len = collection.length; |
|
||||||
var tmp, hex; |
|
||||||
|
|
||||||
for (var i = 0; i < len; i++) { |
|
||||||
tmp = collection[i].substr(1); |
|
||||||
|
|
||||||
allR.push(tmp.substr(0, 2)); |
|
||||||
allG.push(tmp.substr(2, 2)); |
|
||||||
allB.push(tmp.substr(4, 2)); |
|
||||||
} |
|
||||||
|
|
||||||
var r = this.averageComponentCollection(allR); |
|
||||||
var g = this.averageComponentCollection(allG); |
|
||||||
var b = this.averageComponentCollection(allB); |
|
||||||
|
|
||||||
return '#' + r + g + b; |
|
||||||
} |
|
||||||
}; |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
'use strict'; |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
function MeshFace(id, x, y, side) { |
|
||||||
this.id = id; |
|
||||||
this.x = x; |
|
||||||
this.y = y; |
|
||||||
this.side = side; |
|
||||||
this.fill = '#fff'; |
|
||||||
this.colors = []; |
|
||||||
}; |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
'use strict'; |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
*/ |
|
||||||
function MeshSeed(x, y, fill, weight) { |
|
||||||
this.x = x; |
|
||||||
this.y = y; |
|
||||||
this.fill = fill; |
|
||||||
this.weight = weight; |
|
||||||
}; |
|
||||||
@ -1,102 +0,0 @@ |
|||||||
'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(); |
|
||||||
})(); |
|
||||||
Loading…
Reference in new issue