squaresmall = {
const width = 200
const height = 200
const canvas = html`<canvas width = ${width} height = ${height} style = "border:1px solid black"/>`
const ctx = canvas.getContext("2d")
const drawCircle = (x,y,r,fill) => {
ctx.save()
ctx.fillStyle = fill
ctx.beginPath()
ctx.arc(x,y,r,0,2*Math.PI)
ctx.fill()
ctx.closePath()
ctx.restore()
}
const drawSquare = (x,y,r,fill) =>{
ctx.save()
ctx.fillStyle = fill
ctx.beginPath()
ctx.rect(x-r,y-r,2*r,2*r)
ctx.fill()
ctx.closePath()
ctx.restore()
}
const makeCircleBatch = (batchSize,batchID) => {
for(let i = 0;i < batchSize; i = i + 1){
const r = d3.randomUniform(0,100)()
drawSquare(100,100,100,"white")
drawCircle(100,100,r,"Black")
const image = html`<a href = "${canvas.toDataURL("image/png")}" download = "circle_${batchID}_${i}.png" id = "circle"></a>`
image.click()
d3.select("#circle").remove()
}
}
const makeSquareBatch = (batchSize,batchID) => {
for(let i = 0;i < batchSize; i = i + 1){
const r = d3.randomUniform(0,100)()
drawSquare(100,100,100,"white")
drawSquare(100,100,r,"Black")
const image = html`<a href = "${canvas.toDataURL("image/png")}" download = "square_${batchID}_${i}.png" id = "square"></a>`
image.click()
d3.select("#square").remove()
}
}
for(let i = 0;i < 3; i = i + 1){
makeCircleBatch(5,i)
await Promises.delay(1500)
makeSquareBatch(5,i)
await Promises.delay(1500)
}
return canvas
}
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.
