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

5
index.html
Unescape View File

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

25
js/behaviors.js
Unescape View File

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

178
js/chart.js
Unescape View File

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

44
js/data.js
Unescape View File

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

12
js/map.js
Unescape View File

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

52
sass/chart.scss
Unescape View File

@ -1,33 +1,39 @@
#chart {
border:solid #e8e8e8;
border-width:0 1px;
$sectionW: 240px;
$axisW: 30px;
cursor:pointer;
height:200px;
left:0;
height:100%;
left:540px;
position:absolute;
top:600px;
width:100%;
top:20px;
width:240px;
svg {
margin-left:$axisW;
height:100%;
width:$sectionW - $axisW;
}
}
#year-labels {
border:solid #e8e8e8;
border-width:0 1px 1px 1px;
// border:solid #e8e8e8;
font-size:0;
height:30px;
padding-left:24px;
height:100%;
left:540px;
padding-top:15px;
position:absolute;
top:800px;
width:100%;
top:20px;
width:30px;
.label {
color:#bbb;
color:#777;
cursor:pointer;
display:inline-block;
line-height:20px;
font-size:9px;
margin-right:2px;
height:23px;
line-height:20px;
margin-bottom:2px;
text-align:center;
width:23px;
}
}
@ -41,12 +47,16 @@
}
.axis .tick {
fill:#888;
font-size:8px;
fill:#aaa;
font-size:10px;
}
.label-axis-y {
fill: #333;
.label-axis-x {
fill: #aaa;
font-size:10px;
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;
$mainW: 900px;
$mainW: 800px;
* {
box-sizing:border-box;
@ -12,7 +14,8 @@ $mainW: 900px;
.main {
height:$mainH;
margin:50px auto;
margin:10px auto;
padding:20px;
position:relative;
width:$mainW;
}

7
sass/map.scss
Unescape View File

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

11
sass/options.scss
Unescape View File

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

74
server/assemble.js
Unescape View File

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