Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
May 6, 2020
3 forks
Importers
6 stars
color = {
const width = image.naturalWidth;
const height = image.naturalHeight;
const context = DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0);
const {data} = context.getImageData(0, 0, width, height);
let r = 0, g = 0, b = 0, a = 0;
for (let i = 0; i < data.length; i += 4) {
r += rgb_lrgb1(data[i + 0] / 255);
g += rgb_lrgb1(data[i + 1] / 255);
b += rgb_lrgb1(data[i + 2] / 255);
a += data[i + 3] / 255;
}
return `#${
Math.round(lrgb_rgb1(r / a) * 255).toString(16).padStart(2, "0")}${
Math.round(lrgb_rgb1(g / a) * 255).toString(16).padStart(2, "0")}${
Math.round(lrgb_rgb1(b / a) * 255).toString(16).padStart(2, "0")
}`;
}
function rgb_lrgb1(v) {
return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
}
function lrgb_rgb1(v) {
return v <= 0.0031308 ? 12.92 * v : 1.055 * (v ** (1 / 2.4)) - 0.055;
}
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.
