I map 🗺️ & graph 📈 data 🈸
Published
Edited
May 9, 2019
1 fork
Importers
13 stars
Also listed in…
Vega
data = fetchData(dataUrl)
html `<div id="grid"></div>`
dataGrid = new Hypergrid(document.querySelector('div#grid'), {data: []});
showData(data, dataGrid)
styles = html`
<style>
input[type="text"] {
width: 700px;
}
#grid {
position: relative;
width: 100%;
height: 600px;
border: 1px solid #666;
}
<style>
`
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;
}
function showData(data, grid) {
grid.reset();
grid.setData({data: data});
grid.behaviorChanged();
grid.repaint();
return grid;
}
d3Fetch = require("d3-fetch@1.1.2")
Hypergrid = require('https://fin-hypergrid.github.io/core/3.2.1/build/fin-hypergrid.js').catch(() => window.fin.Hypergrid)
arrow = require('apache-arrow@0.4.1')
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.
