{
const h = 350,
w = 350,
margin = 10,
num = 10,
cell = 0,
x = cell,
y = cell,
c = DOM.context2d(w,h)
function drawGrid(){
c.lineWidth = 0.75
c.globalAlpha = 0.5
c.rect(margin,margin,w-2*margin,h-2*margin)
c.strokeRect(margin,margin,w-2*margin,h-2*margin)
// c.translate(margin,margin)
c.clip()
// c.beginPath()
// for (let x = 0; x < num; x++){
// c.moveTo(x * cell, 0)
// c.lineTo(x * cell, w-(2*margin))
// }
// https://github.com/bit101/grid/blob/master/grid.js
var max = Math.sqrt(w*w+h*h),
cos60 = Math.cos(Math.PI / 3),
sin60 = Math.sin(Math.PI / 3),
cos120 = Math.cos(Math.PI * 2 / 3),
sin120 = Math.sin(Math.PI * 2 / 3);
for(var i = x; i <= x + w; i += num) {
c.moveTo(i, y);
c.lineTo(i + cos60 * max, y + sin60 * max);
c.moveTo(i, y);
c.lineTo(i + cos120 * max, y + sin120 * max);
}
var dy = sin60 * num,
maxX = Math.ceil(w / num) * num + x;
for(i = y; i <= y + h; i += dy) {
c.moveTo(x, i);
c.lineTo(x + w, i);
}
for(i = y + dy * 2; i <= y + h; i += dy * 2) {
if(i > 0) {
c.moveTo(x, i);
c.lineTo(x + cos60 * max, i + sin60 * max);
}
c.moveTo(maxX, i);
c.lineTo(maxX + cos120 * max, i + sin120 * max);
}
c.stroke()
}
drawGrid()
return c.canvas;
}
style = html`<style>
canvas{
background: #f9f9f9
}`
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.
