Spaces:
Running
Running
| window.makeSliders = function(){ | |
| var rv = { | |
| population: 144, | |
| headsProb: .5, | |
| } | |
| rv.updateHeadsProb = (headsProb) => { | |
| rv.headsProb = headsProb | |
| updateSliderPos() | |
| estimates.updateEstimates() | |
| estimates.render() | |
| } | |
| rv.updatePopulation = (population) => { | |
| rv.population = population | |
| updateSliderPos() | |
| var scale = d3.clamp(0, 13 / Math.sqrt(population), 1) | |
| sel.studentGroup.st({ | |
| transformOrigin: 'top', | |
| transformOrigin: c.width/2 + 'px ' + 160 + 'px', | |
| transform: `scale(${scale})` | |
| }) | |
| estimates.updateEstimates() | |
| estimates.render() | |
| sel.student.classed('inactive',(d, i) => i >= population) | |
| } | |
| rv.updatePopulationSlider = (val) => { | |
| rv.updatePopulation(val) | |
| } | |
| rv.updateNoiseSlider = (val) => { | |
| rv.updateHeadsProb(val) | |
| } | |
| var updateSliderPos = (function(){ | |
| var width = d3.clamp(50, window.innerWidth/2 - 40, 145) | |
| var height = 30 | |
| var color = '#007276' | |
| var sliderVals = { | |
| population: { | |
| key: 'population', | |
| textFn: d => rv.population + ' students' , | |
| r: [144, 756], | |
| v: 144, | |
| stepFn: d => rv.updatePopulation(Math.round(d.v/2)*2), | |
| }, | |
| headsProb: { | |
| key: 'headsProb', | |
| textFn: d => d3.format('.1%')(rv.headsProb) + ' chance of heads', | |
| r: [.2, .5], | |
| v: .5, | |
| stepFn: d => rv.updateHeadsProb(d.v), | |
| } | |
| } | |
| var sliders = [sliderVals.headsProb, sliderVals.population, sliderVals.headsProb] | |
| sliders.forEach(d => { | |
| d.s = d3.scaleLinear().domain(d.r).range([0, width]) | |
| }) | |
| var sliderSel = d3.selectAll('.slide-container-population,.slide-container-heads-prob').html('') | |
| .data(sliders) | |
| .classed('slider', true) | |
| .st({ | |
| display: 'inline-block', | |
| width: width, | |
| paddingRight: (d, i) => i == 1 ? 40 : 0, | |
| marginTop: 20, | |
| }) | |
| var textSel = sliderSel.append('div.slider-label-container') | |
| .st({marginBottom: -5}) | |
| var svgSel = sliderSel.append('svg').at({width, height}) | |
| .on('click', function(d){ | |
| d.v = d.s.invert(d3.mouse(this)[0]) | |
| d.stepFn(d) | |
| }) | |
| .st({ | |
| cursor: 'pointer' | |
| }) | |
| .append('g').translate(height/2, 1) | |
| svgSel.append('rect').at({width, height, y: -height/2, fill: 'rgba(0,0,0,0)'}) | |
| svgSel.append('path').at({ | |
| d: `M 0 -.5 H ${width}`, | |
| stroke: color, | |
| strokeWidth: 1 | |
| }) | |
| var leftPathSel = svgSel.append('path').at({ | |
| d: `M 0 -.5 H ${width}`, | |
| stroke: color, | |
| strokeWidth: 3 | |
| }) | |
| var drag = d3.drag() | |
| .on('drag', function(d){ | |
| var x = d3.mouse(this)[0] | |
| d.v = d3.clamp(d3.min(d.r), d.s.invert(x), d3.max(d.r)) | |
| d.stepFn(d) | |
| }) | |
| var rectSel = svgSel.append('rect') | |
| .at({ | |
| width: height/2 - 1, | |
| height: height/2 - 1, | |
| stroke: color, | |
| strokeWidth: 3, | |
| fill: '#fff', | |
| }) | |
| .translate([-height/4, -height/4]) | |
| .call(drag) | |
| return isDrag => { | |
| rectSel.at({x: d => Math.round(d.s(rv[d.key]))}) | |
| textSel.text(d => d.textFn(d)) | |
| leftPathSel.at({d: d => `M 0 -.5 H ${d.s(rv[d.key])}`}) | |
| } | |
| })() | |
| updateSliderPos() | |
| return rv | |
| } | |
| if (window.init) window.init() |