emit = {
var svg = d3.select(DOM.svg(width, height))
.attr("width", width+"px")
.attr("height", height+"px");
var filter = svg.append("defs")
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 3);
function createCircle() {
const pt1 = d3.randomUniform (0, 400)()
const pt2 = d3.randomUniform (0, 400)()
{svg.select("circle").remove()
svg.append("circle")
.attr("fill", "#34ebe8")
.attr("cx",pt2)
.attr("cy",height)
.attr("r", 12)
.transition()
.duration(400)
.duration(1000)
.attr("cx",pt1 + 10)
.attr("cy",-100)
svg.select("circle").remove()
svg.append("circle")
.attr("fill", "#34ebe8")
.attr("cx",pt2)
.attr("cy",height)
.attr("r", 12)
.transition()
.duration(400)
.duration(1000)
.attr("cx",pt1 + 10)
.attr("cy",-100)
.attr("filter", "url(#blur)")
}
{svg.append("rect")
.attr("x", 0)
.attr("y", 2*height/3)
.attr("width", width)
.attr("height", height/3)
.style("fill", "#222222")
}
}
createCircle()
new Promise((resolve, reject) => {
setInterval(() => {
createCircle()
}, 1200);
})
return svg.node();
}
d3 = require("d3@5")
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.
