Public
Edited
Mar 22, 2023
{
const container = d3.select(DOM.svg(600,300)).attr("style","border:solid 1px black")
new MyCircle(container,100,100)
new MyCircle(container,300,70)
yield container.node()
}
class MyCircle{
constructor(element,x,y){
element.append("circle")
.attr("fill","steelblue")
.attr("stroke","black")
.attr("r",50)
.attr("cx",x)
.attr("cy",y)
}
}
{
const container = d3.select(DOM.svg(600,300)).attr("style","border:solid 1px black")
new CircleSquare(container,100,100,30)
new CircleSquare(container,300,200,45)
yield container.node()
}
class CircleSquare{
constructor(element,x,y,r){
const outer = element.append("g").attr("transform",`translate(${x},${y})`)
const inner = outer.append("g").attr("transform",`rotate(${r})`)
inner.append("circle")
.attr("r",50)
inner.append("rect")
.attr("fill","white")
.attr("width",20)
.attr("height",20)
.attr("x",-10)
.attr("y",-10)
}
}
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.
