Digital Humanist. Manhattan-based.
Public
Edited
Nov 8, 2023
3 stars
viewof opacity = Inputs.range([2, 10])
viewof departures = Inputs.color({ value: "#f8baba" })
viewof arrivals = Inputs.color({ value: "#dddbb6" })
deepscatter = import("https://cdn.skypack.dev/deepscatter@2.14.0")
{
scatterplot
.plotAPI({
alpha: opacity,
duration: 0,
encoding: {
color: {
field: "half",
domain: [0, 1],
range: [departures, arrivals]
},
filter: {
field: "half",
op: op == "both" ? "gt" : op,
a: op == "both" ? -1 : 0.5 // trick to make it both when op is both
}
}
})
.then(() => scatterplot.plotAPI({ duration: 6000 }));
}
scatterplot = {
const plot = new deepscatter.default(div, 800, 640);
console.log("FOO");
plot.plotAPI({
arrow_table: exploded,
point_size: 1,
max_points: 6e6,
alpha: 50,
// mouseover_function: "d => ``",
background_color: "#444444",
zoom_balance: 0.5,
duration: 6000,
encoding: {
x: {
field: "x",
transform: "literal"
},
y: {
field: "y",
transform: "literal"
},
x0: {
field: "x0",
transform: "literal"
},
y0: {
field: "y0",
transform: "literal"
}
}
});
return plot;
invalidation.then(() => plot.destroy());
}
scatterplot.dataset.extent
fromIPC = arrow.tableFromIPC(places.arrayBuffer())
fromIPC.numRows
batches = {
const batches = [];
function makeBatch() {
return {
x: new Float32Array(50000),
y: new Float32Array(50000),
x0: new Float32Array(50000),
y0: new Float32Array(50000),
ix: new Uint32Array(50000),
half: new Float32Array(50000)
};
}
let batch = makeBatch();
let i = 0;
let ix = 0;
for (const row of fromIPC) {
for (let j = 0; j < row.Count; j += Math.ceil(Math.random() * 50)) {
const midX = (row.x + row.x0) / 2;
const midY = (row.y + row.y0) / 2;
// first half
batch.x[i] = row.x;
batch.y[i] = -row.y;
batch.x0[i] = midX;
batch.y0[i] = -midY;
batch.ix[i] = ix++;
batch.half[i] = 0;
i++;
batch.x[i] = midX;
batch.y[i] = -midY;
batch.x0[i] = row.x0;
batch.y0[i] = -row.y0;
batch.ix[i] = ix++;
batch.half[i] = 1;
i++;
if (i++ === 50000) {
batches.push(batch);
batch = makeBatch();
i = 0;
}
}
}
d3.shuffle(batches);
return batches.slice(0, batches.length - 1);
}
exploded.get(140)
exploded = new arrow.Table(
batches.map((d) => arrow.tableFromArrays(d).batches[0])
)
tb = arrow.tableToIPC(exploded, "file")
places = FileAttachment("out.arrow")
uk = FileAttachment("UK.parquet")
arrow = import("https://cdn.skypack.dev/apache-arrow@13.0.0")
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.
