I map 🗺️ & graph 📈 data 🈸
Published
Edited
Feb 2, 2021
data = fetchData(dataUrl)
md `TODO: add canvas datagrid display`
md `## Data`
dataParam = new URLSearchParams(html`<a href>`.search).get('data')
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;
}
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;
}
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.
