Published
Edited
Aug 9, 2019
md`# Draw line on canvas`
d3 = require("d3")
import {slider} from "@jashkenas/inputs"
viewof height = slider ({
min: 1,
max: 1000,
step: 1,
value: 500,
title: "canvas height"
})
viewof width = slider ({
min: 1,
max: 1000,
step: 1,
value: 500,
title: "canvas width"
})
{
const context = DOM.context2d(width, height);
context.translate(0.5, 0.5);
context.beginPath();
for (let y = 1; y < 1000; y += 100) {
context.moveTo(100, 100);
context.lineTo(500, y);
}
context.stroke();
for (let x = 1; x < 1000; x += 100) {
context.moveTo(100, x);
context.lineTo(500, 500);
}
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.
