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 / 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' 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