Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML sliders built with D3. Position of sliders affects global vars.
// Set default starting values of sliders
var tax = .12;
var revenue = 1000 // Total 2015 revenue of Maryland casinos
var funding = d3.round(tax * revenue)
// Set width of sliders
var sliderWidth = 200;
// Define scales
var taxScale = d3.scale.linear()
.domain([0, .4])
.range([0, sliderWidth])
.clamp(true); // Prevent scale from returning value outside output range
var revenueScale = d3.scale.linear()
.domain([200, 1500])
.range([0, sliderWidth])
.clamp(true);
// Create span with total $ for education
var fundingSpan = d3.select('.funding')
.html('SCHOOLS GET<br/>$' + funding + ' mil')
// Create tax slider
var taxSlider = d3.select('.taxSlider')
.style('width', sliderWidth + 'px');
var taxSliderTray = taxSlider.append('div')
.attr('class', 'slider-tray');
var taxSliderHandle = taxSlider.append('div')
.attr('class', 'slider-handle')
.append('div')
.attr('class', 'slider-handle-icon')
.style('left', taxScale(tax) + 'px');
var taxTitle = d3.select('.tax')
.append('h1')
.html('Tax rate<br/>' + d3.format('%')(tax));
// Create revenue slider
var revenueSlider = d3.select('.revenueSlider')
.style('width', sliderWidth + 'px');
var revenueSliderTray = revenueSlider.append('div')
.attr('class', 'slider-tray');
var revenueSliderHandle = revenueSlider.append('div')
.attr('class', 'slider-handle')
.append('div')
.attr('class', 'slider-handle-icon')
.style('left', revenueScale(revenue) + 'px');
var revenueTitle = d3.select('.revenue')
.append('h1')
.html('Casino revenue</br>'
+ '$' + d3.format('.0d')(revenue) + ' million');
// Define event listeners for sliders
var dispatch = d3.dispatch('taxSliderChange', 'revenueSliderChange');
dispatch.on('taxSliderChange', function(value) {
tax = value;
fundingSpan.html('SCHOOLS GET<br/>$' + d3.round(revenue * tax) + ' mil');
taxSliderHandle.style('left', taxScale(value) + 'px');
taxTitle.html('Tax rate<br/>' + d3.format('%')(value));
});
dispatch.on('revenueSliderChange', function(value) {
revenue = value;
fundingSpan.html('SCHOOLS GET<br/>$' + d3.round(revenue * tax) + ' mil');
revenueSliderHandle.style('left', revenueScale(value) + 'px');
revenueTitle.html('Casino revenue<br/>'
+ '$' + d3.format('.0d')(d3.round(value)) + ' million');
});
// Define drag behavior
var taxDrag = d3.behavior.drag()
.on('dragstart', function() {
dispatch.taxSliderChange(taxScale.invert(
d3.mouse(taxSliderTray.node())[0]));
d3.event.sourceEvent.preventDefault();
})
.on('drag', function() {
dispatch.taxSliderChange(taxScale.invert(
d3.mouse(taxSliderTray.node())[0]));
});
var revenueDrag = d3.behavior.drag()
.on('dragstart', function() {
dispatch.revenueSliderChange(revenueScale.invert(
d3.mouse(revenueSliderTray.node())[0]));
d3.event.sourceEvent.preventDefault();
})
.on('drag', function() {
dispatch.revenueSliderChange(revenueScale.invert(
d3.mouse(revenueSliderTray.node())[0]));
});
taxSlider.call(taxDrag)
revenueSlider.call(revenueDrag)
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
body {
background-color: #EEEEEE;
font-family: sans-serif;
}
.main {
position: relative;
width: 600px;
left: 50%;
margin-left: -300px;
}
.taxSlider {
position: relative;
top: 40px;
}
.revenueSlider {
position: relative;
top: 40px;
}
.slider-tray {
position: relative;
width: 100%;
height: 6px;
border: solid 1px #ccc;
border-top-color: #aaa;
border-radius: 4px;
background-color: #f0f0f0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.slider-handle {
position: relative;
top: 3px;
}
.slider-handle-icon {
width: 14px;
height: 14px;
border: solid 1px #aaa;
position: relative;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
top: -14px;
left: -14px;
}
h2 {
font-size: 40px;
}
h1 {
font-size: 20px;
position: relative;
margin-bottom: -20px;
margin-top: 50px;
}
p {
width: 400px;
}
.funding {
font-weight: bold;
position: absolute;
font-size: 30px;
top: 330px;
right: 150px;
width: 300px;
text-align: right;
}
</style>
</head>
<body>
<div class="main">
<h2>Should Georgia roll the dice on casinos?</h2>
<p>MGM Resorts International wants the Georgia legislature to legalize casinos.
They promise that a gambling tax would help cover
the shortfall in the state's education budget.</p>
<p>But are these promises realistic? Move the sliders below to
see if taxing casinos would put a dent in the annual education budget.</p>
<div class="title tax"></div>
<div class="taxSlider"></div>
<div class="title revenue"></div>
<div class="revenueSlider"></div>
<span class="funding"></span>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/js/casinos.js"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment