Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
viewof containerEl
data = {
const _nrokid = ngrokid.includes("ngrok.io")
? ngrokid.match(/\/\/(.*?)\./)[1]
: ngrokid;
return fetch(`https://${_nrokid}.ngrok.io/data`)
.then(d => d.text())
.then(text => d3.csvParse(text, d3.autoType));
}
init = {
const dataset = new ScatterGL.Dataset(
data.map(p => [p.x, p.y, p.z]),
data.map((d, i) => ({
label: d.digit,
labelIndex: i
}))
);
containerEl.setPointColorer(i =>
convertColor(d3.schemePaired[data[i].digit])
);
containerEl.render(dataset);
containerEl.resize();
}
function convertColor(color) {
const c = d3.color(color);
return (c.b << 16) + (c.g << 8) + c.r * 255;
}
import { viewof containerEl, ScatterGL } with {
points,
labels
} from "@radames/umap-jupyter-notebook-scattergl"
import { Text } from "@observablehq/inputs"
d3 = require("d3-dsv", "d3-scale-chromatic", "d3-color")
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.
