ben-burlingham
10 years ago
parent
080a4251a9
commit
df595d6c5e
14 changed files with 499 additions and 332 deletions
@ -1,19 +0,0 @@ |
|||||||
//=============================
|
|
||||||
//
|
|
||||||
// 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,128 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
var BuoyAnalysisChart = { |
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
bars: { |
||||||
|
padding: 24, |
||||||
|
spacing: 2, |
||||||
|
width: 23, |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
barYearX: function(d, i) { |
||||||
|
return i * BuoyAnalysisChart.bars.width + i * BuoyAnalysisChart.bars.spacing + BuoyAnalysisChart.bars.padding; |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
barMonthX: function(d, i) { |
||||||
|
var year = Math.floor(i / 12); |
||||||
|
|
||||||
|
return year * BuoyAnalysisChart.bars.width + BuoyAnalysisChart.bars.padding + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2; |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
draw: function() { |
||||||
|
var years = BuoyAnalysisData.calculateYearlyAverages(BuoyAnalysisMap.reticle.stations); |
||||||
|
|
||||||
|
var months = BuoyAnalysisData.calculateMonthlyAverages(BuoyAnalysisMap.reticle.stations); |
||||||
|
|
||||||
|
var chart = d3.select('#chart'); |
||||||
|
|
||||||
|
var toggles = d3.select('#year-toggles') |
||||||
|
|
||||||
|
chart.selectAll('*').remove(); |
||||||
|
|
||||||
|
var gradient = chart.append("svg:defs") |
||||||
|
.append("svg:linearGradient") |
||||||
|
.attr("id", "Gradient1") |
||||||
|
.attr('gradientTransform', 'rotate(90)') |
||||||
|
|
||||||
|
gradient.append("svg:stop") |
||||||
|
.attr("offset", "0%") |
||||||
|
.attr("stop-color", "#6cf7ce") |
||||||
|
.attr("stop-opacity", 1); |
||||||
|
|
||||||
|
gradient.append("svg:stop") |
||||||
|
.attr("offset", "100%") |
||||||
|
.attr("stop-color", "#40596F") |
||||||
|
.attr("stop-opacity", 1); |
||||||
|
|
||||||
|
chart.selectAll('.bar-year').data(years).enter() |
||||||
|
.append('rect') |
||||||
|
.classed('bar-year', true) |
||||||
|
.attr('fill', 'url("#Gradient1")') |
||||||
|
.attr('width', 23) |
||||||
|
.attr('height', BuoyAnalysisData.axis.h) |
||||||
|
.attr('x', BuoyAnalysisChart.barYearX) |
||||||
|
.attr('y', 0) |
||||||
|
|
||||||
|
chart.selectAll('.mask-year').data(years).enter() |
||||||
|
.append('rect') |
||||||
|
.classed('.mask-year', true) |
||||||
|
.attr('fill', '#fff') |
||||||
|
.attr('width', 25) |
||||||
|
.attr('height', function(d) { |
||||||
|
return BuoyAnalysisData.axis.scale(d.average); |
||||||
|
}) |
||||||
|
.attr('x', function(d, i) { |
||||||
|
return BuoyAnalysisChart.barYearX(d, i) - 1; |
||||||
|
}) |
||||||
|
.attr('y', 0) |
||||||
|
|
||||||
|
toggles.selectAll('div').data(years).enter() |
||||||
|
.append('div') |
||||||
|
.classed('year-toggle', true) |
||||||
|
.text(function(d) { |
||||||
|
return d.year.toString().slice(-2); |
||||||
|
}) |
||||||
|
.attr('x', BuoyAnalysisChart.barYearX) |
||||||
|
.attr('y', 180) |
||||||
|
|
||||||
|
chart.append("g") |
||||||
|
.classed('axis', true) |
||||||
|
.classed('axis-fahrenheit', true) |
||||||
|
.attr('transform', 'translate(24, 0)') |
||||||
|
.attr('fill', '#000') |
||||||
|
.call(BuoyAnalysisData.axis.fahrenheit); |
||||||
|
|
||||||
|
chart.append("g") |
||||||
|
.classed('axis', true) |
||||||
|
.classed('axis-celsius', true) |
||||||
|
.attr('transform', 'translate(871, 0)') |
||||||
|
.call(BuoyAnalysisData.axis.celsius); |
||||||
|
|
||||||
|
chart.append('text') |
||||||
|
.classed('label-axis-y', true) |
||||||
|
.attr('text-anchor', 'middle') |
||||||
|
.text('F') |
||||||
|
.attr('x', 10) |
||||||
|
.attr('y', 15) |
||||||
|
|
||||||
|
chart.append('text') |
||||||
|
.classed('label-axis-y', true) |
||||||
|
.attr('text-anchor', 'middle') |
||||||
|
.text('C') |
||||||
|
.attr('x', 885) |
||||||
|
.attr('y', 15) |
||||||
|
|
||||||
|
chart.selectAll('.bar-month').data(months).enter() |
||||||
|
.append('rect') |
||||||
|
.attr('fill', 'rgba(0, 0, 0, 0.2)') |
||||||
|
.attr('width', 1) |
||||||
|
.attr('height', function(d) { |
||||||
|
return BuoyAnalysisData.axis.scaleInverted(d.average) |
||||||
|
}) |
||||||
|
.attr('x', BuoyAnalysisChart.barMonthX) |
||||||
|
.attr('y', function(d) { |
||||||
|
return BuoyAnalysisData.axis.h - BuoyAnalysisData.axis.scaleInverted(d.average); |
||||||
|
}) |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
//=============================
|
||||||
|
//
|
||||||
|
// IIFE ENTRY POINT
|
||||||
|
//
|
||||||
|
//=============================
|
||||||
|
(function() { |
||||||
|
Promise.resolve() |
||||||
|
.then(BuoyAnalysisData.populateMapData) |
||||||
|
.then(BuoyAnalysisData.populateSrcFile) |
||||||
|
.then(BuoyAnalysisData.setAxisProperties) |
||||||
|
|
||||||
|
.then(BuoyAnalysisMap.drawMap) |
||||||
|
.then(BuoyAnalysisMap.drawStations) |
||||||
|
.then(BuoyAnalysisMap.drawReticle) |
||||||
|
.then(BuoyAnalysisMap.findStationsUnderReticle) |
||||||
|
|
||||||
|
.then(BuoyAnalysisBehaviors.attachBehaviors) |
||||||
|
|
||||||
|
.then(BuoyAnalysisChart.draw) |
||||||
|
})(); |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
var BuoyAnalysisMap = { |
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
reticle: { |
||||||
|
stations: [], |
||||||
|
x: 400, |
||||||
|
y: 300 |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
projection: d3.geo.mercator() |
||||||
|
.center([-122, 37.8]) |
||||||
|
.scale(2600) |
||||||
|
.translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]), |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
drawMap: function() { |
||||||
|
var path = d3.geo.path().projection(BuoyAnalysisMap.projection); |
||||||
|
|
||||||
|
d3.select("svg#map").selectAll('path') |
||||||
|
.data(BuoyAnalysisData.mapJson.features) |
||||||
|
.enter().append('path') |
||||||
|
.attr('d', path) |
||||||
|
.attr('class', function(d) { return 'feature-' + d.properties.iso_3166_2; }) |
||||||
|
.classed('feature', true) |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
drawStations: function() { |
||||||
|
var tmp; |
||||||
|
var station; |
||||||
|
var stations = []; |
||||||
|
|
||||||
|
for (var prop in BuoyAnalysisData.stationJson) { |
||||||
|
station = BuoyAnalysisData.stationJson[prop]; |
||||||
|
|
||||||
|
tmp = BuoyAnalysisMap.projection([station.lon, station.lat]); |
||||||
|
station.x = tmp[0]; |
||||||
|
station.y = tmp[1]; |
||||||
|
|
||||||
|
stations.push(station); |
||||||
|
} |
||||||
|
|
||||||
|
d3.select("svg#map").selectAll('circle') |
||||||
|
.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) |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
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(" + BuoyAnalysisMap.reticle.x + "," + BuoyAnalysisMap.reticle.y + ")") |
||||||
|
.data([ {"x": BuoyAnalysisMap.reticle.x, "y": BuoyAnalysisMap.reticle.y } ]) |
||||||
|
.classed('reticle', true); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
findStationsUnderReticle: function() { |
||||||
|
var reticle = d3.select('.reticle').data()[0]; |
||||||
|
var dX, dY, squares, distance, station; |
||||||
|
var stations = []; |
||||||
|
|
||||||
|
for (var s in BuoyAnalysisData.stationJson) { |
||||||
|
station = BuoyAnalysisData.stationJson[s]; |
||||||
|
|
||||||
|
dX = reticle.x - station.x; |
||||||
|
dY = reticle.y - station.y; |
||||||
|
|
||||||
|
squares = Math.pow(dX, 2) + Math.pow(dY, 2) |
||||||
|
distance = Math.pow(squares, 0.5); |
||||||
|
|
||||||
|
if (distance < 50) { |
||||||
|
stations.push(s); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
BuoyAnalysisMap.reticle.stations = stations; |
||||||
|
} |
||||||
|
}; |
||||||
@ -1,70 +0,0 @@ |
|||||||
'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); |
|
||||||
} |
|
||||||
}; |
|
||||||
@ -1,67 +0,0 @@ |
|||||||
'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); |
|
||||||
}); |
|
||||||
} |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue