-
-
Save zanarmstrong/ab12887fd8882490b5ae to your computer and use it in GitHub Desktop.
slider example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Adapted from Bostock's slider brush: http://bl.ocks.org/mbostock/6452972--> | |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> | |
<style> | |
body { | |
background-color: #393939; | |
font-size: 14px; | |
font-family: 'Raleway', sans-serif; | |
} | |
p { | |
color: white; | |
margin: 50px; | |
} | |
a { | |
color: #4FDEF2; | |
} | |
.axis { | |
fill: gray; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; | |
} | |
.axis .halo { | |
stroke: gray; | |
stroke-width: 4px; | |
stroke-linecap: round; | |
} | |
.slider .handle path { | |
stroke: white; | |
stroke-width: 3px; | |
stroke-linecap: round; | |
pointer-events: none; | |
} | |
.slider .handle text { | |
fill: white; | |
text-align: center; | |
font-size: 18px; | |
} | |
</style> | |
<body> | |
<p>Adapted from Bostock's <a href="http://bl.ocks.org/mbostock/6452972">slider example</a></p> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 200, right: 50, bottom: 200, left: 50}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.bottom - margin.top, | |
startingValue = 1983; | |
// sets scale for slider | |
var x = d3.scale.linear() | |
.domain([1900, 2014]) | |
.range([0, width]) | |
.clamp(true); | |
// defines brush | |
var brush = d3.svg.brush() | |
.x(x) | |
.extent([startingValue, startingValue]) | |
.on("brush", brushed); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
// classic transform to position g | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("g") | |
.attr("class", "x axis") | |
// put in middle of screen | |
.attr("transform", "translate(0," + height / 2 + ")") | |
// inroduce axis | |
.call(d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.tickFormat(function(d) { return d; }) | |
.tickSize(0) | |
.tickPadding(12) | |
.tickValues([1900, 2014])) | |
.select(".domain") | |
.select(function() {console.log(this); return this.parentNode.appendChild(this.cloneNode(true)); }) | |
.attr("class", "halo"); | |
var slider = svg.append("g") | |
.attr("class", "slider") | |
.call(brush); | |
slider.selectAll(".extent,.resize") | |
.remove(); | |
slider.select(".background") | |
.attr("height", height); | |
var handle = slider.append("g") | |
.attr("class", "handle") | |
handle.append("path") | |
.attr("transform", "translate(0," + height / 2 + ")") | |
.attr("d", "M 0 -20 V 20") | |
handle.append('text') | |
.text(startingValue) | |
.attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")"); | |
slider | |
.call(brush.event) | |
function brushed() { | |
var value = brush.extent()[0]; | |
if (d3.event.sourceEvent) { // not a programmatic event | |
handle.select('text'); | |
value = x.invert(d3.mouse(this)[0]); | |
brush.extent([value, value]); | |
} | |
handle.attr("transform", "translate(" + x(value) + ",0)"); | |
handle.select('text').text(Math.floor(value)) | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment