Published
Edited
Jun 19, 2019
1 fork
2 stars
md`# d3-simple-slider`
viewof slider2
viewof slider2 = {
const svg = DOM.svg(500, 40);
// Creates a time slider
var dataTime = d3.range(0, 10).map(function(d) {
return new Date(2012 + d, 10, 3);
});
var sliderTime = d3
.sliderBottom()
.min(d3.min(dataTime))
.max(d3.max(dataTime))
.step(1000 * 60 * 60 * 24 * 365)
.width(300)
.tickFormat(d3.timeFormat('%Y'))
.tickValues(dataTime)
.default(new Date(2012, 10, 3));
var gTime = d3.select(svg)
.attr('viewBox', [-50,0,500,40])
.attr('width', 800)
.attr('height', 200);
console.log(sliderTime.value());
gTime.call(sliderTime);
return svg;
}
d3 = require.alias({'d3-selection': 'd3'})('d3@5', 'd3-simple-slider')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
