Created
October 5, 2022 16:41
-
-
Save texodus/93c0a23a5e255721e408e01d4092e314 to your computer and use it in GitHub Desktop.
Perspective / t-digest
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tdigest.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@latest/dist/cdn/perspective-viewer.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@latest/dist/cdn/perspective-viewer-datagrid.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@latest/dist/cdn/perspective-viewer-d3fc.js"></script> | |
| <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/themes.css" /> | |
| <script type="module"> | |
| import {worker} from "https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js"; | |
| const WORKER = worker(); | |
| const REQ = fetch("https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.arrow"); | |
| function create_tdigest() { | |
| const td = new window.tdigest.TDigest(); | |
| for (let i = 0; i < 1000000; i++) { | |
| td.push(Math.random()); | |
| } | |
| td.compress(); | |
| return td; | |
| } | |
| async function load() { | |
| const resp = await REQ; | |
| const arrow = await resp.arrayBuffer(); | |
| const el = document.getElementsByTagName("perspective-viewer")[0]; | |
| const tdigest = create_tdigest().toArray(); | |
| const table = WORKER.table(tdigest); | |
| el.load(table); | |
| el.restore({plugin: "X/Y Scatter"}) | |
| el.toggleConfig(); | |
| } | |
| load(); | |
| </script> | |
| <style> | |
| perspective-viewer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <perspective-viewer editable> </perspective-viewer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment