Iron-based life form descended from T-72
Public
Edited
Dec 3
render(
top(
bottom(box(20,40), box(20,20), 'Bob who?', box(20,30)),
// box(20,250),
center(box(20,20), 'Hello', box(40,40), 'Alice Copper', box(20,20), box(20,20), box(20,20)),
right(box(32,32), 'John', box(8,64), 'Lennon', box(64,8)),
left('Paul', 'McCartney', box(40,200))
)
)
boxer = config => {
let texter = e => (typeof e === 'string') ? text(e) : e;
let box = function (w, h) {
w = w|0;
h = h|0;
return ['g', {w: w, h: h}, ['rect', {width: w, height: h}]];
};
let left = function () {
let h = config.padding;
let w = 0;
let res = [];
Array
.from(arguments)
.map(texter)
.map(e => { w = Math.max(w, e[1].w); return e; })
.map(e => {
res.push(['g', {transform: `translate(${config.padding},${h})`}, e]);
h += (e[1].h + config.padding);
});
w += config.padding * 2;
return box(w, h).concat(res);
};
let right = function () {
let h = config.padding;
let w = 0;
let res = [];
Array
.from(arguments)
.map(texter)
.map(e => { w = Math.max(w, e[1].w); return e; })
.map(e => {
res.push(['g', {transform: `translate(${config.padding + w - e[1].w},${h})`}, e]);
h += (e[1].h + config.padding);
});
w += config.padding * 2;
return box(w, h).concat(res);
};
let center = function () {
let h = config.padding;
let w = 0;
let res = [];
Array
.from(arguments)
.map(texter)
.map(e => { w = Math.max(w, e[1].w); return e; })
.map(e => {
res.push(['g', {transform: `translate(${config.padding + (w - e[1].w) / 2},${h})`}, e]);
h += (e[1].h + config.padding);
});
w += config.padding * 2;
return box(w, h).concat(res);
};
let top = function () {
let h = 0;
let w = config.padding;
let res = [];
Array
.from(arguments)
.map(texter)
.map(e => { h = Math.max(h, e[1].h); return e; })
.map(e => {
res.push(['g', {transform: `translate(${w},${config.padding})`}, e]);
w += (e[1].w + config.padding);
});
h += config.padding * 2;
return box(w, h).concat(res);
};
let bottom = function () {
let h = 0;
let w = config.padding;
let res = [];
Array
.from(arguments)
.map(texter)
.map(e => { h = Math.max(h, e[1].h); return e; })
.map(e => {
res.push(['g', {transform: `translate(${w},${config.padding + h - e[1].h})`}, e]);
w += e[1].w + config.padding;
});
h += config.padding * 2;
return box(w, h).concat(res);
};
return {
left, center, right,
top, bottom,
box
};
}
text = src => {
const f = OpenSans()(14);
const w = Math.ceil(f.getWidth(src) + 2);
const h = Math.ceil(f.getHeight());
return ['g', {w: w, h: h}, ['text', {x: w >> 1, y: h >> 1}, src]];
}
render = ml =>
svg`${onml.stringify(['svg', {width: ml[1].w, height: ml[1].h},
['style', `
rect { fill:hsla(0,0%,0%,0.1); }
text {
font-family: "Open Sans";
text-anchor: middle;
alignment-baseline: middle;
font-size: 16px;
}
`],
ml
])}`;
bxr = require('bxr@0.0.4')
Similar to flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-direction: flex-direction: row | row-reverse | column | column-reverse;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
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.
