Published
Edited
Apr 30, 2022
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
random_image_and_manifest = async function(size=512, region="full") {
reload
const random = Math.floor(Math.random() * 6250003)
const manifest = await fetch(`https://bmschmidt-cors-observable.herokuapp.com/https://1950census.archives.gov/api/manifest?scheduleId=${random}`).then(d=>d.json())
const canvas = manifest.sequences[0].canvases[0].images[0].resource
const img = new Image()
const srcstring = canvas["@id"]
img.src = canvas["@id"].replace("full/full/0/default.jpg",`${region}/,${size}/0/default.jpg`)
img.crossOrigin = 'Anonymous'
img.setAttribute('crossOrigin', '');
await img.decode()
return {manifest, canvas, img, srcstring}
}
Insert cell
Insert cell
import {cv} from "@mootari/opencv-js"
Insert cell
src = new cv.Mat(img.height, img.width, cv.CV_8UC4)
Insert cell
T1 = 20
Insert cell
T2 = 60
Insert cell
dst = new cv.Mat(img.height, img.width, cv.CV_8UC1)
Insert cell
function sd(array) {
const n = array.length
const mean = array.reduce((a, b) => a + b) / n
return Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n)
}

Insert cell
Insert cell
Insert cell
fili = require('fili@2.0.1/dist/fili.min.js')
Insert cell
Insert cell
viewof slider2 = Inputs.range([5, 35])
Insert cell
{
const sorted = hists.sort((a, b) => a.x- b.x)
return Plot.plot({
y: {
grid: true
},
height: 120,
marks: [
Plot.line(sorted, {x: "x", y: "y"}),
]
})
}
Insert cell
hists = [...d3.rollup(histograms(ctx).h, d3.sum, x => Math.floor(x % slider2)).entries()].map(([x, y]) => {return {x, y}})
Insert cell
ctx.canvas.width
Insert cell
h_histogram = histograms(ctx).h
Insert cell
viewof span = Inputs.range([0, 24])
Insert cell
{
const maxima = []
for (let i = 5; i < h_histogram.length - 5; i++) {
if (
h_histogram[i] === Math.max(...h_histogram.slice(i-10, i+10)) &
h_histogram[i] >= 1.5 * d3.mean(h_histogram.slice(i-10, i+10))
) {
maxima.push([i, h_histogram[i]])
}
}
ctx.fillStyle = 'red'
ctx.strokeStyle = 'blue'
for (let [i, height] of maxima) {
ctx.beginPath()
ctx.moveTo(0, i)
ctx.lineTo(1000, i)
ctx.stroke()
}
return maxima
}
Insert cell
Insert cell
Insert cell
Insert cell
histograms(ctx).h
Insert cell
Insert cell
Insert cell
cv.imread(edgeset.canny).channels()
Insert cell
edgeset = {
const gray = Object.assign(DOM.canvas(img.width, img.height),{id:'grayCanvas'});
const filtered = Object.assign(DOM.canvas(img.width, img.height),{id:'filteredCanvas'});
const canny = Object.assign(DOM.canvas(img.width, img.height),{id:'cannyCanvas'});

let src = cv.imread(img);
let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); //cv.CV_8UC3
let dst2 = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); //cv.CV_8UC3
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, cv.CV_8UC1); // Convert the input image to grayscale.
cv.imshow(gray, src);

cv.bilateralFilter(src, dst2, 25, 25, 10, cv.BORDER_DEFAULT); // cv.bilateralFilter( src, dst, d, sigmaColor, sigmaSpace[, dst[, borderType]] )
cv.imshow(filtered, dst2);
cv.Canny(dst2, src, T1, T2,3); // cv2.Canny(input, output, threshold1, threshold2[, edges[, apertureSize[, L2gradient]]])
cv.imshow(canny, src);


// src.delete();
dst.delete();
dst2.delete();
return {canny}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { viewof hl1, viewof hl2, viewof hl3, viewof hl4, viewof hl5 } from '@hellonearthis/opencv-js-hough-line-transform'
Insert cell
function right_histogram(ctx) {
const hists = histograms(ctx)
const size = hists.h.length
const canvas = DOM.canvas(128, size)
const ctx2 = canvas.getContext("2d")
ctx2.beginPath();
hists.h[0] = 0
hists.h[size - 1] = 0
ctx2.moveTo(hists.h.length, x(hists.h[0]))
for (let i=hists.h.length - 1; i >= 0; i--) {
ctx2.lineTo(128 - x(hists.h[i]), hists.h.length - i)
}
ctx2.lineWidth=1
ctx2.stroke()
return ctx2.canvas
}
Insert cell
Insert cell
x = d3.scaleLinear().domain(d3.extent(histograms(ctx).h)).range([0, 128])

Insert cell
ctx.canvas.height
Insert cell
histograms = function(ctx) {
const { width, height } = ctx.canvas;
const d = ctx.getImageData(0,0, width, height).data
const w = new Float32Array(width)
const h = new Float32Array(height)
for (let i = 0; i < width * height * 4; i += 4) {
const alpha = (size / 2 - d[i]) * d[i + 3] / size / 2
const x = size - Math.floor(i/4/width)
const y = (i / 4) % width
h[x] += alpha
w[y] += alpha
}
const pong_w = new Float32Array(height)
pong_w[0] = (h[1] + h[0])/2
pong_w[pong_w.length - 1] = (h[h.length -2] + h[h.length -2])/2
for (let i = 1; i < (height-1); i++) {
pong_w[i] = (h.slice(i, i+2)).reduce((a, b) => a+b, 0)/3
}
return {w, h : pong_w}

}
Insert cell
size = 1024
Insert cell
half = size/2
Insert cell
ctx = {
const ctx = DOM.canvas(size, size).getContext("2d");
const width = size
const height = size
ctx.fillRect(0, 0, size, size )
ctx.translate(half, half);
ctx.rotate(angle);
ctx.drawImage(edgeset.canny, -width / 2, -height / 2, width, height);
ctx.rotate(-angle);
ctx.translate(-half, -half);
return ctx
}
Insert cell
d3 = require("d3@v7")
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input"));
}
Insert cell

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.
Learn more