md`# This is the way`
{
const height = width * 0.4;
const c = DOM.context2d(width, height);
c.fillStyle = 'black';
c.fillRect(0, 0, width, height);
c.strokeRect(0, 0, width, height)
c.fillStyle = '#fafaaa';
const sizeX = width / numColumns;
const sizeY = height / numRows;
c.beginPath()
for (let x = 0; x < numColumns; x++){
for (let y = 0; y < numRows; y++){
c.moveTo(x * sizeX, y * sizeY + sizeY/4);
c.lineTo(x * sizeX, y * sizeY + sizeY/4*3);
c.lineTo(x * sizeX + sizeX/2, y * sizeY + sizeY/4*3);
c.lineTo(x * sizeX + sizeX/2, y * sizeY + sizeY);
c.lineTo(x * sizeX + sizeX, y * sizeY + sizeY/2);
c.lineTo(x * sizeX + sizeX/2, y * sizeY);
c.lineTo(x * sizeX + sizeX/2, y * sizeY + sizeY/4);
c.lineTo(x * sizeX, y * sizeY + sizeY/4);
}
}
c.stroke()
c.fill()
return c.canvas;
}
style = html`<style>
canvas{
width: 100%;
}`
import {slider} from "@jashkenas/inputs"
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.
