Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/.block

Last active February 2, 2022 00:02
Show Gist options
  • Save texodus/e074d7d9e5783e680d35f565d2b4b32e to your computer and use it in GitHub Desktop.
Save texodus/e074d7d9e5783e680d35f565d2b4b32e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. texodus revised this gist Feb 2, 2022. 1 changed file with 34 additions and 42 deletions.
    76 changes: 34 additions & 42 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,69 +10,61 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <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/webfontloader"></script>
    <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</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>

    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/material-dense.css" />
    <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/dist/cdn/perspective.js";
    import {worker} from "https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js";

    const WORKER = worker();
    const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");
    const REQ = fetch(
    "https://api.covidtracking.com/v1/states/daily.csv"
    );

    const LAYOUT = {
    "plugin": "Y Area",
    "plugin_config": {
    "legend": {
    "height": "106px",
    "left": "100px",
    "top": "25px",
    "width": ""
    }
    plugin: "Y Area",
    plugin_config: {
    legend: {
    height: "106px",
    left: "100px",
    top: "25px",
    width: "",
    },
    },
    "settings": true,
    "row_pivots": [
    "Parsed \"date\" bucket by week"
    ],
    "column_pivots": [
    "state"
    ],
    "columns": [
    "deathIncrease"
    settings: true,
    group_by: ['Parsed "date" bucket by week'],
    split_by: ["state"],
    columns: ["deathIncrease"],
    filter: [],
    sort: [["deathIncrease", "col desc"]],
    expressions: [
    `// Parsed "date" bucket by week
    var year := integer(floor("date" / 10000));
    var month := integer(floor("date" / 100)) - year * 100;
    var day := integer("date" % 100);
    bucket(date(year, month, day), \'W\')`,
    ],
    "filter": [],
    "sort": [
    [
    "deathIncrease",
    "col desc"
    ]
    ],
    "expressions": [
    "// Parsed \"date\" bucket by week\nvar year := integer(floor(\"date\" / 10000));\nvar month := integer(floor(\"date\" / 100)) - year * 100;\nvar day := integer(\"date\" % 100);\nbucket(date(year, month, day), 'W')"
    ],
    "aggregates": {}
    aggregates: {},
    };

    async function load() {
    const resp = await REQ;
    const csv = await resp.text();
    const el = document.getElementsByTagName("perspective-viewer")[0];
    const el =
    document.getElementsByTagName("perspective-viewer")[0];
    const table = WORKER.table(csv);
    el.load(table);
    el.restore(LAYOUT)
    el.restore(LAYOUT);
    el.toggleConfig();
    }

    window.addEventListener("DOMContentLoaded", load);

    </script>

    <style>
  2. texodus revised this gist Jan 6, 2022. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,15 +15,15 @@
    <script src="https://cdn.jsdelivr.net/npm/webfontloader"></script>
    <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</script>

    <script type="module" src="https://unpkg.com/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/css/material-dense.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/material-dense.css" />

    <script type="module">
    import {worker} from "https://unpkg.com/@finos/perspective/dist/cdn/perspective.js";
    import {worker} from "https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js";

    const WORKER = worker();
    const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");
  3. texodus revised this gist Nov 23, 2021. 1 changed file with 43 additions and 48 deletions.
    91 changes: 43 additions & 48 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,74 +10,69 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <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/webfontloader"></script>
    <script>
    WebFont.load({
    google: {
    families: [
    "Roboto Mono:200,400",
    "Material Icons",
    "Open Sans:300,400",
    ],
    },
    });
    </script>
    <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</script>

    <script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.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 type="module" src="https://unpkg.com/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>

    <link
    rel="stylesheet"
    href="https://unpkg.com/@finos/perspective-viewer/dist/css/material-dense.css"
    />
    <link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/css/material-dense.css" />

    <script>
    const WORKER = perspective.worker();
    const REQ = fetch(
    "https://api.covidtracking.com/v1/states/daily.csv"
    );
    <script type="module">
    import {worker} from "https://unpkg.com/@finos/perspective/dist/cdn/perspective.js";

    const WORKER = worker();
    const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");

    const LAYOUT = {
    plugin: "Y Area",
    plugin_config: {
    legend: {
    height: "106px",
    left: "100px",
    top: "25px",
    width: "",
    },
    "plugin": "Y Area",
    "plugin_config": {
    "legend": {
    "height": "106px",
    "left": "100px",
    "top": "25px",
    "width": ""
    }
    },
    settings: true,
    row_pivots: ['Parsed "date" bucket by week'],
    column_pivots: ["state"],
    columns: ["deathIncrease"],
    filter: [],
    sort: [["deathIncrease", "col desc"]],
    expressions: [
    '// Parsed "date" bucket by week\nvar year := integer(floor("date" / 10000));\nvar month := integer(floor("date" / 100)) - year * 100;\nvar day := integer("date" % 100);\nbucket(date(year, month, day), \'W\')',
    "settings": true,
    "row_pivots": [
    "Parsed \"date\" bucket by week"
    ],
    "column_pivots": [
    "state"
    ],
    aggregates: {},
    "columns": [
    "deathIncrease"
    ],
    "filter": [],
    "sort": [
    [
    "deathIncrease",
    "col desc"
    ]
    ],
    "expressions": [
    "// Parsed \"date\" bucket by week\nvar year := integer(floor(\"date\" / 10000));\nvar month := integer(floor(\"date\" / 100)) - year * 100;\nvar day := integer(\"date\" % 100);\nbucket(date(year, month, day), 'W')"
    ],
    "aggregates": {}
    };

    async function load() {
    const resp = await REQ;
    const csv = await resp.text();
    const el =
    document.getElementsByTagName("perspective-viewer")[0];
    const el = document.getElementsByTagName("perspective-viewer")[0];
    const table = WORKER.table(csv);
    el.load(table);
    el.restore(LAYOUT);
    el.restore(LAYOUT)
    el.toggleConfig();
    }

    window.addEventListener("DOMContentLoaded", load);

    </script>

    <style>
  4. texodus revised this gist Nov 20, 2021. 1 changed file with 48 additions and 43 deletions.
    91 changes: 48 additions & 43 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,69 +10,74 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <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/webfontloader"></script>
    <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</script>

    <script type="module" src="https://unpkg.com/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
    <script>
    WebFont.load({
    google: {
    families: [
    "Roboto Mono:200,400",
    "Material Icons",
    "Open Sans:300,400",
    ],
    },
    });
    </script>

    <link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/css/material-dense.css" />
    <script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.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 type="module">
    import {worker} from "https://unpkg.com/@finos/perspective/dist/cdn/perspective.js";
    <link
    rel="stylesheet"
    href="https://unpkg.com/@finos/perspective-viewer/dist/css/material-dense.css"
    />

    const WORKER = worker();
    const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");
    <script>
    const WORKER = perspective.worker();
    const REQ = fetch(
    "https://api.covidtracking.com/v1/states/daily.csv"
    );

    const LAYOUT = {
    "plugin": "Y Area",
    "plugin_config": {
    "legend": {
    "height": "106px",
    "left": "100px",
    "top": "25px",
    "width": ""
    }
    plugin: "Y Area",
    plugin_config: {
    legend: {
    height: "106px",
    left: "100px",
    top: "25px",
    width: "",
    },
    },
    "settings": true,
    "row_pivots": [
    "Parsed \"date\" bucket by week"
    ],
    "column_pivots": [
    "state"
    settings: true,
    row_pivots: ['Parsed "date" bucket by week'],
    column_pivots: ["state"],
    columns: ["deathIncrease"],
    filter: [],
    sort: [["deathIncrease", "col desc"]],
    expressions: [
    '// Parsed "date" bucket by week\nvar year := integer(floor("date" / 10000));\nvar month := integer(floor("date" / 100)) - year * 100;\nvar day := integer("date" % 100);\nbucket(date(year, month, day), \'W\')',
    ],
    "columns": [
    "deathIncrease"
    ],
    "filter": [],
    "sort": [
    [
    "deathIncrease",
    "col desc"
    ]
    ],
    "expressions": [
    "// Parsed \"date\" bucket by week\nvar year := integer(floor(\"date\" / 10000));\nvar month := integer(floor(\"date\" / 100)) - year * 100;\nvar day := integer(\"date\" % 100);\nbucket(date(year, month, day), 'W')"
    ],
    "aggregates": {}
    aggregates: {},
    };

    async function load() {
    const resp = await REQ;
    const csv = await resp.text();
    const el = document.getElementsByTagName("perspective-viewer")[0];
    const el =
    document.getElementsByTagName("perspective-viewer")[0];
    const table = WORKER.table(csv);
    el.load(table);
    el.restore(LAYOUT)
    el.restore(LAYOUT);
    el.toggleConfig();
    }

    window.addEventListener("DOMContentLoaded", load);

    </script>

    <style>
  5. texodus revised this gist Nov 20, 2021. 2 changed files with 18 additions and 7 deletions.
    10 changes: 10 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,11 @@
    Demo of [Perspective](https://github.com/finos/perspective), using US COVID data from [https://covidtracking.com](https://covidtracking.com/).

    The `Group By` column is a good example of using Perspective's ExprTK column language to clean/reformat a column. THe raw "date" column, as imported from [https://covidtracking.com](https://covidtracking.com/), use the date format `YYYYMMDD`. Using this expression, we can parse this format into a well-typed `date()` column, then bucket this by week to get a sensible graph:

    ```
    // Parsed \"date\" bucket by week
    var year := integer(floor(\"date\" / 10000));
    var month := integer(floor(\"date\" / 100)) - year * 100;
    var day := integer(\"date\" % 100);
    bucket(date(year, month, day), 'W')
    ```
    15 changes: 8 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,16 +15,17 @@
    <script src="https://cdn.jsdelivr.net/npm/webfontloader"></script>
    <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</script>

    <script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.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 type="module" src="https://unpkg.com/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://unpkg.com/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material-dense.css" />
    <link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/css/material-dense.css" />

    <script>
    <script type="module">
    import {worker} from "https://unpkg.com/@finos/perspective/dist/cdn/perspective.js";

    const WORKER = perspective.worker();
    const WORKER = worker();
    const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");

    const LAYOUT = {
  6. texodus revised this gist Nov 19, 2021. 5 changed files with 93 additions and 1 deletion.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: apache-2.0
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Demo of [Perspective](https://github.com/finos/perspective), using US COVID data from [https://covidtracking.com](https://covidtracking.com/).
    92 changes: 91 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,91 @@
    wip
    <!--
    Copyright (c) 2017, the Perspective Authors.
    This file is part of the Perspective library, distributed under the terms of
    the Apache License 2.0. The full license can be found in the LICENSE file.
    -->

    <!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/webfontloader"></script>
    <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</script>

    <script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.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>

    <link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material-dense.css" />

    <script>

    const WORKER = perspective.worker();
    const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");

    const LAYOUT = {
    "plugin": "Y Area",
    "plugin_config": {
    "legend": {
    "height": "106px",
    "left": "100px",
    "top": "25px",
    "width": ""
    }
    },
    "settings": true,
    "row_pivots": [
    "Parsed \"date\" bucket by week"
    ],
    "column_pivots": [
    "state"
    ],
    "columns": [
    "deathIncrease"
    ],
    "filter": [],
    "sort": [
    [
    "deathIncrease",
    "col desc"
    ]
    ],
    "expressions": [
    "// Parsed \"date\" bucket by week\nvar year := integer(floor(\"date\" / 10000));\nvar month := integer(floor(\"date\" / 100)) - year * 100;\nvar day := integer(\"date\" % 100);\nbucket(date(year, month, day), 'W')"
    ],
    "aggregates": {}
    };

    async function load() {
    const resp = await REQ;
    const csv = await resp.text();
    const el = document.getElementsByTagName("perspective-viewer")[0];
    const table = WORKER.table(csv);
    el.load(table);
    el.restore(LAYOUT)
    el.toggleConfig();
    }

    window.addEventListener("DOMContentLoaded", load);

    </script>

    <style>
    perspective-viewer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }
    </style>
    </head>

    <body>
    <perspective-viewer editable> </perspective-viewer>
    </body>
    </html>
    Binary file added preview.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  7. texodus created this gist Nov 19, 2021.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    wip