Maps, Infovis, Code
Published
Edited
Mar 2, 2021
canvas = {
const ctx = DOM.context2d(width, height);
let pppx = devicePixelRatio || 1;
pppx = pppx_adjust;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, width, height, 0.5);
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
// drawing lines gives strange aliasing artifacts when devicePixelRatio != 1
// using filled rectangles works :\
for (let y=0; y<height; y+=2/pppx) {
ctx.fillRect(0, y, width, 1/pppx);
//ctx.moveTo(0, y);
//ctx.lineTo(width, y);
//ctx.stroke();
}
//let GAMMA = 2.2;
//let interpolator = d3.interpolateRgb.gamma(GAMMA)("#000000","#ffffff");
ctx.fillStyle = midLevelGray;
ctx.fillRect(width/2, 0, width/2, height);
return ctx.canvas;
}
height = 400
d3 = require("d3-interpolate") //, "d3-geo-projection@2")
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.
