Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
update = {
const decoder = new TextDecoder("utf-8");
const encoder = new TextEncoder("utf-8");
const redecode = () => viewof decoded.value = decoder.decode(decode(viewof encoded.value));
const reencode = () => viewof encoded.value = encode(encoder.encode(viewof decoded.value));
redecode();
viewof encoded.addEventListener("input", redecode);
viewof decoded.addEventListener("input", reencode);
invalidation.then(() => {
viewof encoded.removeEventListener("input", redecode);
viewof decoded.removeEventListener("input", reencode);
});
}
function decode(base64) {
let len = base64.length;
let bufferLength = len * 0.75;
let i;
let p = 0;
if (base64[base64.length - 1] === "=") {
--bufferLength;
if (base64[base64.length - 2] === "=") {
--bufferLength;
}
}
let bytes = new Uint8Array(bufferLength);
for (i = 0; i < len; i+=4) {
const encoded1 = lookup[base64.charCodeAt(i)];
const encoded2 = lookup[base64.charCodeAt(i+1)];
const encoded3 = lookup[base64.charCodeAt(i+2)];
const encoded4 = lookup[base64.charCodeAt(i+3)];
bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
}
return bytes.buffer;
}
function encode(buffer) {
let bytes = new Uint8Array(buffer);
let len = bytes.length;
let i;
let base64 = "";
for (i = 0; i < len; i+=3) {
base64 += chars[bytes[i] >> 2];
base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
base64 += chars[bytes[i + 2] & 63];
}
if ((len % 3) === 2) {
base64 = base64.slice(0, -1) + "=";
} else if (len % 3 === 1) {
base64 = base64.slice(0, -2) + "==";
}
return base64;
}
chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
lookup = {
const lookup = new Uint8Array(256);
for (let i = 0; i < chars.length; i++) {
lookup[chars.charCodeAt(i)] = i;
}
return lookup;
}
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.
