md`# Loading local image files examples`
md`## Load all files in folder`
canvasses = unsafe_html`
<div style="display: grid; grid-gap: .875rem; grid-template-columns: repeat(auto-fill,minmax(160px, 5fr));">
<canvas id='swv' width=160 height=160 style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>
<canvas id='sws' width=160 height=160 style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>
<canvas id='sbo' width='160' height='160' style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>
<canvas id='sto' width='160' height='160' style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>
<canvas id='swe' width='160' height='160' style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>
</div>`
unsafe_html` <canvas id='surfaceDice' width=160 height=160 style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>`
distance_threshold = 1
surfaceDiceHighlight(loadImage("images", caseNo, sliceNo), loadImage("segmentations_without_variations", caseNo, sliceNo), 'surfaceDice')
import {html, svg} from "@observablehq/htl"
function unsafe_html() {
const span = document.createElement("span");
span.innerHTML = String.raw.apply(this, arguments);
return span;
}
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.
