{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
var xAxis = svg.append("g").attr("transform",`translate(0,270)`)
d3.axisBottom(xScale)(xAxis)
var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`)
d3.axisLeft(yScale)(yAxis)
for(var i = 0;i<data.length;i++){
svg.append("circle")
.attr("r",1)
.attr("cx",xScale(data[i].x))
.attr("cy",yScale(data[i].y))
}
yield svg.node()
}
xScale = d3.scaleLinear().domain([-10,10]).range([30,570])
yScale = d3.scaleLinear().domain([0,100]).range([270,30])
data = {
var data = []
for(var i = -10;i<=10;i+=.01){
data.push({x:i,y:i*i})
}
return data
}
// 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.
