{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white")
var chart = new Chart({element:svg,svgDims:svgDims,data:points,xlims:[-5.5,5.5],ylims:[-30,150],origin:[0,0]})
var data = chart.data
var outer= svg.append("g")
.attr("transform", `translate(500,100)`)
var inner = outer.append("g")
.attr("transform", `rotate(0)`)
inner.append("circle")
.attr ("r",50)
.attr ("fill", "yellow")
.attr ("stroke", "black")
.attr ("cy",20)
inner.append("circle")
.attr ("r",15)
.attr ("fill", "red")
.attr ("stroke", "black")
inner.append("line")
.attr ("stroke", "black")
.attr ("x1", -25)
.attr("y1", 35)
.attr ("x2", 25)
.attr ("y2",35)
{
for(var i = 0;i < data.length; i++){
var circle = svg.append("circle")
.attr("r",1)
.attr("cx",500)
.attr("cy",100)
circle.transition().duration(Math.random()*10000).delay(Math.random()*3000).attr("cx",data[i].x).attr ("cy",data[i].y)
}
}
chart.draw()
yield svg.node()
{
var i = 0
while(i < 360){
await inner.transition().duration(10).attr("transform", `rotate(${i})`).end()
i++
}
}
}
// For Loop
{
for(var i = 0;i < 10; i++){
}
}
// While Loop
{
var i = 0
while(i < 10){
i++
}
}
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.
