Skip to content

Instantly share code, notes, and snippets.

@texodus
Forked from JHawk/.block
Last active July 15, 2019 17:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save texodus/6d4fa16fff331d71ac58ad256f0c5f94 to your computer and use it in GitHub Desktop.
Perspective Olympics Example
license: apache-2.0

An example of sharing a single perspective.table among multiple instances of <perspective-viewer>.

#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-row-gap: 3px;
grid-column-gap: 3px;
background-color: #ccc;
}
perspective-viewer {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
<script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
<script src="https://unpkg.com/@finos/perspective-viewer-hypergrid/dist/umd/perspective-viewer-hypergrid.js"></script>
<script src="https://unpkg.com/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
<script src="olympics.js"></script>
<link rel='stylesheet' href="index.css">
<link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material.css" is="custom-style">
</head>
<body>
<div id="container">
<perspective-viewer
row-pivots='["athlete"]'
column-pivots='["year"]'
columns='["gold","silver","bronze"]'
sort='[["gold","desc"]]'>
</perspective-viewer>
<perspective-viewer
plugin="d3_x_bar"
row-pivots='["country"]'
columns='["gold"]'
sort='[["gold","desc"]]'>
</perspective-viewer>
<perspective-viewer
plugin='xy_scatter'
row-pivots='["athlete"]'
columns='["age","sport","total"]'
aggregates='{"total":"sum","age":"avg","sport":"dominant"}'>
</perspective-viewer>
<perspective-viewer
plugin='x_bar'
row-pivots='["year"]'
column-pivots='["country"]'
filters='[["country","==","United States"]]'
columns='["gold","silver","bronze"]'>
</perspective-viewer>
</div>
</body>
</html>
// Location of our dataset.
var url = 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json';
var xhr = new XMLHttpRequest();
// Make a request for the dataset.
xhr.open('GET', url, true);
xhr.onload = function () {
// Create a new Perspective WebWorker instance.
var worker = perspective.worker();
// Create a new Perspective table in our `worker` with the response.
var table = worker.table(JSON.parse(xhr.response));
// Load the `table` in each `<perspective-viewer>` DOM reference.
for (var el of document.getElementsByTagName('perspective-viewer')) {
el.load(table);
}
}
xhr.send(null);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment