Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Aug 7, 2019
2 forks
Importers
6 stars
{
const height = 256;
const k = height / Math.max(...histogram);
const context = DOM.context2d(256, height, 1);
context.canvas.style.width = "100%";
context.canvas.style.height = `${height}px`;
context.canvas.style.imageRendering = "pixelated";
context.canvas.style.background = "#333";
context.canvas.style.borderBottom = "solid 1px #000";
context.globalCompositeOperation = "screen";
context.fillStyle = "#f00";
for (let i = 0; i < 256; ++i) {
context.fillRect(i, height - histogram[i * 3 + 0] * k, 1, height);
}
context.fillStyle = "#0f0";
for (let i = 0; i < 256; ++i) {
context.fillRect(i, height - histogram[i * 3 + 1] * k, 1, height);
}
context.fillStyle = "#00f";
for (let i = 0; i < 256; ++i) {
context.fillRect(i, height - histogram[i * 3 + 2] * k, 1, height);
}
return context.canvas;
}
histogram = {
const histogram = new Uint32Array(256 * 3);
const {width, height, data} = getImageData(image);
for (let i = 0, k = 0; i < width; ++i) {
for (let j = 0; j < height; ++j, k += 4) {
++histogram[data[k + 0] * 3 + 0];
++histogram[data[k + 1] * 3 + 1];
++histogram[data[k + 2] * 3 + 2];
}
}
return histogram;
}
function getImageData(image, width = image.naturalWidth, height = image.naturalHeight) {
const context = DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0, width, height);
return context.getImageData(0, 0, width, height);
}
import {imageInput} from "@mbostock/file-input"
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.
