Iron-based life form descended from T-72
Published
Edited
Feb 29, 2020
step = 32;
shaper = s => ({
square: ['rect', {width: s, height: s}],
circle: ['circle', {r: s >> 1, cx: s >> 1, cy: s >> 1}],
GND: ['path', {d: `M${[0, 0, s>>1, s, s, 0, 'Z']}`}],
VCC: ['path', {d: `M${[0, s, s>>1, 0, s, s, 'Z']}`}],
nc: ['path', {d: `M${[0, 0, s, s]}M${[s, 0, 0, s]}`}],
})
shapes = shaper(step)
render(['g'].concat(Object.keys(shapes).map((key, i) => {
const shape = shapes[key];
shape[1].class = 'd1';
return ['g', t(step * i), shape];
})))
render = arr => html`${onml.stringify(
getSvg({w:step * 28, h: step * 28})
.concat([style, grid(28, 28, step), ['g', t(step + .5, step + .5)].concat([arr])])
)}`;
grid = (w, h, step) => {
let res = ['g', t(.5,.5)];
for (let x = 0; x <= w; x++) {
res.push(['line', {class: 'grid', x1: step * x, x2: step * x, y1: 0, y2: step * h}]);
}
for (let y = 0; y <= h; y++) {
res.push(['line', {class: 'grid', x1: 0, x2: step * w, y1: step * y, y2: step * y}]);
}
res.push(['g',
['line', {class: 'axis', x1: step, x2: step, y1: 0, y2: step * h}],
['line', {class: 'axis', x1: 0, x2: step * w, y1: step, y2: step}],
['line', {class: 'axis', x1: step * (w - 1), x2: step * (w - 1), y1: 0, y2: step * h}],
['line', {class: 'axis', x1: 0, x2: step * w, y1: step * (h - 1), y2: step * (h - 1)}],
]);
for (let x = 1; x < (w - 1); x++) {
res.push(['text', {class: 'label', x: step * x + (step >> 1), y: 0.75 * step}, x]);
}
for (let y = 1; y < (h - 1); y++) {
res.push(['text', {class: 'label', x: 0.5 * step, y: step * y + 0.75 * step}, letter(y - 1)]);
}
return res;
}
style = ['style', {}, `
.label { text-anchor: middle; font-size: ${step>>1}px; font-family: 'sans'; }
.d1 { fill: #faa; }
.box { stroke: #000; fill: none; }
.grid { stroke: #eee; fill: none; stroke-width: 1px; }
.axis { stroke: #f00; fill: none; stroke-width: 1px; }
rect { fill: none; stroke: #000; }
circle { fill: none; stroke: #000; }
line { stroke: #000; }
text { font-size: 32px; font-family: 'sans'}
path { fill: none; stroke: #000; }
`];
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.
