Public
Edited
Mar 22, 2023
2 forks
Insert cell
Insert cell
Insert cell
{
const container = d3.select(DOM.svg(600,300)).attr("style","border:solid 1px black")
container.append("line")
.attr("stroke","black")
.attr("x1",0)
.attr("y1",150)
.attr("x2",600)
.attr("y2",150)
const outer = container.append("g").attr("transform",`translate(${x},150)`)
const inner = outer.append("g").attr("transform",`rotate(${x})`)
inner.append("rect")
.attr("width",50)
.attr("height",50)
.attr("x",-25)
.attr("y",-25)
return container.node()
}
Insert cell
viewof degrees = Inputs.range([0,360],{step:1})
Insert cell
{
const container = d3.select(DOM.svg(600,300)).attr("style","border:solid 1px black")
const outer = container.append("g").attr("transform",`translate(300,150)`)
const inner = outer.append("g").attr("transform",`rotate(${degrees})`)
inner.append("line")
.attr("stroke","black")
.attr("x1",-100)
.attr("x2",100)
inner.append("circle")
.attr("fill","steelblue")
.attr("stroke","black")
.attr("r",20)
.attr("cx",-100)

inner.append("circle")
.attr("fill","steelblue")
.attr("stroke","black")
.attr("r",20)
.attr("cx",100)
return container.node()
}
Insert cell

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.
Learn more