I map 🗺️ & graph 📈 data 🈸
viewer = html `
<div style="height:${width*.6}px">
<perspective-viewer
view="treemap"
row-pivots='["Sub-Category","Region","Segment"]'
sort='[["Profit","desc"]]'
columns='["Sales", "Profit"]'>
</perspective-viewer>
</div>
`
viewerLoad = window.addEventListener('WebComponentsReady', function() {
console.log('WebComponentsReady: loading plugins...');
const hyperGrid = loadPerspectiveViewerPlugins();
const viewer = document.getElementsByTagName('perspective-viewer')[0];
console.log('WebComponentsReady: loading data:', dataUrl);
loadData(dataUrl).then(buffer => {
console.log('Loading view data...');
viewer.load(buffer);
viewer.toggleConfig();
});
})
async function loadPerspectiveViewerPlugins() {
console.log('loadPerspectiveViewerPlugins: loading plugins...');
const hyperGrid = await require('@finos/perspective-viewer-hypergrid@0.3.0-rc.1/build/hypergrid.plugin.js');
const highCharts = await require('@finos/perspective-viewer-highcharts@0.3.0-rc.1/build/highcharts.plugin.js');
return hyperGrid;
}
dataSample = md`${getMarkdown(every2KRecord, fields, ['Order Date', 'Ship Date'])}` // date fields
arrow = require('apache-arrow@0.3.1')
perspective = require('@finos/perspective@0.3.0-rc.1/build/perspective.js')
perspectiveViewer = require('@finos/perspective-viewer@0.3.0-rc.1/build/perspective.view.js')
viewerStyle = html`
<link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer@0.3.0-rc.1/build/material.css" is="custom-style" />
<style>
perspective-viewer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
`
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.
