diff --git a/css/index.css b/css/index.css index 57f373e..425fc1d 100644 --- a/css/index.css +++ b/css/index.css @@ -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; diff --git a/index.html b/index.html index cd5e7e9..b94a64b 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
- +
@@ -26,12 +26,11 @@
Wind Speed
- +
- MAP harbors -- DATA optimize properties - DATA remove less informative stations diff --git a/js/behaviors.js b/js/behaviors.js index ee66f37..894cd1b 100644 --- a/js/behaviors.js +++ b/js/behaviors.js @@ -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(); diff --git a/js/chart.js b/js/chart.js index 0aded7d..413cec6 100644 --- a/js/chart.js +++ b/js/chart.js @@ -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) } } }; diff --git a/js/data.js b/js/data.js index 810e446..44840bf 100644 --- a/js/data.js +++ b/js/data.js @@ -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; diff --git a/js/map.js b/js/map.js index a4863a3..1e133e6 100644 --- a/js/map.js +++ b/js/map.js @@ -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 + ")") diff --git a/sass/chart.scss b/sass/chart.scss index 09a5a43..9f24d9e 100644 --- a/sass/chart.scss +++ b/sass/chart.scss @@ -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; +} diff --git a/sass/index.scss b/sass/index.scss index 12bf7aa..5408399 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -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; } diff --git a/sass/map.scss b/sass/map.scss index 533bc48..0a7354c 100644 --- a/sass/map.scss +++ b/sass/map.scss @@ -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 { diff --git a/sass/options.scss b/sass/options.scss index a1577e7..23035b0 100644 --- a/sass/options.scss +++ b/sass/options.scss @@ -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 { diff --git a/server/assemble.js b/server/assemble.js index 299ae36..f3f26dc 100644 --- a/server/assemble.js +++ b/server/assemble.js @@ -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; }); })