|
const SCHEMA = { |
|
athlete: "string", |
|
age: "integer", |
|
country: "string", |
|
year: "string", |
|
date: "date", |
|
sport: "string", |
|
gold: "integer", |
|
silver: "integer", |
|
bronze: "integer", |
|
total: "integer", |
|
|
|
} |
|
|
|
window.addEventListener("load", function() { |
|
//request data and initialise table |
|
const request = fetch("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json") |
|
const worker = perspective.worker(); |
|
const table = worker.table(SCHEMA); |
|
|
|
request |
|
.then(response => response.json() |
|
.then(data => { |
|
table.update(data) |
|
})) |
|
|
|
|
|
const PerspectiveWorkspace = PerspectivePhosphor.PerspectiveWorkspace |
|
const PerspectiveWidget = PerspectivePhosphor.PerspectiveWidget |
|
|
|
// create widgets |
|
const workspace = new PerspectiveWorkspace({node: document.body}) |
|
const countryMaster = new PerspectiveWidget("Country", { |
|
"row-pivots": ["country"], |
|
columns: ["gold", "silver", "bronze"], |
|
sort: [["gold", "desc"]] |
|
}) |
|
|
|
const yearMaster = new PerspectiveWidget("Year", { |
|
"row-pivots": ["year"], |
|
columns: ["gold", "silver", "bronze"], |
|
sort: [["year", "desc"]] |
|
}) |
|
|
|
const sport = new PerspectiveWidget("Sports by Age", { |
|
"row-pivots": ["athlete"], |
|
columns: ["age", "sport", "total"], |
|
sort: [["gold", "desc"]], |
|
aggregates: {"sport": "dominant"}, |
|
plugin: "xy_scatter" |
|
}) |
|
|
|
const athlete = new PerspectiveWidget("Athletes by Year", { |
|
"row-pivots": ["athlete"], |
|
"column-pivots": ["year"], |
|
columns: ["gold", "silver", "bronze", "total"], |
|
sort: [["total", "desc"]], |
|
}) |
|
|
|
const country = new PerspectiveWidget("Country by Year", { |
|
"row-pivots": ["year"], |
|
"column-pivots": ["country"], |
|
columns: ["gold", "silver", "bronze"], |
|
plugin: "y_bar" |
|
}) |
|
|
|
// add widgets to workspace |
|
workspace.addViewer(countryMaster) |
|
workspace.makeMaster(countryMaster) |
|
|
|
workspace.addViewer(yearMaster) |
|
workspace.makeMaster(yearMaster) |
|
|
|
workspace.addViewer(athlete) |
|
workspace.addViewer(sport, {mode: "split-bottom", ref: athlete}) |
|
workspace.addViewer(country, {mode: "split-right", ref: sport}) |
|
|
|
countryMaster.load(table) |
|
yearMaster.load(table) |
|
athlete.load(table) |
|
sport.load(table) |
|
country.load(table) |
|
|
|
// resize workspace on window resize |
|
window.onresize = () => workspace.update() |
|
}); |