Published
Edited
Nov 17, 2019
1 fork
1 star
Insert cell
Insert cell
file = "linnarsson.molecules.arrow"
Insert cell
Insert cell
Insert cell
Insert cell
timedOutput = loadAndRender(url)
Insert cell
async function loadAndRender(url) {
// load Table from Arrow stream
const t0 = Date.now();
const df = await loadData(url);
const t1 = Date.now();

// Find extent of x and y in df
const t2 = Date.now();
const extent = await getExtent(df);
const t3 = Date.now();

// Create canvas
// Max out at 1 pixel per point (create canvas)
const w = width;
const pixels_per_point = w / extent.x.range;
const h = extent.y.range * pixels_per_point;
const canvas = DOM.canvas(w, h);
const ctx = canvas.getContext("2d");
const image = ctx.createImageData(w, h);

// Iterate over table and render to canvas
const t4 = Date.now();
plotMolecules(df, image, 0xFF000000, extent);
ctx.putImageData(image, 0, 0);
const t5 = Date.now();

return [canvas, df, t1 - t0, t3 - t2, t5 - t4, t5 - t0];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
arrow = require('apache-arrow@0.15.1')
Insert cell
d3 = require('d3@5')
Insert cell

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.
Learn more