html`
<h3> Mouse Maze Game! </h3>
<p> Help the mouse get to its cheese! </p>
`
svg = {
const svg = html`<svg id = "svg"></svg>`
const container = d3.select(svg)
const drag = d3.drag()
.on("drag", function(){
const target = d3.select(this)
const x = d3.event.x
const y = d3.event.y
target.attr("cx", x).attr("cy", y)
})
container.append("circle")
.attr("r", 20)
.attr("fill", "grey")
.attr("stroke", "black")
.attr("cx", 550)
.attr("cy", 100)
.call(drag)
container.append("rect")
.attr("height", 50)
.attr("width", 50)
.attr("fill", "yellow")
.attr("stroke", "black")
.attr("x", 50)
.attr("y", 230)
container.append("path")
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", "M500, 100 L400, 100, L300, 100, L300, 220, L90, 220 ")
container.append("path")
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", "M500, 200, L400, 200, L400, 275, L300, 275, L120, 275 ")
return svg
}
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.
