Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/.block

Last active Sep 21, 2020
Embed
What would you like to do?
Perspective / Superstore Example
license: apache-2.0

Demo of Perspective.

This example of a <perspective-workspace> dashboard is generated from one Apache Arrow source dataset, converted originally from this XLS from a Tableau presentation. This layout is just an example; you can explore your own visualizations in the Perspective configuration menu, accessed by clicking the dropdown arrow in each pane's upper left, or advanced options in the pane's right-click context menu.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/umd/material.css">
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></script>
<style>
body {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<perspective-workspace id="workspace">
<perspective-viewer table="superstore"></perspective-viewer>
</perspective-workspace>
<script>
const URL = "https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.arrow";
async function get_layout() {
const req = await fetch("layout.json");
const json = await req.json();
return json;
}
const datasource = async () => {
const request = fetch(URL);
const worker = perspective.worker();
const response = await request;
const buffer = await response.arrayBuffer();
return worker.table(buffer);
};
window.addEventListener("load", async () => {
const plugin = window.getPlugin("d3_heatmap");
plugin.max_cells = 10000;
plugin.max_columns = 200;
window.workspace.tables.set("superstore", datasource());
const layout = await get_layout();
window.workspace.restore(layout);
});
</script>
</body>
</html>
{
"sizes": [
1
],
"detail": {
"main": {
"type": "split-area",
"orientation": "horizontal",
"children": [
{
"type": "tab-area",
"widgets": [
"PERSPECTIVE_GENERATED_ID_0",
"PERSPECTIVE_GENERATED_ID_1"
],
"currentIndex": 0
},
{
"type": "tab-area",
"widgets": [
"PERSPECTIVE_GENERATED_ID_2"
],
"currentIndex": 0
}
],
"sizes": [
0.5,
0.5
]
}
},
"mode": "globalFilters",
"viewers": {
"PERSPECTIVE_GENERATED_ID_0": {
"plugin": "datagrid",
"row-pivots": [
"Region",
"State"
],
"column-pivots": [
"Category",
"Sub-Category"
],
"columns": [
"Sales",
"Profit"
],
"master": false,
"name": "Sales Report",
"table": "superstore",
"linked": false
},
"PERSPECTIVE_GENERATED_ID_1": {
"plugin": "datagrid",
"columns": [
"Row ID",
"Order ID",
"Ship Mode",
"Customer ID",
"Customer Name",
"Segment",
"Country",
"City",
"State",
"Postal Code",
"Region",
"Product ID",
"Category",
"Sub-Category",
"Product Name",
"Sales",
"Quantity",
"Discount",
"Profit",
"Order Date",
"Ship Date"
],
"master": false,
"name": "superstore.csv",
"table": "superstore",
"linked": false
},
"PERSPECTIVE_GENERATED_ID_2": {
"plugin": "d3_treemap",
"row-pivots": [
"State"
],
"columns": [
"Sales",
"Profit",
null
],
"sort": [
[
"Profit",
"desc"
]
],
"plugin_config": {
"realValues": [
"Sales",
"Profit",
null
],
"treemaps": {
"": {
"treemapLevel": 0,
"treemapRoute": [
""
]
}
}
},
"master": false,
"name": "Sales Report (by State)",
"table": "superstore",
"linked": false
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment