https://github.com/loredanacirstea
https://twitter.com/lorecirstea
Published
Edited
Jan 6, 2020
1 star
md`# Comic Strip Grid`
mutable gridItems = setItems(cstripobj)
setCstrip()
height = Math.ceil(width * screen.height / screen.width);
function setItems(cstripobj) {
// document.getElementById('content').style.width = width;
// document.getElementById('content').style.height = height;
const gridItems = getItems(cstripobj, {cols: 2, width, height})
gridit("content", gridItems, 12, 12, 2)
return gridItems;
}
function setCstrip() {
gridItems.forEach((cell, i) => {
cstrip(`#${cell.id}`, [cstripobj[i]], {box: {opacity: 0.5, radius: 10}, svg: {width: cell.w * 12, height: cell.h * 12}});
})
}
function getItems(cstripobj, options) {
const gridratiow = options.width / 12;
const gridratioh = options.height / 12;
const ratioedw = (x) => Math.floor(x / gridratiow);
const ratioedh = (x) => Math.floor(x / gridratioh);
const panelwidth = ratioedw(options.width / options.cols);
const panelheight = ratioedh(options.height / Math.ceil(cstripobj.length / options.cols));
return cstripobj.map((panel, i) => {
const colindex = i % options.cols;
const rowindex = Math.floor(i / options.cols);
const x = colindex * panelwidth;
const y = rowindex * panelheight;
return {x, y, w: panelwidth, h: panelheight, id: `panel_${i}`}
})
}
import {gridit, griditStyle} from '@khron/ide-builder'
import {cstrip} from '@loredanacirstea/comicstrip'
griditStyle()
html `<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet"> <style>
h1, h2, h3, h4 {
font-family: 'Gloria Hallelujah', cursive;
}
</style>`
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.
