Image Sharpening
{
const w = image.naturalWidth;
const h = image.naturalHeight;
const context = DOM.context2d(2 * w + 20, h, 1);
context.drawImage(image, 0, 0);
const im = context.getImageData(0, 0, w, h);
const data = im.data;
const data0 = data.slice(); // keep a copy
d3.blurImage(im, radius, radius);
for (let i = 0; i < data.length; ++i)
if (i % 4 < 3)
data[i] = data0[i] - gain * (data[i] - data0[i]);
context.putImageData(im, w + 20, 0);
return Object.assign(context.canvas, {
style: `max-width: ${Math.min(width, 2 * w + 20)}px`,
title: "On the left, Blur; on the right, Unblur."
});
}
// source: https://commons.wikimedia.org/wiki/File:Blur_live_29.07.2013_in_Rome.jpg
image = FileAttachment("blur.jpg").image({width: 80})
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.
