{
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();
}