Simple slider
Simple use of a slider to change one circle attribute
{
const slider = d3.sliderHorizontal()
.min(10)
.max(100)
.step(10)
.width(300)
const svg = d3.create('svg')
.attr("width",800)
.attr("height",450)
.call(slider);
const datos = [80,120,40]
slider.on('onchange', val => {
let thenewvalue = d3.format('.2')(val)
group
.selectAll("circle")
.transition()
.duration(2000)
.ease(d3.easeBack)
.attr("r", thenewvalue)
});
const group = svg.append("g")
group
.selectAll("circle")
.data(datos)
.enter()
.append("circle")
.attr("cx", function(){
const rand = Math.random()
return 200 + rand * 150;})
.attr("cy", function(){
const rand = Math.random()
return 150 + rand * 100;})
.attr("r", d => d)
.style("opacity", .7)
.attr("fill", function(d,i){
return d3.rgb(10,225-i*20,255-i*20);})
.attr("stroke", "none")
return svg.node();
}
d3 = require.alias({
"d3-array": "d3@5",
"d3-axis": "d3@5",
"d3-dispatch": "d3@5",
"d3-drag": "d3@5",
"d3-ease": "d3@5",
"d3-scale": "d3@5",
"d3-selection": "d3@5",
"d3-transition": "d3@5"
})("d3@5", "d3-simple-slider@1")
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.
