dataviz engineer w/ passion for algorithms, maps & music
Published
Edited
Apr 13, 2019
1 star
function drawLine([[x0, y0], [x1, y1]], ctx) {
const steep = Math.abs(y1 - y0) > Math.abs(x1 - x0);
if (steep) {
[x0, y0] = [y0, x0];
[x1, y1] = [y1, x1];
}
if (x0 > x1) {
[x0, x1] = [x1, x0];
[y0, y1] = [y1, y0];
}
const dx = x1 - x0;
const dy = y1 - y0;
const gradient = dy / dx;
// handle first endpoint
let xend = round(x0);
let yend = y0 + gradient * (xend - x0);
let xgap = rfpart(x0 + 0.5);
const xpxl1 = xend; // this will be used in the main loop
const ypxl1 = ipart(yend);
if (steep) {
plot(ypxl1, xpxl1, rfpart(yend) * xgap, ctx);
plot(ypxl1 + 1, xpxl1, fpart(yend) * xgap, ctx);
}
else {
plot(xpxl1, ypxl1 , rfpart(yend) * xgap, ctx);
plot(xpxl1, ypxl1 + 1, fpart(yend) * xgap, ctx);
}
let intery = yend + gradient; // first y-intersection for the main loop
// handle second endpoint
xend = round(x1);
yend = y1 + gradient * (xend - x1);
xgap = fpart(x1 + 0.5);
const xpxl2 = xend; //this will be used in the main loop
const ypxl2 = ipart(yend);
if (steep) {
plot(ypxl2 , xpxl2, rfpart(yend) * xgap, ctx);
plot(ypxl2 + 1, xpxl2, fpart(yend) * xgap, ctx);
}
else {
plot(xpxl2, ypxl2 , rfpart(yend) * xgap, ctx);
plot(xpxl2, ypxl2 + 1, fpart(yend) * xgap, ctx);
}
// main loop
for (let x = xpxl1 + 1; x <= xpxl2 - 1; x++) {
if (steep) {
plot(ipart(intery) , x, rfpart(intery), ctx);
plot(ipart(intery) + 1, x, fpart(intery), ctx);
}
else {
plot(x, ipart(intery) , rfpart(intery), ctx);
plot(x, ipart(intery) + 1, fpart(intery), ctx);
}
intery += gradient
}
}
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.
