ben.burlingham
/
buoy-analysis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI converted to vertical layout.

Browse Source
master
ben-burlingham 10 years ago
parent b9b069715b
commit 1a30ee84b7
11 changed files with 265 additions and 221 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      css/index.css
  2. 5
      index.html
  3. 25
      js/behaviors.js
  4. 178
      js/chart.js
  5. 44
      js/data.js
  6. 12
      js/map.js
  7. 52
      sass/chart.scss
  8. 7
      sass/index.scss
  9. 7
      sass/map.scss
  10. 11
      sass/options.scss
  11. 74
      server/assemble.js

71
css/index.css
Unescape View File

@ -8,38 +8,39 @@
.main { .main {
height: 900px; height: 900px;
margin: 50px auto; margin: 10px auto;
padding: 20px;
position: relative; position: relative;
width: 900px; } width: 800px; }
#chart { #chart {
border: solid #e8e8e8;
border-width: 0 1px;
cursor: pointer; cursor: pointer;
height: 200px; height: 100%;
left: 0; left: 540px;
position: absolute; position: absolute;
top: 600px; top: 20px;
width: 100%; } width: 240px; }
#chart svg {
margin-left: 30px;
height: 100%;
width: 210px; }
#year-labels { #year-labels {
border: solid #e8e8e8;
border-width: 0 1px 1px 1px;
font-size: 0; font-size: 0;
height: 30px; height: 100%;
padding-left: 24px; left: 540px;
padding-top: 15px;
position: absolute; position: absolute;
top: 800px; top: 20px;
width: 100%; } width: 30px; }
#year-labels .label { #year-labels .label {
color: #bbb; color: #777;
cursor: pointer; cursor: pointer;
display: inline-block;
line-height: 20px;
font-size: 9px; font-size: 9px;
margin-right: 2px; height: 23px;
text-align: center; line-height: 20px;
width: 23px; } margin-bottom: 2px;
text-align: center; }
.year-toggle:hover { .year-toggle:hover {
background: #eee; } background: #eee; }
@ -49,34 +50,41 @@
stroke: none; } stroke: none; }
.axis .tick { .axis .tick {
fill: #888; fill: #aaa;
font-size: 8px; } font-size: 10px; }
.label-axis-y { .label-axis-x {
fill: #333; fill: #aaa;
font-size: 10px; font-size: 10px;
letter-spacing: normal; } letter-spacing: normal; }
.tick-line {
stroke: #f0f0f0; }
#map { #map {
background: #e8fbfe; background: #e8fbfe;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
height: 600px; height: 600px;
position: relative; position: relative;
width: 100%; width: 500px;
z-index: 0; } z-index: 0; }
#map svg {
height: 100%;
width: 100%; }
.feature { .feature {
fill: #dffbb8; fill: #dffbb8;
stroke: #bde484; } stroke: #bde484; }
.reticle { .reticle {
cursor: move;
fill: rgba(153, 173, 40, 0.2); fill: rgba(153, 173, 40, 0.2);
stroke: #5D5336; } stroke: #5D5336; }
.column-display { .column-display {
cursor: pointer; cursor: pointer;
height: 210px; height: 210px;
left: 20px; left: 40px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 330px; top: 330px;
@ -104,13 +112,13 @@
font-weight: bold; } font-weight: bold; }
.reticle-sizer { .reticle-sizer {
left: 20px; left: 40px;
position: absolute; position: absolute;
top: 520px; top: 520px;
z-index: 1; } z-index: 1; }
.bar-display { .bar-display {
left: 25px; left: 40px;
position: absolute; position: absolute;
top: 560px; } top: 560px; }
.bar-display .toggle { .bar-display .toggle {
@ -137,14 +145,15 @@
background-position: 0 10px; } background-position: 0 10px; }
input[type=range] { input[type=range] {
cursor: pointer;
-webkit-appearance: none; } -webkit-appearance: none; }
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 2px;
background: #ddd; background: #ddd;
border: none; border: none;
border-radius: 3px; } border-radius: 3px;
height: 2px;
width: 300px; }
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
background: #d8ebd3; background: #d8ebd3;

5
index.html
Unescape View File

@ -8,7 +8,7 @@
<body> <body>
<div class="main"> <div class="main">
<svg id='map'></svg> <div id='map'><svg></svg></div>
<input type="range" title='Reticle Size' class='reticle-sizer' value='10'> <input type="range" title='Reticle Size' class='reticle-sizer' value='10'>
@ -26,12 +26,11 @@
<div class="toggle toggle5">Wind Speed</div> <div class="toggle toggle5">Wind Speed</div>
</div> </div>
<svg id="chart"></svg> <div id="chart"><svg></svg></div>
<div id="year-labels"></div> <div id="year-labels"></div>
</div> </div>
- MAP harbors - MAP harbors
- DATA optimize properties
- DATA remove less informative stations - DATA remove less informative stations

25
js/behaviors.js
Unescape View File

@ -24,20 +24,9 @@ var BuoyAnalysisBehaviors = {
return; return;
} }
var x = d3.mouse(this)[0];
var y = d3.mouse(this)[1];
if (x < 200) {
x = 200;
}
if (x > 800) {
x = 800;
}
var d = d3.select('.reticle').data()[0]; var d = d3.select('.reticle').data()[0];
d.x = d3.event.x; d.x = d3.mouse(this)[0];
d.y = d3.event.y; d.y = d3.mouse(this)[1];
d3.select('.reticle') d3.select('.reticle')
.attr('transform', 'translate(' + [ d.x, d.y ] + ')') .attr('transform', 'translate(' + [ d.x, d.y ] + ')')
@ -94,19 +83,19 @@ var BuoyAnalysisBehaviors = {
e.classed('selected', true); e.classed('selected', true);
if (e.classed('toggle1')) { if (e.classed('toggle1')) {
BuoyAnalysisChart.bars.property = 'ATMP'; BuoyAnalysisChart.bars.property = 'at';
} }
else if (e.classed('toggle2')) { else if (e.classed('toggle2')) {
BuoyAnalysisChart.bars.property = 'WTMP'; BuoyAnalysisChart.bars.property = 'wt';
} }
else if (e.classed('toggle3')) { else if (e.classed('toggle3')) {
BuoyAnalysisChart.bars.property = 'WVHT'; BuoyAnalysisChart.bars.property = 'wh';
} }
else if (e.classed('toggle4')) { else if (e.classed('toggle4')) {
BuoyAnalysisChart.bars.property = 'WPER'; BuoyAnalysisChart.bars.property = 'wp';
} }
else if (e.classed('toggle5')) { else if (e.classed('toggle5')) {
BuoyAnalysisChart.bars.property = 'WSPD'; BuoyAnalysisChart.bars.property = 'ws';
} }
BuoyAnalysisChart.updateAxes(); BuoyAnalysisChart.updateAxes();

178
js/chart.js
Unescape View File

@ -5,27 +5,25 @@ var BuoyAnalysisChart = {
* *
*/ */
bars: { bars: {
padding: 26, padding: 15,
spacing: 2, spacing: 2,
width: 23, height: 23,
width: 210,
showMonths: true, showMonths: true,
showYears: true, showYears: true,
property: 'WTMP', property: 'wt',
tickValues: null, tickValues: null,
imperialLabel: null, imperialLabel: null,
metricLabel: null, metricLabel: null,
bottomHexValue: null, leftHexValue: null,
topHexValue: null rightHexValue: null
}, },
axis: { axis: {
h: 200,
min: 100,
max: 0,
scale: null, scale: null,
scaleInverted: null, scaleInverted: null,
imperial: null, imperial: null,
@ -35,23 +33,24 @@ var BuoyAnalysisChart = {
/** /**
* *
*/ */
barYearX: function(d, i) { barYearY: function(d, i) {
return i * BuoyAnalysisChart.bars.width + i * BuoyAnalysisChart.bars.spacing + BuoyAnalysisChart.bars.padding; return i * BuoyAnalysisChart.bars.height + i * BuoyAnalysisChart.bars.spacing + BuoyAnalysisChart.bars.padding;
}, },
/** /**
* *
*/ */
barMonthX: function(d, i) { barMonthY: function(d, i) {
var year = Math.floor(i / 12); var year = Math.floor(i / 12);
return year * BuoyAnalysisChart.bars.width + BuoyAnalysisChart.bars.padding + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2; return year * BuoyAnalysisChart.bars.height + BuoyAnalysisChart.bars.padding + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2;
}, },
/** /**
* *
*/ */
appendGradient: function() { appendGradient: function() {
var chart = d3.select('#chart'); var chart = d3.select('#chart svg');
var id = 'gradient-year'; var id = 'gradient-year';
chart.selectAll('#' + id).remove(); chart.selectAll('#' + id).remove();
@ -59,16 +58,15 @@ var BuoyAnalysisChart = {
var gradient = chart.append("svg:defs") var gradient = chart.append("svg:defs")
.append("svg:linearGradient") .append("svg:linearGradient")
.attr("id", id) .attr("id", id)
.attr('gradientTransform', 'rotate(90)')
gradient.append("svg:stop") gradient.append("svg:stop")
.attr("offset", "0%") .attr("offset", "0%")
.attr("stop-color", BuoyAnalysisChart.bars.bottomHexValue) .attr("stop-color", BuoyAnalysisChart.bars.leftHexValue)
.attr("stop-opacity", 1); .attr("stop-opacity", 1);
gradient.append("svg:stop") gradient.append("svg:stop")
.attr("offset", "100%") .attr("offset", "100%")
.attr("stop-color", BuoyAnalysisChart.bars.topHexValue) .attr("stop-color", BuoyAnalysisChart.bars.rightHexValue)
.attr("stop-opacity", 1); .attr("stop-opacity", 1);
}, },
@ -84,46 +82,43 @@ var BuoyAnalysisChart = {
.text(function(d) { .text(function(d) {
return d.year.toString().slice(-2); return d.year.toString().slice(-2);
}) })
.attr('x', BuoyAnalysisChart.barYearX)
.attr('y', 180)
}, },
/** /**
* *
*/ */
appendAxes: function() { appendAxes: function() {
var chart = d3.select('#chart'); var chart = d3.select('#chart svg');
chart.selectAll('.axis').remove(); chart.selectAll('.axis').remove();
chart.selectAll('.label-axis-y').remove(); chart.selectAll('.label-axis-x').remove();
chart.append("g") chart.append("g")
.classed('axis', true) .classed('axis', true)
.classed('axis-imperial', true) .classed('axis-imperial', true)
.attr('transform', 'translate(30, 0)') .attr('transform', 'translate(0, 19)')
.attr('fill', '#000') .attr('fill', '#000')
.call(BuoyAnalysisChart.axis.imperial); .call(BuoyAnalysisChart.axis.imperial);
chart.append("g") chart.append("g")
.classed('axis', true) .classed('axis', true)
.classed('axis-metric', true) .classed('axis-metric', true)
.attr('transform', 'translate(871, 0)') .attr('transform', 'translate(0, 860)')
.call(BuoyAnalysisChart.axis.metric); .call(BuoyAnalysisChart.axis.metric);
chart.append('text') chart.append('text')
.classed('label-axis-y', true) .classed('label-axis-x', true)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text(BuoyAnalysisChart.bars.imperialLabel) .text(BuoyAnalysisChart.bars.imperialLabel)
.attr('x', 12) .attr('x', 200)
.attr('y', 15) .attr('y', 10)
chart.append('text') chart.append('text')
.classed('label-axis-y', true) .classed('label-axis-x', true)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text(BuoyAnalysisChart.bars.metricLabel) .text(BuoyAnalysisChart.bars.metricLabel)
.attr('x', 885) .attr('x', 200)
.attr('y', 15) .attr('y', 876)
}, },
/** /**
@ -131,55 +126,54 @@ var BuoyAnalysisChart = {
*/ */
updateAxes: function() { updateAxes: function() {
switch(BuoyAnalysisChart.bars.property) { switch(BuoyAnalysisChart.bars.property) {
case 'ATMP': case 'at':
BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20, 24]; BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20];
BuoyAnalysisChart.bars.imperialLabel = 'F'; BuoyAnalysisChart.bars.imperialLabel = '°F';
BuoyAnalysisChart.bars.metricLabel = 'C'; BuoyAnalysisChart.bars.metricLabel = '°C';
BuoyAnalysisChart.bars.topHexValue = '#a7dde6'; BuoyAnalysisChart.bars.leftHexValue = '#a7dde6';
BuoyAnalysisChart.bars.bottomHexValue = '#f75c5c'; BuoyAnalysisChart.bars.rightHexValue = '#f75c5c';
break; break;
case 'WTMP': case 'wt':
BuoyAnalysisChart.bars.tickValues = [10, 13, 15.5, 18.5, 21]; BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20];
BuoyAnalysisChart.bars.imperialLabel = 'F'; BuoyAnalysisChart.bars.imperialLabel = '°F';
BuoyAnalysisChart.bars.metricLabel = 'C'; BuoyAnalysisChart.bars.metricLabel = '°C';
BuoyAnalysisChart.bars.topHexValue = '#a7dde6'; BuoyAnalysisChart.bars.leftHexValue = '#a7dde6';
BuoyAnalysisChart.bars.bottomHexValue = '#f75c5c'; BuoyAnalysisChart.bars.rightHexValue = '#f75c5c';
break; break;
case 'WVHT': case 'wh':
BuoyAnalysisChart.bars.tickValues = [0, 1, 2, 3, 4]; BuoyAnalysisChart.bars.tickValues = [1, 2, 3, 4];
BuoyAnalysisChart.bars.imperialLabel = 'FT'; BuoyAnalysisChart.bars.imperialLabel = 'FT';
BuoyAnalysisChart.bars.metricLabel = 'M'; BuoyAnalysisChart.bars.metricLabel = 'M';
BuoyAnalysisChart.bars.topHexValue = '#c3fd98'; BuoyAnalysisChart.bars.leftHexValue = '#c3fd98';
BuoyAnalysisChart.bars.bottomHexValue = '#f00'; BuoyAnalysisChart.bars.rightHexValue = '#f00';
// BuoyAnalysisChart.bars.bottomHexValue = '#ff0';
break; break;
case 'WPER': case 'wp':
BuoyAnalysisChart.bars.tickValues = [5, 7, 9, 11, 13, 15]; BuoyAnalysisChart.bars.tickValues = [5, 7, 9, 11, 13];
BuoyAnalysisChart.bars.imperialLabel = 'SEC'; BuoyAnalysisChart.bars.imperialLabel = 'SEC';
BuoyAnalysisChart.bars.metricLabel = 'SEC'; BuoyAnalysisChart.bars.metricLabel = 'SEC';
BuoyAnalysisChart.bars.topHexValue = '#9c90ca'; BuoyAnalysisChart.bars.leftHexValue = '#9c90ca';
BuoyAnalysisChart.bars.bottomHexValue = '#a8747e'; BuoyAnalysisChart.bars.rightHexValue = '#a8747e';
break; break;
case 'WSPD': case 'ws':
BuoyAnalysisChart.bars.tickValues = [3, 6, 9, 12]; BuoyAnalysisChart.bars.tickValues = [3.05, 6.1, 9.15];
BuoyAnalysisChart.bars.imperialLabel = 'FT/S'; BuoyAnalysisChart.bars.imperialLabel = 'FT/S';
BuoyAnalysisChart.bars.metricLabel = 'M/S'; BuoyAnalysisChart.bars.metricLabel = 'M/S';
BuoyAnalysisChart.bars.topHexValue = '#f3cab8'; BuoyAnalysisChart.bars.leftHexValue = '#f3cab8';
BuoyAnalysisChart.bars.bottomHexValue = '#e6dea5'; BuoyAnalysisChart.bars.rightHexValue = '#e6dea5';
break; break;
}; };
}, },
@ -192,7 +186,11 @@ var BuoyAnalysisChart = {
var months = BuoyAnalysisData.calculateMonthlyAverages(BuoyAnalysisMap.reticle.stations); var months = BuoyAnalysisData.calculateMonthlyAverages(BuoyAnalysisMap.reticle.stations);
var chart = d3.select('#chart'); var chart = d3.select('#chart svg');
var len = BuoyAnalysisData.years.end - BuoyAnalysisData.years.start;
var h = (BuoyAnalysisChart.bars.height + BuoyAnalysisChart.bars.spacing) * len + BuoyAnalysisChart.bars.padding;
// alert(BuoyAnalysisData.bars.height + ' ' + BuoyAnalysisChart.bars.spacing)
BuoyAnalysisData.setAxisProperties(); BuoyAnalysisData.setAxisProperties();
BuoyAnalysisChart.appendAxes(); BuoyAnalysisChart.appendAxes();
@ -202,29 +200,49 @@ var BuoyAnalysisChart = {
chart.selectAll('.bar-year').remove(); chart.selectAll('.bar-year').remove();
chart.selectAll('.mask-year').remove(); chart.selectAll('.mask-year').remove();
chart.selectAll('.bar-month').remove(); chart.selectAll('.bar-month').remove();
chart.selectAll('.tick-line').remove();
chart.append('line')
.classed('tick-line', true)
.attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0]))
.attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0]))
.attr('y1', 15)
.attr('y2', h)
chart.append('line')
.classed('tick-line', true)
.attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1]))
.attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1]))
.attr('y1', 15)
.attr('y2', h)
if (BuoyAnalysisChart.bars.showYears === true) { if (BuoyAnalysisChart.bars.showYears === true) {
chart.selectAll('.bar-year').data(years).enter() chart.selectAll('.bar-year').data(years).enter()
.append('rect') .append('rect')
.classed('bar-year', true) .classed('bar-year', true)
.attr('fill', 'url("#gradient-year")') .attr('fill', 'url("#gradient-year")')
.attr('width', 23) .attr('height', 23)
.attr('height', BuoyAnalysisChart.axis.h) // .attr('width', BuoyAnalysisChart.bars.width)
.attr('x', BuoyAnalysisChart.barYearX) .attr('width', function(d) {
.attr('y', 0) return BuoyAnalysisChart.axis.scale(d.average);
chart.selectAll('.mask-year').data(years).enter()
.append('rect')
.classed('.mask-year', true)
.attr('fill', '#fff')
.attr('width', 25)
.attr('height', function(d) {
return Math.max(0, BuoyAnalysisChart.axis.scale(d.average));
}) })
.attr('x', function(d, i) { .attr('x', 0)
return BuoyAnalysisChart.barYearX(d, i) - 1; .attr('y', BuoyAnalysisChart.barYearY)
})
.attr('y', 0) // chart.selectAll('.mask-year').data(years).enter()
// .append('rect')
// .classed('.mask-year', true)
// .attr('fill', '#fff')
// .attr('height', 23)
// .attr('width', function(d) {
// return Math.max(0, BuoyAnalysisChart.bars.width - BuoyAnalysisChart.axis.scale(d.average));
// })
// .attr('x', function(d) {
// return BuoyAnalysisChart.axis.scale(d.average);
// })
// .attr('y', function(d, i) {
// return BuoyAnalysisChart.barYearY(d, i);
// })
} }
if (BuoyAnalysisChart.bars.showMonths === true) { if (BuoyAnalysisChart.bars.showMonths === true) {
@ -232,14 +250,18 @@ var BuoyAnalysisChart = {
.append('rect') .append('rect')
.classed('bar-month', true) .classed('bar-month', true)
.attr('fill', 'rgba(0, 0, 0, 0.2)') .attr('fill', 'rgba(0, 0, 0, 0.2)')
.attr('width', 1) .attr('height', 1)
.attr('height', function(d) { .attr('width', function(d) {
return Math.max(0, BuoyAnalysisChart.axis.scaleInverted(d.average)); var w = BuoyAnalysisChart.axis.scale(d.average);
})
.attr('x', BuoyAnalysisChart.barMonthX) if (w <= 20) {
.attr('y', function(d) { return 0;
return BuoyAnalysisChart.axis.h - BuoyAnalysisChart.axis.scaleInverted(d.average); }
return w;
}) })
.attr('x', 0)
.attr('y', BuoyAnalysisChart.barMonthY)
} }
} }
}; };

44
js/data.js
Unescape View File

@ -1,5 +1,5 @@
var BuoyAnalysisData = { var BuoyAnalysisData = {
mapW: 900, mapW: 500,
mapH: 600, mapH: 600,
@ -50,51 +50,45 @@ var BuoyAnalysisData = {
for (var id in json) { for (var id in json) {
for (var year = BuoyAnalysisData.years.start; year <= BuoyAnalysisData.years.end; year++) { for (var year = BuoyAnalysisData.years.start; year <= BuoyAnalysisData.years.end; year++) {
for (var i = 0; i < 12; i++) { for (var i = 0; i < 12; i++) {
if (json[id][property + year]['m'][i] <= 0) { if (json[id]['a' + year][property]['m'][i] <= 0) {
continue; continue;
} }
if (json[id][property + year]['m'][i] < BuoyAnalysisChart.axis.min) { if (json[id]['a' + year][property]['m'][i] < BuoyAnalysisChart.axis.min) {
BuoyAnalysisChart.axis.min = json[id][property + year]['m'][i]; BuoyAnalysisChart.axis.min = json[id]['a' + year][property]['m'][i];
} }
if (json[id][property + year]['m'][i] > BuoyAnalysisChart.axis.max) { if (json[id]['a' + year][property]['m'][i] > BuoyAnalysisChart.axis.max) {
BuoyAnalysisChart.axis.max = json[id][property + year]['m'][i]; BuoyAnalysisChart.axis.max = json[id]['a' + year][property]['m'][i];
} }
} }
} }
} }
// console.log(BuoyAnalysisChart.bars.property) BuoyAnalysisChart.axis.scale = d3.scale.linear().domain([0, BuoyAnalysisChart.axis.max])
// console.log(BuoyAnalysisChart.axis.min) .range([0, BuoyAnalysisChart.bars.width]);
// console.warn(BuoyAnalysisChart.axis.max)
BuoyAnalysisChart.axis.scale = d3.scale.linear() // BuoyAnalysisChart.axis.scaleInverted = d3.scale.linear().domain([0, BuoyAnalysisChart.axis.max])
.domain([BuoyAnalysisChart.axis.min, BuoyAnalysisChart.axis.max]) // .range([BuoyAnalysisChart.bars.width, 0]);
.range([BuoyAnalysisChart.axis.h, 0]);
BuoyAnalysisChart.axis.scaleInverted = d3.scale.linear()
.domain([BuoyAnalysisChart.axis.min, BuoyAnalysisChart.axis.max])
.range([0, BuoyAnalysisChart.axis.h]);
BuoyAnalysisChart.axis.imperial = d3.svg.axis() BuoyAnalysisChart.axis.imperial = d3.svg.axis()
.scale(BuoyAnalysisChart.axis.scale) .scale(BuoyAnalysisChart.axis.scale)
.orient("left") .orient("top")
.tickFormat(function(d) { .tickFormat(function(d) {
var val; var val;
switch(BuoyAnalysisChart.bars.property) { switch(BuoyAnalysisChart.bars.property) {
case 'ATMP': case 'at':
case 'WTMP': case 'wt':
val = Math.round(d * 9 / 5 + 32); val = Math.round(d * 9 / 5 + 32);
break; break;
case 'WVHT': case 'wh':
case 'WSPD': case 'ws':
val = Math.round(d * 3.28 * 10) / 10; val = Math.round(d * 3.28 * 10) / 10;
break; break;
case 'WPER': case 'wp':
val = d; val = d;
break; break;
}; };
@ -105,7 +99,7 @@ var BuoyAnalysisData = {
BuoyAnalysisChart.axis.metric = d3.svg.axis() BuoyAnalysisChart.axis.metric = d3.svg.axis()
.scale(BuoyAnalysisChart.axis.scale) .scale(BuoyAnalysisChart.axis.scale)
.orient("right") .orient("bottom")
.tickValues(tickValues); .tickValues(tickValues);
}, },
@ -121,7 +115,7 @@ var BuoyAnalysisData = {
count = 0; count = 0;
stations.forEach(function(id) { stations.forEach(function(id) {
data = BuoyAnalysisData.stationJson[id][BuoyAnalysisChart.bars.property + year]; data = BuoyAnalysisData.stationJson[id]['a' + year][BuoyAnalysisChart.bars.property];
if (data === undefined || data.y === 0) { if (data === undefined || data.y === 0) {
return; return;
@ -150,7 +144,7 @@ var BuoyAnalysisData = {
count = 0; count = 0;
stations.forEach(function(id) { stations.forEach(function(id) {
data = BuoyAnalysisData.stationJson[id][BuoyAnalysisChart.bars.property + year]; data = BuoyAnalysisData.stationJson[id]['a' + year][BuoyAnalysisChart.bars.property];
if (data === undefined || data.m[month] === 0) { if (data === undefined || data.m[month] === 0) {
return; return;

12
js/map.js
Unescape View File

@ -6,8 +6,8 @@ var BuoyAnalysisMap = {
*/ */
reticle: { reticle: {
stations: [], stations: [],
x: 400, x: 450,
y: 300, y: 550,
scale: d3.scale.linear() scale: d3.scale.linear()
.domain([0, 100]) .domain([0, 100])
.range([20, 350]) .range([20, 350])
@ -17,7 +17,7 @@ var BuoyAnalysisMap = {
* *
*/ */
projection: d3.geo.mercator() projection: d3.geo.mercator()
.center([-122, 37.8]) .center([-122, 37.5])
.scale(2600) .scale(2600)
.translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]), .translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]),
@ -27,7 +27,7 @@ var BuoyAnalysisMap = {
drawMap: function() { drawMap: function() {
var path = d3.geo.path().projection(BuoyAnalysisMap.projection); var path = d3.geo.path().projection(BuoyAnalysisMap.projection);
d3.select('svg#map').append("path") d3.select('#map svg').append("path")
.datum(topojson.feature(BuoyAnalysisData.mapJson, BuoyAnalysisData.mapJson.objects._map)) .datum(topojson.feature(BuoyAnalysisData.mapJson, BuoyAnalysisData.mapJson.objects._map))
.attr('d', path) .attr('d', path)
.classed('feature', true) .classed('feature', true)
@ -51,7 +51,7 @@ var BuoyAnalysisMap = {
stations.push(station); stations.push(station);
} }
d3.select("svg#map").selectAll('circle') d3.select("#map svg").selectAll('circle')
.data(stations) .data(stations)
.enter().append('circle') .enter().append('circle')
.attr('cx', function(d) { return d.x; }) .attr('cx', function(d) { return d.x; })
@ -69,7 +69,7 @@ var BuoyAnalysisMap = {
drawReticle: function() { drawReticle: function() {
var r = BuoyAnalysisMap.reticle.scale(d3.select('.reticle-sizer').property('value')); var r = BuoyAnalysisMap.reticle.scale(d3.select('.reticle-sizer').property('value'));
d3.select("svg#map").append('circle') d3.select("#map svg").append('circle')
.attr('r', r) .attr('r', r)
.attr('fill', 'rgba(200, 200, 200, 0.5)') .attr('fill', 'rgba(200, 200, 200, 0.5)')
.attr("transform", "translate(" + BuoyAnalysisMap.reticle.x + "," + BuoyAnalysisMap.reticle.y + ")") .attr("transform", "translate(" + BuoyAnalysisMap.reticle.x + "," + BuoyAnalysisMap.reticle.y + ")")

52
sass/chart.scss
Unescape View File

@ -1,33 +1,39 @@
#chart { #chart {
border:solid #e8e8e8; $sectionW: 240px;
border-width:0 1px; $axisW: 30px;
cursor:pointer; cursor:pointer;
height:200px; height:100%;
left:0; left:540px;
position:absolute; position:absolute;
top:600px; top:20px;
width:100%; width:240px;
svg {
margin-left:$axisW;
height:100%;
width:$sectionW - $axisW;
}
} }
#year-labels { #year-labels {
border:solid #e8e8e8; // border:solid #e8e8e8;
border-width:0 1px 1px 1px;
font-size:0; font-size:0;
height:30px; height:100%;
padding-left:24px; left:540px;
padding-top:15px;
position:absolute; position:absolute;
top:800px; top:20px;
width:100%; width:30px;
.label { .label {
color:#bbb; color:#777;
cursor:pointer; cursor:pointer;
display:inline-block;
line-height:20px;
font-size:9px; font-size:9px;
margin-right:2px; height:23px;
line-height:20px;
margin-bottom:2px;
text-align:center; text-align:center;
width:23px;
} }
} }
@ -41,12 +47,16 @@
} }
.axis .tick { .axis .tick {
fill:#888; fill:#aaa;
font-size:8px; font-size:10px;
} }
.label-axis-y { .label-axis-x {
fill: #333; fill: #aaa;
font-size:10px; font-size:10px;
letter-spacing:normal; letter-spacing:normal;
} }
.tick-line {
stroke:#f0f0f0;
}

7
sass/index.scss
Unescape View File

@ -1,5 +1,7 @@
// IMPORTANT: Run npm run watch to compile
$mainH: 900px; $mainH: 900px;
$mainW: 900px; $mainW: 800px;
* { * {
box-sizing:border-box; box-sizing:border-box;
@ -12,7 +14,8 @@ $mainW: 900px;
.main { .main {
height:$mainH; height:$mainH;
margin:50px auto; margin:10px auto;
padding:20px;
position:relative; position:relative;
width:$mainW; width:$mainW;
} }

7
sass/map.scss
Unescape View File

@ -3,8 +3,13 @@
border:1px solid #e8e8e8; border:1px solid #e8e8e8;
height:600px; height:600px;
position:relative; position:relative;
width:100%; width:500px;
z-index:0; z-index:0;
svg {
height:100%;
width:100%;
}
} }
.feature { .feature {

11
sass/options.scss
Unescape View File

@ -1,7 +1,7 @@
.column-display { .column-display {
cursor:pointer; cursor:pointer;
height:210px; height:210px;
left:20px; left:40px;
overflow:hidden; overflow:hidden;
position:absolute; position:absolute;
top:330px; top:330px;
@ -38,7 +38,7 @@
} }
.reticle-sizer { .reticle-sizer {
left:20px; left:40px;
position:absolute; position:absolute;
top:520px; top:520px;
z-index:1; z-index:1;
@ -49,7 +49,7 @@
$toggleH: 40px; $toggleH: 40px;
$toggleSpacing: 15px; $toggleSpacing: 15px;
left:25px; left:40px;
position:absolute; position:absolute;
top:560px; top:560px;
@ -89,15 +89,16 @@
} }
input[type=range]{ input[type=range]{
cursor:pointer;
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 2px;
background: #ddd; background: #ddd;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
height: 2px;
width: 300px;
} }
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {

74
server/assemble.js
Unescape View File

@ -1,29 +1,41 @@
var IO = require('./io'); var IO = require('./io');
var meteo = require('./meteo'); var meteo = require('./meteo');
var stations = require('./stations'); var stations = require('./stations');
var chalk = require('chalk'); var chalk = require('chalk');
// a1982 ws m y wh m y wp m y at m y wt m y
//
// { // {
// station-46011: { // station-46011: {
// id: str // id: str
// name: str // name: str
// lat: str // lat: str
// lon: str // lon: str
//
// avg1982: { // a1982: {
// d: int[365] || null, // ws: {
// w: int[52] || null, // m int[12]
// m: int[12] || null, // y int
// y: int || null
// }, // },
// wh: {
// avg1983: ... // m
// y
// }, // },
// // wp: {
// { // m
// id: str // y
// ... // },
// at: {
// m
// y
// },
// wt: {
// m
// y
// }
// },
// a1983: ...
// } // }
// } // }
@ -172,9 +184,7 @@ module.exports = {
function next(index) { function next(index) {
if (index === stations.ids.length) { if (index === stations.ids.length) {
// if (index === 1) { IO.write('stations.json', JSON.stringify(finalResult));
// IO.write('_stations.json', JSON.stringify(finalResult, null, 4));
IO.write('_stations.json', JSON.stringify(finalResult));
return; return;
} }
@ -183,11 +193,13 @@ module.exports = {
// Init objects. // Init objects.
finalResult['s' + station] = {}; finalResult['s' + station] = {};
for (var year = meteo.years.start; year <= meteo.years.end; year++) { for (var year = meteo.years.start; year <= meteo.years.end; year++) {
finalResult['s' + station]['WSPD' + year] = {}; // 6 finalResult['s' + station]['a' + year] = {
finalResult['s' + station]['WVHT' + year] = {}; // 8 ws: {}, // 6
finalResult['s' + station]['WPER' + year] = {}; // 9 wh: {}, // 8
finalResult['s' + station]['ATMP' + year] = {}; // 13 wp: {}, // 9
finalResult['s' + station]['WTMP' + year] = {}; // 14 at: {}, // 13
wt: {} // 14
};
} }
Promise.resolve() Promise.resolve()
@ -205,7 +217,7 @@ module.exports = {
.then(module.exports.getAllMonthlyAverages.bind(null, station, 6)) .then(module.exports.getAllMonthlyAverages.bind(null, station, 6))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WSPD' + (meteo.years.start + index)].m = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].ws.m = averages;
}); });
}) })
@ -213,7 +225,7 @@ module.exports = {
.then(module.exports.getAllYearlyAverages.bind(null, station, 6)) .then(module.exports.getAllYearlyAverages.bind(null, station, 6))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WSPD' + (meteo.years.start + index)].y = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].ws.y = averages;
}); });
}) })
@ -221,7 +233,7 @@ module.exports = {
.then(module.exports.getAllMonthlyAverages.bind(null, station, 8)) .then(module.exports.getAllMonthlyAverages.bind(null, station, 8))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WVHT' + (meteo.years.start + index)].m = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].wh.m = averages;
}); });
}) })
@ -229,7 +241,7 @@ module.exports = {
.then(module.exports.getAllYearlyAverages.bind(null, station, 8)) .then(module.exports.getAllYearlyAverages.bind(null, station, 8))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WVHT' + (meteo.years.start + index)].y = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].wh.y = averages;
}); });
}) })
@ -237,7 +249,7 @@ module.exports = {
.then(module.exports.getAllMonthlyAverages.bind(null, station, 9)) .then(module.exports.getAllMonthlyAverages.bind(null, station, 9))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WPER' + (meteo.years.start + index)].m = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].wp.m = averages;
}); });
}) })
@ -245,7 +257,7 @@ module.exports = {
.then(module.exports.getAllYearlyAverages.bind(null, station, 9)) .then(module.exports.getAllYearlyAverages.bind(null, station, 9))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WPER' + (meteo.years.start + index)].y = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].wp.y = averages;
}); });
}) })
@ -253,7 +265,7 @@ module.exports = {
.then(module.exports.getAllMonthlyAverages.bind(null, station, 13)) .then(module.exports.getAllMonthlyAverages.bind(null, station, 13))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['ATMP' + (meteo.years.start + index)].m = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].at.m = averages;
}); });
}) })
@ -261,7 +273,7 @@ module.exports = {
.then(module.exports.getAllYearlyAverages.bind(null, station, 13)) .then(module.exports.getAllYearlyAverages.bind(null, station, 13))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['ATMP' + (meteo.years.start + index)].y = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].at.y = averages;
}); });
}) })
@ -269,7 +281,7 @@ module.exports = {
.then(module.exports.getAllMonthlyAverages.bind(null, station, 14)) .then(module.exports.getAllMonthlyAverages.bind(null, station, 14))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WTMP' + (meteo.years.start + index)].m = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].wt.m = averages;
}); });
}) })
@ -277,7 +289,7 @@ module.exports = {
.then(module.exports.getAllYearlyAverages.bind(null, station, 14)) .then(module.exports.getAllYearlyAverages.bind(null, station, 14))
.then(function(arr) { .then(function(arr) {
arr.forEach(function(averages, index) { arr.forEach(function(averages, index) {
finalResult['s' + station]['WTMP' + (meteo.years.start + index)].y = averages; finalResult['s' + station]['a' + (meteo.years.start + index)].wt.y = averages;
}); });
}) })

Write Preview
Loading…
Cancel
Save