Digital Humanist. Manhattan-based.
Published
Edited
Apr 4, 2022
1 fork
7 stars
img = {
var img = new Image()
img.src = `${image_manifest}/full/,512/0/default.jpg`
img.crossOrigin = 'Anonymous'
img.setAttribute('crossOrigin', '');
await img.decode()
return img
}
image_manifests = presentation_manifest.sequences[0].canvases.map(d => d.images[0].resource['@id']).map(d => d.replace(/\/full.*/, ""))
Images within a manifest
Now we're in IIIF-landhttps://iiif.io, where all sorts of transformations are possible through URL manipulation. A single image from this page looks like this:
{
if (animate === "animate") {set(viewof image_manifest, image_manifests[i % image_manifests.length])}
}
viewof image_manifest = Inputs.radio(new Map(image_manifests.map((d, i) => [i, d])), {value: image_manifests[0]})
viewof animate = Inputs.radio(["animate", "stop that annoying animation!"], {value: "animate"})
md`# Image Rotation
The images below show x and y density histograms below them. These could be useful for aligning images and extracting boxes.
`
viewof angle = Inputs.range([-Math.PI / 64, Math.PI/64], {label: "angle"})
html`<div style="display:flex;flex-direction:row">
<div style="width:25%">${right}</div><div style="width:75%"><div>${ctx.canvas}</div><div>${bottom}</div></div>`
bottom = Plot.plot({
width: 512,
height: 150,
marks: [
Plot.lineY([...histograms.w].map(d => {return {x : d}}), {y: "x"}),
]
})
[...histograms.w].map(d => {return {x : d}})
histograms = {
redraw
const d = ctx.getImageData(0,0, 512, 512).data
const w = new Float32Array(512)
const h = new Float32Array(512)
for (let i = 0; i < 512 * 512 * 4; i += 4) {
const alpha = (255 - d[i]) * d[i + 3] /255
const x = 512 - Math.floor(i/4/512)
const y = (i / 4) % 512
h[x] += alpha
w[y] += alpha
}
return {w, h}
}
redraw = {
const {width, height} = img;
ctx.clearRect(0, 0, 512, 512)
ctx.translate(256, 256);
ctx.rotate(angle);
ctx.drawImage(img, -width / 2, -height / 2, width, height);
ctx.rotate(-angle);
ctx.translate(-256, -256);
}
img.height
d3 = require("d3@v7")
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("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.
