|
window.drawSlides = function(){ |
|
var slides = [ |
|
{ |
|
id: 'intro', |
|
visible_threshold: 0, |
|
visible_tmessage: 0, |
|
visible_calibration: 0, |
|
constant_model_score: 0, |
|
}, |
|
{ |
|
id: 'thresholding', |
|
visible_threshold: 1, |
|
visible_tmessage: 0, |
|
visible_calibration: 0, |
|
constant_model_score: 0, |
|
|
|
target_threshold: .4 |
|
}, |
|
{ |
|
id: 'adjustable_thresholding', |
|
visible_threshold: 1, |
|
visible_tmessage: 1, |
|
visible_calibration: 0, |
|
constant_model_score: 0, |
|
target_threshold: .47 |
|
|
|
}, |
|
{ |
|
id: 'calibration', |
|
visible_threshold: 0, |
|
visible_tmessage: 0, |
|
visible_calibration: 1, |
|
constant_model_score: 0, |
|
target_thresholds: [0, 0.2, 0.4, 0.6, 0.8, 1] |
|
}, |
|
{ |
|
id: 'adjusting_calibration', |
|
visible_threshold: 0, |
|
visible_tmessage: 0, |
|
visible_calibration: 1, |
|
constant_model_score: 0, |
|
target_thresholds: [0, 0.15, 0.45, 0.55, 0.83, 1] |
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ |
|
id: 'shifting_data', |
|
visible_threshold: 0, |
|
visible_tmessage: 0, |
|
visible_calibration: 1, |
|
constant_model_score: 1, |
|
filter_rain: true |
|
}, |
|
{ |
|
id: 'beyond_calibration', |
|
visible_threshold: 0, |
|
visible_tmessage: 0, |
|
visible_calibration: 1, |
|
constant_model_score: 1, |
|
target_thresholds: [0, .02, .04, .96, .98, 1], |
|
}, |
|
|
|
] |
|
|
|
var prevSlide = null; |
|
|
|
var gs = d3.graphScroll() |
|
.container(d3.select('#container')) |
|
.graph(d3.selectAll('#container #graph')) |
|
.eventId('uniqueId1') |
|
.sections(d3.selectAll('#container #sections > div')) |
|
.offset(window.isMobile ? 300 : 200) |
|
.on('active', function(i){ |
|
try{ |
|
var slide = slides.slide = slides[i] |
|
|
|
if (!slide) return console.log(`missing slide ${i}`) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var transition_duration = prevSlide ? 500 : 0; |
|
|
|
|
|
var durationScale = 1 |
|
if (prevSlide){ |
|
durationScale = prevSlide.visible_calibration == slide.visible_calibration ? 1 : 3 |
|
} |
|
if (slide.target_thresholds){ |
|
weatherGraph.setThresholds(slide.target_thresholds, transition_duration*durationScale) |
|
} |
|
if (slide.target_threshold){ |
|
weatherGraph.setThreshold(slide.target_threshold, transition_duration*durationScale) |
|
} |
|
|
|
calibrationCurve.renderBuckets() |
|
|
|
|
|
weatherGraph.thresholdSel |
|
.st({pointerEvents: slide.visible_threshold ? 'all' : 'none'}) |
|
.transition().duration(transition_duration) |
|
.st({opacity: slide.visible_threshold}); |
|
|
|
weatherGraph.messageSel |
|
.transition().duration(transition_duration) |
|
.st({opacity: slide.visible_tmessage}); |
|
|
|
weatherGraph.predictionSel |
|
.transition().duration(transition_duration) |
|
.at({strokeOpacity: slide.visible_threshold ? 1: 0}); |
|
|
|
weatherGraph.weatherGroupSel |
|
.transition().duration(transition_duration) |
|
.ease(d3.easeBounce).delay((d, i) => Math.random()*transition_duration) |
|
.st({opacity: d => slide.filter_rain && d.is_filter ? 0 : 1}) |
|
|
|
weatherGraph.thresholdsGroupSel |
|
.st({pointerEvents: slide.visible_calibration ? 'all' : 'none'}) |
|
.transition().duration(transition_duration) |
|
.st({opacity: slide.visible_calibration}) |
|
|
|
calibrationCurve.c.svg |
|
.transition().duration(transition_duration) |
|
.st({opacity: slide.visible_calibration}) |
|
|
|
|
|
prevSlide = slide; |
|
} catch (e){ |
|
console.log(e) |
|
} |
|
}) |
|
|
|
return slides |
|
} |
|
|
|
if (window.init) window.init() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|