Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/.block

Last active April 28, 2023 19:05
Show Gist options
  • Save texodus/6b4dcebf65db4ebe4fe53a6de5ea0b48 to your computer and use it in GitHub Desktop.
Save texodus/6b4dcebf65db4ebe4fe53a6de5ea0b48 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. texodus revised this gist Mar 14, 2022. 2 changed files with 14 additions and 12 deletions.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@

    <link rel='stylesheet' crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/css/material-dark.css">

    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/cdn/perspective-workspace.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace@latest/dist/cdn/perspective-workspace.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@latest/dist/cdn/perspective.js"></script>
    24 changes: 13 additions & 11 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -41,17 +41,19 @@
    "split_by": null,
    "filter": null,
    "plugin_config": {
    "IMDB Rating": {
    "number_color_mode": "gradient",
    "pos_color": "#b87ff0",
    "neg_color": "#FF9485",
    "gradient": 8.1
    },
    "US Gross": {
    "number_color_mode": "gradient",
    "pos_color": "#126e3a",
    "neg_color": "#FF9485",
    "gradient": 19729862602
    "columns": {
    "IMDB Rating": {
    "number_color_mode": "gradient",
    "pos_color": "#b87ff0",
    "neg_color": "#FF9485",
    "gradient": 8.1
    },
    "US Gross": {
    "number_color_mode": "gradient",
    "pos_color": "#126e3a",
    "neg_color": "#FF9485",
    "gradient": 19729862602
    }
    }
    },
    "master": true,
  2. texodus revised this gist Feb 2, 2022. 2 changed files with 14 additions and 17 deletions.
    15 changes: 6 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,13 @@
    <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>

    <link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/umd/material.dark.css">
    <link rel='stylesheet' crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/css/material-dark.css">

    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/cdn/perspective-workspace.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>
    <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-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@latest/dist/cdn/perspective.js"></script>

    <style>

    @@ -91,7 +88,7 @@

    <script type="module">

    import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js";
    import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js";

    const SCHEMA = {
    "Title": "string",
    16 changes: 8 additions & 8 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -31,14 +31,14 @@
    "PERSPECTIVE_GENERATED_ID_2": {
    "selectable": true,
    "plugin": "Datagrid",
    "row_pivots": ["Distributor"],
    "group_by": ["Distributor"],
    "aggregates": {
    "IMDB Rating": "avg"
    },
    "sort": [["US Gross", "desc"]],
    "columns": ["US Gross"],
    "expressions": null,
    "column_pivots": null,
    "split_by": null,
    "filter": null,
    "plugin_config": {
    "IMDB Rating": {
    @@ -61,7 +61,7 @@
    },
    "PERSPECTIVE_GENERATED_ID_0": {
    "plugin": "X/Y Scatter",
    "row_pivots": ["Title"],
    "group_by": ["Title"],
    "aggregates": {
    "IMDB Rating": "avg",
    "Rotten Tomatoes Rating": "avg",
    @@ -82,7 +82,7 @@
    "selectable": null,

    "expressions": null,
    "column_pivots": null,
    "split_by": null,
    "filter": null,
    "plugin_config": {
    "realValues": [
    @@ -108,12 +108,12 @@
    "PERSPECTIVE_GENERATED_ID_3": {
    "plugin": "Y Area",
    "expressions": ["bucket(\"Release Date\", 'Y')"],
    "row_pivots": ["bucket(\"Release Date\", 'Y')"],
    "group_by": ["bucket(\"Release Date\", 'Y')"],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    },
    "columns": ["US Gross"],
    "column_pivots": ["Major Genre"],
    "split_by": ["Major Genre"],
    "selectable": null,

    "filter": null,
    @@ -133,7 +133,7 @@
    "PERSPECTIVE_GENERATED_ID_1": {
    "plugin": "Y Line",
    "expressions": ["bucket(\"Release Date\", 'Y')"],
    "row_pivots": ["bucket(\"Release Date\", 'Y')"],
    "group_by": ["bucket(\"Release Date\", 'Y')"],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    },
    @@ -145,7 +145,7 @@
    "US DVD Sales"
    ],
    "selectable": null,
    "column_pivots": null,
    "split_by": null,
    "filter": null,
    "sort": null,
    "plugin_config": {
  3. texodus revised this gist Jan 6, 2022. 2 changed files with 8 additions and 8 deletions.
    12 changes: 6 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,12 +5,12 @@
    <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>

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

    <script type="module" src="https://unpkg.com/@finos/perspective-workspace/dist/cdn/perspective-workspace.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://unpkg.com/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/cdn/perspective-workspace.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>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js"></script>

    <style>

    @@ -91,7 +91,7 @@

    <script type="module">

    import perspective from "https://unpkg.com/@finos/perspective/dist/cdn/perspective.js";
    import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js";

    const SCHEMA = {
    "Title": "string",
    4 changes: 2 additions & 2 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -42,13 +42,13 @@
    "filter": null,
    "plugin_config": {
    "IMDB Rating": {
    "color_mode": "gradient",
    "number_color_mode": "gradient",
    "pos_color": "#b87ff0",
    "neg_color": "#FF9485",
    "gradient": 8.1
    },
    "US Gross": {
    "color_mode": "gradient",
    "number_color_mode": "gradient",
    "pos_color": "#126e3a",
    "neg_color": "#FF9485",
    "gradient": 19729862602
  4. texodus revised this gist Nov 23, 2021. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,10 +7,10 @@

    <link rel='stylesheet' href="https://unpkg.com/@finos/perspective-workspace/dist/umd/material.dark.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>
    <script type="module" src="https://unpkg.com/@finos/perspective-workspace/dist/cdn/perspective-workspace.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://unpkg.com/@finos/perspective/dist/cdn/perspective.js"></script>

    <style>

    @@ -89,7 +89,9 @@
    <perspective-viewer table="movies"></perspective-viewer>
    </perspective-workspace>

    <script >
    <script type="module">

    import perspective from "https://unpkg.com/@finos/perspective/dist/cdn/perspective.js";

    const SCHEMA = {
    "Title": "string",
  5. texodus revised this gist Nov 20, 2021. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,10 +7,10 @@

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

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

    @@ -89,7 +89,7 @@
    <perspective-viewer table="movies"></perspective-viewer>
    </perspective-workspace>

    <script>
    <script >

    const SCHEMA = {
    "Title": "string",
    @@ -110,10 +110,10 @@
    "IMDB Votes": "integer"
    };

    const URL = "https://vega.github.io/editor/data/movies.json";
    const MOVIES_URL = "https://vega.github.io/editor/data/movies.json";

    const datasource = async () => {
    const request = fetch(URL);
    const request = fetch(MOVIES_URL);
    const worker = perspective.worker();
    const response = await request;
    const json = await response.json();
  6. texodus revised this gist Oct 12, 2021. 2 changed files with 36 additions and 81 deletions.
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,10 @@
    <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>

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

    <script src="https://unpkg.com/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
    113 changes: 32 additions & 81 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,5 @@
    {
    "sizes": [
    0.350418410041841,
    0.649581589958159
    ],
    "sizes": [0.350418410041841, 0.649581589958159],
    "detail": {
    "main": {
    "type": "split-area",
    @@ -18,65 +15,42 @@
    },
    {
    "type": "tab-area",
    "widgets": [
    "PERSPECTIVE_GENERATED_ID_1"
    ],
    "widgets": ["PERSPECTIVE_GENERATED_ID_1"],
    "currentIndex": 0
    }
    ],
    "sizes": [
    0.5,
    0.5
    ]
    "sizes": [0.5, 0.5]
    }
    },
    "mode": "globalFilters",
    "master": {
    "widgets": [
    "PERSPECTIVE_GENERATED_ID_2"
    ],
    "sizes": [
    1
    ]
    "widgets": ["PERSPECTIVE_GENERATED_ID_2"],
    "sizes": [1]
    },
    "viewers": {
    "PERSPECTIVE_GENERATED_ID_2": {
    "selectable": true,
    "plugin": "Datagrid",
    "row-pivots": [
    "Distributor"
    ],
    "row_pivots": ["Distributor"],
    "aggregates": {
    "IMDB Rating": "avg"
    },
    "sort": [
    [
    "US Gross",
    "desc"
    ]
    ],
    "columns": [
    "US Gross"
    ],
    "editable": null,
    "sort": [["US Gross", "desc"]],
    "columns": ["US Gross"],
    "expressions": null,
    "column-pivots": null,
    "filters": null,
    "column_pivots": null,
    "filter": null,
    "plugin_config": {
    "IMDB Rating": {
    "color_mode": "gradient",
    "pos_color":
    "#b87ff0",
    "neg_color":
    "#FF9485",
    "pos_color": "#b87ff0",
    "neg_color": "#FF9485",
    "gradient": 8.1
    },
    "US Gross": {
    "color_mode": "gradient",
    "pos_color":
    "#126e3a",
    "neg_color":
    "#FF9485",
    "pos_color": "#126e3a",
    "neg_color": "#FF9485",
    "gradient": 19729862602
    }
    },
    @@ -87,21 +61,15 @@
    },
    "PERSPECTIVE_GENERATED_ID_0": {
    "plugin": "X/Y Scatter",
    "row-pivots": [
    "Title"
    ],
    "row_pivots": ["Title"],
    "aggregates": {
    "IMDB Rating": "avg",
    "Rotten Tomatoes Rating": "avg",
    "Director": "last",
    "Release Date": "last",
    "MPAA Rating": "last"
    },
    "sort": [
    [
    "US Gross"
    ]
    ],
    "sort": [["US Gross", "asc"]],
    "columns": [
    "Rotten Tomatoes Rating",
    "IMDB Rating",
    @@ -112,10 +80,10 @@
    "MPAA Rating"
    ],
    "selectable": null,
    "editable": null,

    "expressions": null,
    "column-pivots": null,
    "filters": null,
    "column_pivots": null,
    "filter": null,
    "plugin_config": {
    "realValues": [
    "Rotten Tomatoes Rating",
    @@ -139,29 +107,19 @@
    },
    "PERSPECTIVE_GENERATED_ID_3": {
    "plugin": "Y Area",
    "expressions": [
    "bucket(\"Release Date\", 'Y')"
    ],
    "row-pivots": [
    "bucket(\"Release Date\", 'Y')"
    ],
    "expressions": ["bucket(\"Release Date\", 'Y')"],
    "row_pivots": ["bucket(\"Release Date\", 'Y')"],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    },
    "columns": [
    "US Gross"
    ],
    "column-pivots": [
    "Major Genre"
    ],
    "columns": ["US Gross"],
    "column_pivots": ["Major Genre"],
    "selectable": null,
    "editable": null,
    "filters": null,

    "filter": null,
    "sort": null,
    "plugin_config": {
    "realValues": [
    "US Gross"
    ],
    "realValues": ["US Gross"],
    "legend": {
    "left": "91px",
    "top": "25px"
    @@ -174,12 +132,8 @@
    },
    "PERSPECTIVE_GENERATED_ID_1": {
    "plugin": "Y Line",
    "expressions": [
    "bucket(\"Release Date\", 'Y')"
    ],
    "row-pivots": [
    "bucket(\"Release Date\", 'Y')"
    ],
    "expressions": ["bucket(\"Release Date\", 'Y')"],
    "row_pivots": ["bucket(\"Release Date\", 'Y')"],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    },
    @@ -191,9 +145,8 @@
    "US DVD Sales"
    ],
    "selectable": null,
    "editable": null,
    "column-pivots": null,
    "filters": null,
    "column_pivots": null,
    "filter": null,
    "sort": null,
    "plugin_config": {
    "realValues": [
    @@ -203,9 +156,7 @@
    "Worldwide Gross",
    "US DVD Sales"
    ],
    "splitMainValues": [
    "Rotten Tomatoes Rating"
    ],
    "splitMainValues": ["Rotten Tomatoes Rating"],
    "legend": {
    "left": "79px",
    "top": "174px"
    @@ -217,4 +168,4 @@
    "linked": false
    }
    }
    }
    }
  7. texodus revised this gist Jul 8, 2021. 1 changed file with 4 additions and 20 deletions.
    24 changes: 4 additions & 20 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -65,34 +65,18 @@
    "plugin_config": {
    "IMDB Rating": {
    "color_mode": "gradient",
    "pos_color": [
    "pos_color":
    "#b87ff0",
    184,
    127,
    240
    ],
    "neg_color": [
    "neg_color":
    "#FF9485",
    255,
    148,
    133
    ],
    "gradient": 8.1
    },
    "US Gross": {
    "color_mode": "gradient",
    "pos_color": [
    "pos_color":
    "#126e3a",
    18,
    110,
    58
    ],
    "neg_color": [
    "neg_color":
    "#FF9485",
    255,
    148,
    133
    ],
    "gradient": 19729862602
    }
    },
  8. texodus revised this gist Jul 8, 2021. 2 changed files with 12 additions and 16 deletions.
    4 changes: 0 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -125,12 +125,8 @@
    let req = await fetch("layout.json");
    let layout = await req.json();

    const plugin = window.getPlugin("d3_heatmap");
    plugin.max_cells = 10000;
    plugin.max_columns = 200;
    window.workspace.tables.set("movies", datasource());


    window.workspace.restore(layout);
    });

    24 changes: 12 additions & 12 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@
    "viewers": {
    "PERSPECTIVE_GENERATED_ID_2": {
    "selectable": true,
    "plugin": "datagrid",
    "plugin": "Datagrid",
    "row-pivots": [
    "Distributor"
    ],
    @@ -59,7 +59,7 @@
    "US Gross"
    ],
    "editable": null,
    "computed-columns": null,
    "expressions": null,
    "column-pivots": null,
    "filters": null,
    "plugin_config": {
    @@ -102,7 +102,7 @@
    "linked": false
    },
    "PERSPECTIVE_GENERATED_ID_0": {
    "plugin": "d3_xy_scatter",
    "plugin": "X/Y Scatter",
    "row-pivots": [
    "Title"
    ],
    @@ -129,7 +129,7 @@
    ],
    "selectable": null,
    "editable": null,
    "computed-columns": null,
    "expressions": null,
    "column-pivots": null,
    "filters": null,
    "plugin_config": {
    @@ -154,12 +154,12 @@
    "linked": false
    },
    "PERSPECTIVE_GENERATED_ID_3": {
    "plugin": "d3_y_area",
    "computed-columns": [
    "year_bucket(\"Release Date\")"
    "plugin": "Y Area",
    "expressions": [
    "bucket(\"Release Date\", 'Y')"
    ],
    "row-pivots": [
    "year_bucket(Release Date)"
    "bucket(\"Release Date\", 'Y')"
    ],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    @@ -189,12 +189,12 @@
    "linked": false
    },
    "PERSPECTIVE_GENERATED_ID_1": {
    "plugin": "d3_y_line",
    "computed-columns": [
    "year_bucket(\"Release Date\")"
    "plugin": "Y Line",
    "expressions": [
    "bucket(\"Release Date\", 'Y')"
    ],
    "row-pivots": [
    "year_bucket(Release Date)"
    "bucket(\"Release Date\", 'Y')"
    ],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
  9. texodus revised this gist Apr 26, 2021. 6 changed files with 378 additions and 1 deletion.
    2 changes: 2 additions & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    license: apache-2.0
    height: 800
    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).
    140 changes: 139 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,139 @@
    WIP
    <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.dark.css">

    <script src="https://unpkg.com/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer-datagrid"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></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
    ) !important;

    --d3fc-negative--gradient: linear-gradient(
    #94D0FF,
    #8795E8,
    #966bff,
    #AD8CFF,
    #C774E8,
    #c774a9,
    #FF6AD5,
    #ff6a8b,
    #ff8b8b,
    #ffa58b,
    #ffde8b,
    #cdde8b,
    #8bde8b,
    #20de8b
    ) !important;

    --d3fc-full--gradient: linear-gradient(
    #94D0FF,
    #8795E8,
    #966bff,
    #AD8CFF,
    #C774E8,
    #c774a9,
    #FF6AD5,
    #ff6a8b,
    #ff8b8b,
    #ffa58b,
    #ffde8b,
    #cdde8b,
    #8bde8b,
    #20de8b
    ) !important;
    }

    </style>

    </head>
    <body>

    <perspective-workspace id="workspace">
    <perspective-viewer table="movies"></perspective-viewer>
    </perspective-workspace>

    <script>

    const SCHEMA = {
    "Title": "string",
    "US Gross": "float",
    "Worldwide Gross": "float",
    "US DVD Sales": "float",
    "Production Budget": "float",
    "Release Date": "date",
    "MPAA Rating": "string",
    "Running Time min": "integer",
    "Distributor": "string",
    "Source": "string",
    "Major Genre": "string",
    "Creative Type": "string",
    "Director": "string",
    "Rotten Tomatoes Rating": "integer",
    "IMDB Rating": "float",
    "IMDB Votes": "integer"
    };

    const URL = "https://vega.github.io/editor/data/movies.json";

    const datasource = async () => {
    const request = fetch(URL);
    const worker = perspective.worker();
    const response = await request;
    const json = await response.json();
    for (const row of json) {
    row["Release Date"] = row["Release Date"] ? new Date(row["Release Date"]) || null : null;
    }
    const table = await worker.table(SCHEMA);
    table.update(json);
    return table;
    };

    window.addEventListener("load", async () => {
    let req = await fetch("layout.json");
    let layout = await req.json();

    const plugin = window.getPlugin("d3_heatmap");
    plugin.max_cells = 10000;
    plugin.max_columns = 200;
    window.workspace.tables.set("movies", datasource());


    window.workspace.restore(layout);
    });

    </script>
    </body>
    </html>
    236 changes: 236 additions & 0 deletions layout.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,236 @@
    {
    "sizes": [
    0.350418410041841,
    0.649581589958159
    ],
    "detail": {
    "main": {
    "type": "split-area",
    "orientation": "vertical",
    "children": [
    {
    "type": "tab-area",
    "widgets": [
    "PERSPECTIVE_GENERATED_ID_0",
    "PERSPECTIVE_GENERATED_ID_3"
    ],
    "currentIndex": 0
    },
    {
    "type": "tab-area",
    "widgets": [
    "PERSPECTIVE_GENERATED_ID_1"
    ],
    "currentIndex": 0
    }
    ],
    "sizes": [
    0.5,
    0.5
    ]
    }
    },
    "mode": "globalFilters",
    "master": {
    "widgets": [
    "PERSPECTIVE_GENERATED_ID_2"
    ],
    "sizes": [
    1
    ]
    },
    "viewers": {
    "PERSPECTIVE_GENERATED_ID_2": {
    "selectable": true,
    "plugin": "datagrid",
    "row-pivots": [
    "Distributor"
    ],
    "aggregates": {
    "IMDB Rating": "avg"
    },
    "sort": [
    [
    "US Gross",
    "desc"
    ]
    ],
    "columns": [
    "US Gross"
    ],
    "editable": null,
    "computed-columns": null,
    "column-pivots": null,
    "filters": null,
    "plugin_config": {
    "IMDB Rating": {
    "color_mode": "gradient",
    "pos_color": [
    "#b87ff0",
    184,
    127,
    240
    ],
    "neg_color": [
    "#FF9485",
    255,
    148,
    133
    ],
    "gradient": 8.1
    },
    "US Gross": {
    "color_mode": "gradient",
    "pos_color": [
    "#126e3a",
    18,
    110,
    58
    ],
    "neg_color": [
    "#FF9485",
    255,
    148,
    133
    ],
    "gradient": 19729862602
    }
    },
    "master": true,
    "name": null,
    "table": "movies",
    "linked": false
    },
    "PERSPECTIVE_GENERATED_ID_0": {
    "plugin": "d3_xy_scatter",
    "row-pivots": [
    "Title"
    ],
    "aggregates": {
    "IMDB Rating": "avg",
    "Rotten Tomatoes Rating": "avg",
    "Director": "last",
    "Release Date": "last",
    "MPAA Rating": "last"
    },
    "sort": [
    [
    "US Gross"
    ]
    ],
    "columns": [
    "Rotten Tomatoes Rating",
    "IMDB Rating",
    "US Gross",
    null,
    "Director",
    "Release Date",
    "MPAA Rating"
    ],
    "selectable": null,
    "editable": null,
    "computed-columns": null,
    "column-pivots": null,
    "filters": null,
    "plugin_config": {
    "realValues": [
    "Rotten Tomatoes Rating",
    "IMDB Rating",
    "US Gross",
    null,
    "Director",
    "Release Date",
    "MPAA Rating"
    ],
    "zoom": {
    "k": 1,
    "x": 0,
    "y": 0
    }
    },
    "master": false,
    "name": null,
    "table": "movies",
    "linked": false
    },
    "PERSPECTIVE_GENERATED_ID_3": {
    "plugin": "d3_y_area",
    "computed-columns": [
    "year_bucket(\"Release Date\")"
    ],
    "row-pivots": [
    "year_bucket(Release Date)"
    ],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    },
    "columns": [
    "US Gross"
    ],
    "column-pivots": [
    "Major Genre"
    ],
    "selectable": null,
    "editable": null,
    "filters": null,
    "sort": null,
    "plugin_config": {
    "realValues": [
    "US Gross"
    ],
    "legend": {
    "left": "91px",
    "top": "25px"
    }
    },
    "master": false,
    "name": "US Gross by Genre",
    "table": "movies",
    "linked": false
    },
    "PERSPECTIVE_GENERATED_ID_1": {
    "plugin": "d3_y_line",
    "computed-columns": [
    "year_bucket(\"Release Date\")"
    ],
    "row-pivots": [
    "year_bucket(Release Date)"
    ],
    "aggregates": {
    "Rotten Tomatoes Rating": "avg"
    },
    "columns": [
    "US Gross",
    "Rotten Tomatoes Rating",
    "Production Budget",
    "Worldwide Gross",
    "US DVD Sales"
    ],
    "selectable": null,
    "editable": null,
    "column-pivots": null,
    "filters": null,
    "sort": null,
    "plugin_config": {
    "realValues": [
    "US Gross",
    "Rotten Tomatoes Rating",
    "Production Budget",
    "Worldwide Gross",
    "US DVD Sales"
    ],
    "splitMainValues": [
    "Rotten Tomatoes Rating"
    ],
    "legend": {
    "left": "79px",
    "top": "174px"
    }
    },
    "master": false,
    "name": "Ratings vs Sales",
    "table": "movies",
    "linked": false
    }
    }
    }
    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.
  10. texodus created this gist Apr 26, 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