Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/.block

Last active July 28, 2020 09:22
Show Gist options
  • Save texodus/d4dbf43e52da78e48ade1af4fa9093f4 to your computer and use it in GitHub Desktop.
Save texodus/d4dbf43e52da78e48ade1af4fa9093f4 to your computer and use it in GitHub Desktop.
Download ZIP
Perspective / Olympic Medal Winners, 2000-2012 (version 2)
Raw
.block
license: apache-2.0
height: 800
Raw
index.html
<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://unpkg.com/@finos/perspective-workspace/dist/umd/material.css">
<link rel='stylesheet' href="index.css">
<script src="https://unpkg.com/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
<script src="https://unpkg.com/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
<script src="https://unpkg.com/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
<script src="https://unpkg.com/@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.3138075313807531, 0.6861924686192469],
detail: {
main: {
type: "split-area",
orientation: "vertical",
children: [
{
type: "tab-area",
widgets: ["Three"],
currentIndex: 0
},
{
type: "tab-area",
widgets: ["One"],
currentIndex: 0
}
],
sizes: [0.5, 0.5]
}
},
master: {
widgets: ["Two"],
sizes: [1]
},
viewers: {
Two: {
selectable: true,
plugin: "hypergrid",
"row-pivots": ["year"],
aggregates: {
sport: "dominant",
country: "dominant"
},
columns: ["total", "gold", "bronze", "silver", "country"],
plugin_config: {
selected: "2008"
},
master: true,
name: "Test Widget Two",
table: "olympics"
},
Three: {
plugin: "d3_heatmap",
"row-pivots": ["age"],
"column-pivots": ["sport"],
aggregates: {
age: "avg"
},
sort: [["age", "col asc"]],
columns: ["total"],
filters: [["year", "==", "2008"]],
plugin_config: {
realValues: ["total"]
},
name: "Sport by Age Heatmap (avg(Age) sort)",
table: "olympics"
},
One: {
plugin: "d3_heatmap",
"row-pivots": ["age"],
"column-pivots": ["sport"],
aggregates: {
age: "avg"
},
sort: [["total", "col asc"]],
columns: ["total"],
filters: [["year", "==", "2008"]],
plugin_config: {
realValues: ["total"]
},
name: "Sport by Age Heatmap (sum(Total) Sort)",
table: "olympics"
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment