Published
Edited
Nov 4, 2021
Insert cell
# Simple slider
Insert cell
Simple use of a slider to change one circle attribute
Insert cell
{
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();
}
Insert cell
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")
Insert cell

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.
Learn more