Demo of Perspective.
Perspective / Olympic Medal Winners, 2000-2012
<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; | |
} | |
perspective-viewer { | |
--d3fc-positive--gradient: linear-gradient( | |
#94D0FF, | |
#8795E8, | |
#966bff, | |
#AD8CFF, | |
#C774E8, | |
#c774a9, | |
#FF6AD5, | |
#ff6a8b, | |
#ff8b8b, | |
#ffa58b, | |
#ffde8b, | |
#cdde8b, | |
#8bde8b, | |
#20de8b | |
); | |
} | |
</style> | |
</head> | |
<body> | |
<perspective-workspace id="workspace"></perspective-workspace> | |
<script> | |
const SCHEMA = { | |
athlete: "string", | |
age: "integer", | |
country: "string", | |
year: "string", | |
date: "date", | |
sport: "string", | |
gold: "integer", | |
silver: "integer", | |
bronze: "integer", | |
total: "integer" | |
}; | |
const URL = "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"; | |
const datasource = async () => { | |
const request = fetch(URL); | |
const worker = perspective.worker(); | |
const table = worker.table(SCHEMA); | |
const response = await request; | |
const json = await response.json(); | |
table.update(json); | |
return table; | |
}; | |
window.addEventListener("load", () => { | |
const plugin = window.getPlugin("d3_heatmap"); | |
plugin.max_cells = 10000; | |
plugin.max_columns = 200; | |
window.workspace.tables.set("olympics", datasource()); | |
window.workspace.restore({ | |
sizes: [0.3, 0.7], | |
detail: { | |
main: { | |
type: "split-area", | |
orientation: "vertical", | |
children: [ | |
{ | |
type: "tab-area", | |
widgets: ["Three"], | |
currentIndex: 0 | |
}, | |
{ | |
type: "tab-area", | |
widgets: ["PERSPECTIVE_GENERATED_ID_1", "PERSPECTIVE_GENERATED_ID_2", "PERSPECTIVE_GENERATED_ID_0"], | |
currentIndex: 0 | |
} | |
], | |
sizes: [0.7, 0.3] | |
} | |
}, | |
master: { | |
widgets: ["Two"], | |
sizes: [1] | |
}, | |
viewers: { | |
Two: { | |
selectable: true, | |
plugin: "hypergrid", | |
"row-pivots": ["country"], | |
aggregates: { | |
sport: "dominant" | |
}, | |
sort: [["total", "desc"]], | |
columns: ["total", "gold", "bronze", "silver", "sport"], | |
plugin_config: { | |
selected: "Canada" | |
}, | |
master: true, | |
name: "Test Widget Two", | |
table: "olympics" | |
}, | |
Three: { | |
plugin: "d3_heatmap", | |
"row-pivots": ["sport"], | |
"column-pivots": ["age"], | |
sort: [["total"]], | |
columns: ["total"], | |
filters: [["country", "==", "Canada"]], | |
plugin_config: { | |
realValues: ["total"] | |
}, | |
name: "Sport by Age Heatmap", | |
table: "olympics" | |
}, | |
PERSPECTIVE_GENERATED_ID_1: { | |
plugin: "hypergrid", | |
columns: ["total", "sport", "country", "age", "gold", "silver", "bronze"], | |
"row-pivots": ["athlete"], | |
sort: [["total", "desc"]], | |
aggregates: { | |
sport: "dominant", | |
age: "high", | |
country: "dominant" | |
}, | |
filters: [["country", "==", "Canada"]], | |
name: "Athlete by Sport", | |
table: "olympics" | |
}, | |
PERSPECTIVE_GENERATED_ID_2: { | |
plugin: "d3_y_line", | |
aggregates: { | |
age: "avg" | |
}, | |
filters: [ | |
["country", "==", "Canada"], | |
["year", "in", ["2002", "2006", "2010", ""]] | |
], | |
columns: ["age", "total"], | |
"row-pivots": ["year"], | |
plugin_config: { | |
realValues: ["age", "total"], | |
splitMainValues: ["age"] | |
}, | |
name: "Medals vs Avg Age 2002-2010 (Winter)", | |
table: "olympics" | |
}, | |
PERSPECTIVE_GENERATED_ID_0: { | |
plugin: "d3_y_line", | |
columns: ["age", "total"], | |
"row-pivots": ["year"], | |
aggregates: { | |
age: "avg" | |
}, | |
filters: [ | |
["country", "==", "Canada"], | |
["year", "in", ["2000", "2004", "2008", "2012", ""]] | |
], | |
plugin_config: { | |
realValues: ["age", "total"], | |
splitMainValues: ["age"] | |
}, | |
name: "Medals vs Avg Age 2000-2012 (Summer)", | |
table: "olympics" | |
} | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment