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