logo = {
const svg=d3.create("svg").attr("viewBox","0 0 672 350");
let circle = svg.selectAll('circle')
circle = circle.data(data, d=>{
return d.id
})
circle.exit().remove()
circle=circle.enter().append('circle')
.attr('r',0)
.attr('cx',d=>d._x)
.attr('cy',d=>d._y)
.attr('fill','#5151fc')
.merge(circle);
circle.transition()
.duration(1000)
.delay((d,i)=>Math.floor(i*0.35))
.ease(d3.easeElasticOut)
.attr('r',d=>d.r)
simulation.on('tick', ()=>{
circle.attr('cx',d=>d.x).attr('cy',d=>d.y)
})
svg.on('mousemove touchmove',function(){
d3.event.preventDefault();
let p1 = d3.mouse(this);
// console.log(p1)
data.find(d=>d.id==='cursor').fx = p1[0];
data.find(d=>d.id==='cursor').fy = p1[1];
simulation.alpha(1).restart(); //reheat the simulation
})
svg.on('mouseleave touchend',function(){
let p1 = d3.mouse(this);
const cursor = data.find(d=>d.id==='cursor');
cursor.fx = null;
cursor.fy = null;
simulation.alpha(1).restart(); //reheat the simulation
})
return svg.node()
}
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.
