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