Published
Edited
Apr 23, 2020
Importers
md`# Coral Vivo Image Database`
attachments = [FileAttachment("files1-20.json"), FileAttachment("files21-40.json"), FileAttachment("files41-51.json")]
imgDb = JSON.parse(await FileAttachment("files1-20.json").text())
.concat (JSON.parse(await FileAttachment("files21-40.json").text()))
.concat (JSON.parse(await FileAttachment("files41-51.json").text()))
.map(entry => {
entry.img = html`<img src=${entry.img}>`;
return entry
})
{
let [w,h] = [width,width*9/16]
let ctx = DOM.context2d(w,h);
let s = 0.2;
for (let entry of imgDb) {
let img = entry.img;
ctx.drawImage(img, Math.random()*(w-img.width*s),
Math.random()*(h-img.height*s),img.width*s,img.height*s);
}
return ctx.canvas
}
{
let [w,h] = [width,width/4*3]
let ctx = DOM.context2d(w,h);
let side = Math.trunc(Math.sqrt(w*h/imgDb.length));
let nx = Math.ceil(w/side)
let ny = Math.ceil(h/side)
side = Math.min(w/nx,h/ny)
for (let i = 0; i < imgDb.length; i++) {
let img = imgDb[i].img;
ctx.drawImage(img, (i%nx)*side,(~~(i/nx))*side,side,side)
}
return ctx.canvas
}
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.
