I map 🗺️ & graph 📈 data 🈸
Published
Edited
May 10, 2019
2 stars
viewer = html `
<div style="height: 600px">
<perspective-viewer view="grid">
</perspective-viewer>
</div>
`
viewerLoad = window.addEventListener('WebComponentsReady', function() {
console.log('WebComponentsReady: loading plugins...');
loadPerspectiveViewerPlugins();
})
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');
}
loadData(dataFile)
function loadData(file) {
const fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
console.log('loadData: loading file:', file.name);
const textData = fileLoadedEvent.target.result;
const viewer = document.getElementsByTagName('perspective-viewer')[0];
viewer.reset();
viewer.load(textData);
viewer.update(textData);
viewer.toggleConfig();
};
// read csv data file as text to trigger file onLoad event
fileReader.readAsText(file);
}
import {file} from '@jashkenas/inputs'
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.
