pixel flipper, data sifter. trying to see what I can while I'm here
selectedSubset
Type Table, then Shift-Enter. Ctrl-space for more options.
test-counts-filtered-points.parquet
Type Table, then Shift-Enter. Ctrl-space for more options.
d3.sum(counts, d => d.tokens > 4000 ? 4000 : d.tokens) / 1000 * 0.0004
points = counts.map(d => {
return [d.x, d.y, colorScale.domain.indexOf(d.pile_set_name)]
})
totals = Plot.plot({
caption: `Total tokens per pile set`,
marks: [
Plot.barX(counts, Plot.groupY({x: "sum"}, {y: "pile_set_name", x: "tokens", fill: "pile_set_name", sort: {y: "x", reverse: true, limit: 22}})),
Plot.ruleX([0])
],
marginLeft: 120,
y: {
label: null
},
grid: true
})
colorScale = totals.scale("color")
colors = colorScale.domain.map(d => colorScale.apply(d))
/*
* Simple helper to create a dynamic viewof scatterplot based on:
* - https://observablehq.com/@radames/hello-regl-scatterplot
* - https://observablehq.com/@fil/hello-regl-scatterplot
*/
function createScatterplotView({
width = 600,
height = 340,
pointSize = 2,
points = [[0, 0]],
colors = [],
invalidation
} = {}) {
const canvas = document.createElement("canvas");
const scatterplot = createScatterplot({
canvas,
pointSize,
width,
height,
lassoOnLongPress: true,
backgroundColor: "white"
});
scatterplot.subscribe("select", ({ points }) => {
canvas.value = points;
canvas.dispatchEvent(new Event("input"));
});
scatterplot.set({ colorBy: "valueA", pointColor: colors }); // color by the third value
scatterplot.draw(points);
canvas.scatterplot = scatterplot;
invalidation?.then(() => scatterplot.destroy());
return canvas;
}
createScatterplot = (await require("regl-scatterplot@1")).default
nformat = d3.format(",d")
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.
