md`${await FileAttachment("rothko2.jpg").image()}`
viewof totalSteps = Range([0, 10], {step: 1, value: 7, label: "Total Steps"})
viewof coreDepth = Range([0, 10], {step: 1, value: 2, max: totalSteps, label: "Core Depth"})
{
const height = 700
const width = 500
const context = DOM.context2d(width,height)
context.fillStyle = "#EE7564"
context.strokeStyle = "#EE7564"
palette.forEach((color, i) => {
const index = palette.length - i - 1
context.fillStyle = color
context.strokeStyle = color
context.globalAlpha = 1
const pointCount = 8
// here is where I think I need to make squares rather than just random lines?
const points = d3.range(pointCount).map(j => [
(width / (pointCount - 1)) * (pointCount - 1 - j),
height - (height / (palette.length -1)) * (0.5 + index + Math.sin(Math.PI * 2 * (j / pointCount)) / 2)
])
drawShape(context, points.concat([[0, height], [width, height]]), true)
paint(context, points, false)
})
yield context.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.
