Notebooks 2.0 is here.

Published
Edited
Sep 14, 2020
Insert cell
Insert cell
svg = {
const svg = html`<svg id = "svg"></svg>`
const container = d3.select(svg)
const outer = d3.select(svg).append("g").attr("transform","translate(200,200)")
const inner = outer.append("g").attr("transform","rotate(15) scale(0.75)")
inner.append("circle")
.attr("r",150)
.attr("cx",0)
.attr("cy",50)
.attr("fill","white")
.attr("stroke","black")
inner.append("line")
.attr("stroke","black")
.attr("x1",-30)
.attr("x2",10)
.attr("y1",50)
inner.append("line")
.attr("stroke","black")
.attr("x1",30)
.attr("x2",-10)
.attr("y1",50)
inner.append("line")
.attr("stroke","black")
.attr("y1",0)
.attr("y2",50)
inner.append("line")
.attr("stroke","red")
.attr("x1",-50, "y1",25)
.attr("x2",50,"y2",50)
.attr("y1",100)
.attr("y2",100)
inner.append("circle")
.attr("r",30)
.attr("stroke","black")
.attr("fill","cornflowerblue")
.attr("cx",-100)
inner.append("circle")
.attr("r",30)
.attr("stroke","black")
.attr("fill","cornflowerblue")
.attr("cx",100)
const pathData = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveNatural)(data)
container.append("path")
.attr("stroke","black")
.attr("fill","none")
.attr("d",pathData)
return svg
}
Insert cell
data = {
const data = []
for(let i = 0; i < 50; i = i + 1){
data.push({x:Math.random()*600, y:Math.random()*300})
}
return data
}
Insert cell
Insert cell
Insert cell
Insert cell
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