Published
Edited
Aug 14, 2019
md`# Create grid on canvas`
d3 = require('d3');
import {slider} from "@jashkenas/inputs"
viewof height = slider ({
min: 1,
max: 1000,
step: 1,
value: 1000,
title: "canvas height"
})
viewof width = slider ({
min: 1,
max: 1000,
step: 1,
value: 1000,
title: "canvas width"
})
{
const context = DOM.context2d(width, height);
const canvas = context.canvas;
context.beginPath();
context.lineWidth = 1;
for (let x = 0.5; x < 900; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 900);
}
for (let y = 0.5; y < 900; y += 10) {
context.moveTo(0, y);
context.lineTo(900, y);
}
context.strokeStyle = '#EEE';
context.stroke();
return 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.
