Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Mar 11, 2020
Importers
16 stars
display = Pixel({width, height})
{
const value = new Uint8Array(width * height);
let x = 1;
for (const glyph of Array.from(text, c => glyphs.get(c))) {
set({value, width, height}, glyph, x, 1);
x += glyph.width + 1;
}
display.value = value;
}
text = {
let date = new Date;
while (true) {
yield date.toLocaleString("en-GB", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
date = new Date(Math.ceil((Date.now() + 1) / 1000) * 1000);
await Promises.when(date);
}
}
width = 8 * 5 + (8 + 1) * 1
height = 7 + 2
glyphs = new Map([
["0", 15623448110, 5, 7],
["1", 4701950094, 5, 7],
["2", 15603929375, 5, 7],
["3", 33357366830, 5, 7],
["4", 2359917634, 5, 7],
["5", 33854359086, 5, 7],
["6", 6728664622, 5, 7],
["7", 33858658568, 5, 7],
["8", 15621113390, 5, 7],
["9", 15621129292, 5, 7],
[" ", 0, 5, 7],
[":", 415248768, 5, 7],
[";", 415248520, 5, 7],
["A", 15621226033, 5, 7],
["B", 32801506878, 5, 7],
["C", 15620129326, 5, 7],
["D", 32801080894, 5, 7],
["E", 33840644639, 5, 7],
["F", 33840644624, 5, 7],
["G", 15620359727, 5, 7],
["H", 18842895921, 5, 7],
["I", 15170932878, 5, 7],
["J", 7585466956, 5, 7],
["K", 18879369809, 5, 7],
["L", 17734058527, 5, 7],
// TODO
].map(([key, value, width, height]) => [key, {value: Uint8Array.from(value.toString(2).padStart(width * height, "0").split("")), width, height}]))
function set(target, source, x, y) {
for (let j = 0; j < source.height; ++j) {
for (let i = 0; i < source.width; ++i) {
target.value[(j + y) * target.width + i + x] = source.value[j * source.width + i];
}
}
return target;
}
import {Pixel} from "@mbostock/pixel-input"
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.
