Public
Edited
Sep 3, 2023
2 stars
histogram = (image, x = 0, y = 0, w = image.width, h = image.height) => {
if (x < 1) x *= image.width;
if (x < 0) x += image.width;
if (y < 1) y *= image.height;
if (y < 0) y += image.height;
if (w <= 1) w *= image.width;
if (h <= 1) h *= image.height;
const canvas = DOM.canvas(image.width, image.height);
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
const { data } = ctx.getImageData(x, y, w, h);
const histograms = Array.from({ length: 3 }, () => new Array(256).fill(0));
for (let i = 0; i < data.length; i += 4)
for (const c of [0, 1, 2]) histograms[c][data[i + c]]++;
return histograms;
}
plot(adjusted)
cdf = (histogram) => {
const cdf = d3.cumsum(histogram);
const m = cdf[cdf.length - 1];
return cdf.map((d) => d / m);
}
adjusted = d3.zip(sourceHistogram, targetHistogram).map(([sh, th]) => {
const normalizedCDF = cdf(sh);
const targetCDF = cdf(th);
return normalizedCDF.map((d) => d3.bisectLeft(targetCDF, d));
})
Plot.plot({
width: 300,
aspectRatio: true,
grid: true,
x: { ticks: d3.range(0, 257, 32) },
y: { ticks: d3.range(0, 257, 32) },
marks: [
[0, 1, 2].map((c) =>
Plot.lineY(adjusted[c], { stroke: ["red", "green", "blue"][c] })
),
Plot.ruleY([0, 256])
]
})
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.
