Published
Edited
Feb 2, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = fetchData(dataUrl)
Insert cell
md `TODO: add canvas datagrid display`
Insert cell
md `## Data`
Insert cell
dataParam = new URLSearchParams(html`<a href>`.search).get('data')
Insert cell
Insert cell
Insert cell
async function fetchData(dataUrl) {
let data = [];
console.log('fetchData:dataUrl:', dataUrl);
if (dataUrl.endsWith('.csv')) {
data = await d3Fetch.csv(dataUrl);
}
else if (dataUrl.endsWith('.json')) {
data = await d3Fetch.json(dataUrl);
}
else if (dataUrl.endsWith('.arrow')) {
data = loadArrowData(dataUrl);
}
return data;
}
Insert cell
async function loadArrowData(dataUrl){
const response = await fetch(dataUrl);
const arrayBuffer = await response.arrayBuffer();
const table = arrow.Table.from(new Uint8Array(arrayBuffer));
const rows = Array(table.length);
const fields = table.schema.fields.map(d => d.name);
for (let i=0, n=rows.length; i<n; ++i) {
const proto = {};
fields.forEach((fieldName, index) => {
const column = table.getColumnAt(index);
proto[fieldName] = column.get(i);
});
rows[i] = proto;
}
return rows;
}
Insert cell
Insert cell
Insert cell
Insert cell
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