Renders a simple interactive slider.
Inspired by The New York Times Is It Better to Rent or Buy?
license: bsd-3-clause | |
scrolling: yes | |
border: no |
Renders a simple interactive slider.
Inspired by The New York Times Is It Better to Rent or Buy?
<!doctype html> | |
<html lang="en"> | |
<title>d3-simple-slider</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/d3-simple-slider@0.2.0/build/d3-simple-slider.js"></script> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" | |
crossorigin="anonymous"> | |
<body> | |
<div class="container"> | |
<h1>Basic example</h1> | |
<div class="row align-items-center"> | |
<div class="col-sm-2"> | |
<p id="value1"></p> | |
</div> | |
<div class="col-sm"> | |
<div id="slider1"></div> | |
</div> | |
</div> | |
<a id="setValue1" href="#">Reset</a> | |
<h1>Step example</h1> | |
<div class="row align-items-center"> | |
<div class="col-sm-2"> | |
<p id="value2"></p> | |
</div> | |
<div class="col-sm"> | |
<div id="slider2"></div> | |
</div> | |
</div> | |
<a id="setValue2" href="#">Reset</a> | |
<h1>Time example</h1> | |
<div class="row align-items-center"> | |
<div class="col-sm-2"> | |
<p id="value3"></p> | |
</div> | |
<div class="col-sm"> | |
<div id="slider3"></div> | |
</div> | |
</div> | |
<a id="setValue3" href="#">Reset</a> | |
<h1>Dense values example</h1> | |
<div class="row align-items-center"> | |
<div class="col-sm-2"> | |
<p id="value4"></p> | |
</div> | |
<div class="col-sm"> | |
<div id="slider4"></div> | |
</div> | |
</div> | |
<a id="setValue4" href="#">Reset</a> | |
</div> | |
</body> | |
<script> | |
var data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025]; | |
var slider1 = d3.sliderHorizontal() | |
.min(d3.min(data1)) | |
.max(d3.max(data1)) | |
.width(300) | |
.tickFormat(d3.format('.2%')) | |
.ticks(5) | |
.default(0.015) | |
.on('onchange', val => { | |
d3.select("p#value1").text(d3.format('.2%')(val)); | |
}); | |
var g = d3.select("div#slider1").append("svg") | |
.attr("width", 500) | |
.attr("height", 100) | |
.append("g") | |
.attr("transform", "translate(30,30)"); | |
g.call(slider1); | |
d3.select("p#value1").text(d3.format('.2%')(slider1.value())) | |
d3.select("a#setValue1").on("click", () => slider1.value(0.015)); | |
var slider2 = d3.sliderHorizontal() | |
.min(0) | |
.max(10) | |
.step(1) | |
.width(300) | |
.on('onchange', val => { | |
d3.select("p#value2").text(val); | |
}); | |
var g = d3.select("div#slider2").append("svg") | |
.attr("width", 500) | |
.attr("height", 100) | |
.append("g") | |
.attr("transform", "translate(30,30)"); | |
g.call(slider2); | |
d3.select("p#value2").text((slider2.value())); | |
d3.select("a#setValue2").on("click", () => slider2.value(5)); | |
var data3 = d3.range(0, 10).map(function (d) { return new Date(1995 + d, 10, 3); }); | |
var slider3 = d3.sliderHorizontal() | |
.min(d3.min(data3)) | |
.max(d3.max(data3)) | |
.step(1000 * 60 * 60 * 24 * 365) | |
.width(400) | |
.tickFormat(d3.timeFormat('%Y')) | |
.tickValues(data3) | |
.on('onchange', val => { | |
d3.select("p#value3").text(d3.timeFormat('%Y')(val)); | |
}); | |
var g = d3.select("div#slider3").append("svg") | |
.attr("width", 500) | |
.attr("height", 100) | |
.append("g") | |
.attr("transform", "translate(30,30)"); | |
g.call(slider3); | |
d3.select("p#value3").text(d3.timeFormat('%Y')(slider3.value())); | |
d3.select("a#setValue3").on("click", () => slider3.value(new Date(1997, 11, 17))); | |
var data4 = [0.20, 0.22, 0.24, 0.26, 0.28, 0.30, 1]; | |
var slider4 = d3.sliderHorizontal() | |
.min(d3.min(data4)) | |
.max(d3.max(data4)) | |
.width(300) | |
.tickFormat(d3.format('.2%')) | |
.marks(data4) | |
.ticks(5) | |
.default(0.015) | |
.on('onchange', val => { | |
d3.select("p#value4").text(d3.format('.2%')(val)); | |
}); | |
var g = d3.select("div#slider4").append("svg") | |
.attr("width", 500) | |
.attr("height", 100) | |
.append("g") | |
.attr("transform", "translate(30,30)"); | |
g.call(slider4); | |
d3.select("p#value4").text(d3.format('.2%')(slider4.value())) | |
d3.select("a#setValue4").on("click", () => slider4.value(0.015)); | |
</script> | |
</html> |