You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.9 KiB
128 lines
3.9 KiB
'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);
|
|
})
|
|
}
|
|
};
|
|
|