Skip to content

Instantly share code, notes, and snippets.

@texodus
Last active Feb 2, 2022
Embed
What would you like to do?
Perspective / Olympic Medal Winners, 2000-2012
license: apache-2.0
height: 800
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/css/material.css" />
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective@latest"></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[theme="Material Light"] {
--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 CSV_URL =
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json";
const datasource = async () => {
const request = fetch(CSV_URL);
const worker = perspective.worker();
const table = await worker.table(SCHEMA);
const response = await request;
const json = await response.json();
table.update(json);
return table;
};
window.addEventListener("load", () => {
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: "datagrid",
group_by: ["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: "Heatmap",
group_by: ["sport"],
split_by: ["age"],
sort: [["total", "desc"]],
columns: ["total"],
filter: [],
plugin_config: {
realValues: ["total"],
},
name: "Sport by Age Heatmap",
table: "olympics",
},
PERSPECTIVE_GENERATED_ID_1: {
plugin: "datagrid",
columns: [
"total",
"sport",
"country",
"age",
"gold",
"silver",
"bronze",
],
group_by: ["athlete"],
sort: [["total", "desc"]],
aggregates: {
sport: "dominant",
age: "high",
country: "dominant",
},
filter: [["country", "==", "Canada"]],
name: "Athlete by Sport",
table: "olympics",
},
PERSPECTIVE_GENERATED_ID_2: {
plugin: "Y Line",
aggregates: {
age: "avg",
},
filter: [
// ["country", "==", "Canada"],
["year", "in", ["2002", "2006", "2010", ""]],
],
columns: ["age", "total"],
group_by: ["year"],
plugin_config: {
realValues: ["age", "total"],
splitMainValues: ["age"],
},
name: "Medals vs Avg Age 2002-2010 (Winter)",
table: "olympics",
},
PERSPECTIVE_GENERATED_ID_0: {
plugin: "Y Line",
columns: ["age", "total"],
group_by: ["year"],
aggregates: {
age: "avg",
},
filter: [
// ["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