md`# Reflection`
height = 400
seedrandom = require("seedrandom@3/seedrandom.min.js")
reflect = {
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", 5);
/* svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height/2)
.attr("y2", height/2)
.style("stroke","black")
.style("stroke-width","2px")
*/
function createCircle() {
const pt1 = d3.randomUniform (0, 400)()
const pt2 = d3.randomUniform (0, 400)()
svg.select("circle").remove()
svg.append("circle")
.attr("fill", "#dfeb34")
.attr("cx",pt1)
.attr("cy",-100)
.attr("r", 10)
.transition()
.duration(500)
.attr("cx",pt2)
.attr("cy",height/2+-10)
.transition()
.duration(500)
.attr("cx", 2*pt2-pt1)
.attr("cy", -100)
.attr("filter", "url(#blur)");
d3.selectAll(".class-of-elements")
.style("filter", "url(#glow)");
svg.append("rect")
.attr("x", 0)
.attr("y", height/2)
.attr("width", width)
.attr("height", height)
.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.
