Published
Edited
Sep 24, 2020
Importers
function popEffect(g,type,data,startDelay){
for(let i=0;i<10;i++){
let subG=g.append("g").attr("transform","translate("+i*2+","+-i*2+")").style("display","none")
if (type==="path"){
drawPath(subG,data)
} else if (type==="text"){
subG.append("text").text(data).style("font-family","'Noto Sans SC',sans-serif").style("font-size",50)
}
if (i<1){
subG.attr("fill","#ffc1d2")
} else if (i>0&&i<9){
subG.attr("fill","none")
subG.attr("stroke","#ffc1d2")
} else if (i>8){
subG.attr("fill","#212639")
}
subG.transition().delay(parseInt(startDelay)+parseInt(75*i)).style("display","block")
}
}
function drawPath(g,pathArr){
pathArr.forEach(d=>{
let item = g.append(d.type)
for (let prop in d){
if (prop!="type"){
item.attr(prop,d[prop])
}
}
})
}
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.
