Dr. Tanner is a research professor at the University of Tennessee working towards making data science accessible using AI tools.
Public
Edited
Apr 18, 2023
function CANVAS(text, { s=64, canvas }={}) {
const n = text.length;
const w = s;
const h = s;
if (canvas === undefined) {
canvas = DOM.canvas(w, h);
canvas.style.border = `1px solid black`;
}
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, w, h);
ctx.font = `${s/n}px Go Mono`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
let x = w/2;
let y = h/2;
const measure = ctx.measureText(text);
const { actualBoundingBoxAscent: top, actualBoundingBoxDescent: bot } = measure;
y += Math.abs(top - bot) / 2;
ctx.fillText(text, x, y);
return canvas;
}
async function ICON(canvas) {
const type = 'image/vnd.microsoft.icon';
const quality = '-moz-parse-options:format=bmp;bpp=32';
const blob = await new Promise((resolve) => canvas.toBlob(resolve, type, quality));
return blob;
}
async function ZIP(prefix, { depth=2, alphabet='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789' }) {
// return;
const canvas = CANVAS('A');
const z = zip();
const root = z.folder('icons').folder(prefix);
await RECURSE(prefix, depth);
const blob = await z.generateAsync({ type: 'blob' });
return DOM.download(blob, `icons.zip`);
async function RECURSE(prefix, depth) {
for (let i=0, n=alphabet.length; i<n; ++i) {
const text = prefix + alphabet.charAt(i);
await FILE(text);
if (depth > 0) {
RECURSE(text, depth - 1);
}
}
}
async function FILE(text) {
const blob = await ICON(CANVAS(text, { canvas }));
root.file(`${text}.ico`, blob);
}
}
ZIP('', { depth: 1 })
{
return;
const depth = 0;
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
const zips = [];
for (let i=0, n=alphabet.length; i<n; ++i) {
const text = alphabet.charAt(i);
yield VIEW();
const zip = await ZIP(text, { depth, alphabet });
zips.push(zip);
}
return yield VIEW();
function VIEW() {
return htl.html`
${zips.map((zip) => htl.html.fragment`
<p>${zip}
`/* htl.html.fragment */)}
`/* htl.html */;
}
}
import { zip } from '@fil/jszip';
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.
