Published
Edited
Jun 20, 2021
1 star
colorized={
const interpolator = d3[`interpolate${colorMap}`];
const LUT = Array.from({ length: 256 }, (_, i) => d3.color(interpolator(i / 255)));
const img=await FileAttachment("nautilus@1.jpg").image();
const c=DOM.context2d(img.width,img.height,1);
c.drawImage(img,0,0);
const imgData = c.getImageData(0,0,img.width,img.height);
for(let i=0; i<imgData.data.length; i+=4) {
const color=LUT[imgData.data[i]];
imgData.data[i]=color.r;
imgData.data[i+1]=color.g;
imgData.data[i+2]=color.b;
}
c.putImageData(imgData,0,0);
c.canvas.style.display="none";
return {src: c.canvas, w:img.width, h:img.height};
}
d3 = require("d3-color@2", "d3-scale-chromatic@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.
