Skip to content

Instantly share code, notes, and snippets.

@ix4
Forked from sc1f/.block
Created April 7, 2020 00:39

Revisions

  1. @sc1f sc1f revised this gist Apr 4, 2020. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -181,7 +181,13 @@
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    ],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    }
    },
    CountyScatterWidget: {
    plugin: "d3_xy_scatter",
  2. @sc1f sc1f revised this gist Apr 4, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@
    <html>

    <head>
    <title>COVID-19 Perspective Workspace</title>
    <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

  3. @sc1f sc1f revised this gist Apr 3, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -72,7 +72,7 @@
    window.workspace.addTable("county", county_data(websocket));

    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 150000;
    line_config.max_cells = 200000;
    line_config.max_columns = 7500;

    await window.workspace.restore({
  4. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -72,11 +72,11 @@
    window.workspace.addTable("county", county_data(websocket));

    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 100000;
    line_config.max_columns = 5000;
    line_config.max_cells = 150000;
    line_config.max_columns = 7500;

    await window.workspace.restore({
    sizes: [0.2, 0.8],
    sizes: [0.23643658663883088, 0.7635634133611691],
    detail: {
    main: {
    type: "split-area",
  5. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -201,9 +201,6 @@
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    "filters": [
    ["New Cases", ">", 100]
    ]
    },
    CountyPopulationWidget: {
  6. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -180,9 +180,6 @@
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    "filters": [
    ["New Cases", ">", 100]
    ]
    },
    CountyScatterWidget: {
  7. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -76,7 +76,7 @@
    line_config.max_columns = 5000;

    await window.workspace.restore({
    sizes: [0.25, 0.75],
    sizes: [0.2, 0.8],
    detail: {
    main: {
    type: "split-area",
  8. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -223,7 +223,7 @@
    "Civilian Labor Force (2018 Estimate)",
    "Median Household Income (2018 Estimate)",
    ],
    sort: [["Cases % Population", "desc"]],
    sort: [["Population (2018 Estimate)", "desc"]],
    aggregates: {
    "Cases % Population": "avg",
    "Date": "dominant",
  9. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -76,7 +76,7 @@
    line_config.max_columns = 5000;

    await window.workspace.restore({
    sizes: [0.2527379949452401, 0.7472620050547599],
    sizes: [0.25, 0.75],
    detail: {
    main: {
    type: "split-area",
  10. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 33 additions and 95 deletions.
    128 changes: 33 additions & 95 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -36,8 +36,8 @@
    <perspective-workspace id="workspace"></perspective-workspace>

    <script>
    const worker = perspective.shared_worker();
    const state_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    @@ -51,7 +51,6 @@
    };

    const county_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    @@ -68,60 +67,44 @@
    const websocket = perspective.websocket(
    "wss://perspective-covid.herokuapp.com/ws"
    );
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket);
    window.workspace.tables.set("state", state_datasource);
    window.workspace.tables.set("county", county_datasource);

    window.workspace.addTable("state", state_data(websocket));
    window.workspace.addTable("county", county_data(websocket));

    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 100000;
    line_config.max_columns = 5000;

    await window.workspace.restore({
    sizes: [0.25, 0.75],
    sizes: [0.2527379949452401, 0.7472620050547599],
    detail: {
    main: {
    type: "split-area",
    orientation: "vertical",
    children: [{
    type: "split-area",
    orientation: "horizontal",
    children: [{
    type: "tab-area",
    widgets: [
    "StateConfirmedWidget",
    "StatePopulationWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["StateDeathsWidget"],
    currentIndex: 0
    }
    orientation: "horizontal",
    children: [
    {
    type: "tab-area",
    widgets: [
    "CountyCasesWidget"
    ],
    sizes: [0.5, 0.5]
    currentIndex: 0
    },
    {
    type: "split-area",
    orientation: "horizontal",
    orientation: "vertical",
    children: [{
    type: "tab-area",
    widgets: [
    "CountyScatterWidget"
    ],
    currentIndex: 1
    widgets: ["CountyScatterWidget"],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: [
    "CountyPopulationWidget"
    ],
    widgets: ["CountyPopulationWidget"],
    currentIndex: 0
    }
    ],
    sizes: [0.5, 0.5]
    }
    },
    ],
    sizes: [0.5, 0.5]
    }
    @@ -177,74 +160,29 @@
    Date: "dominant"
    }
    },
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
    table: "state",
    CountyCasesWidget: {
    plugin: "d3_y_line",
    name: "Cases since March 1st",
    table: "county",
    columns: ["Cumulative Cases"],
    "row-pivots": ["Date"],
    "column-pivots": ["State Name"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    sort: [
    ["Cumulative Cases", "desc"]
    ],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    aggregates: {
    "Date": "dominant"
    }
    },
    StateDeathsWidget: {
    name: "Cases & Deaths since March 1st (by state)",
    table: "state",
    columns: [
    "New Cases",
    "New Deaths",
    "Population (2019 Estimate)"
    ],
    "row-pivots": ["State Name"],
    filters: [
    ["Date", ">", "03/01/2020"],
    ["New Cases", ">", 500]
    ],
    sort: [
    ["Cumulative Cases", "desc"]
    ],
    "column-pivots": ["Location"],
    aggregates: {
    "Date": "dominant",
    "New Cases": "sum",
    "New Deaths": "sum",
    "Cumulative Cases": "high",
    "Cumulative Cases": "high",
    "Population (2019 Estimate)": "high"
    },
    plugin: "d3_treemap"
    },
    StatePopulationWidget: {
    name: "Cases as % of State Population",
    table: "state",
    plugin: "datagrid",
    columns: [
    "Cases % Population",
    "New Cases",
    "Population (2019 Estimate)"
    ],
    aggregates: {
    "Date": "dominant",
    "New Cases": "sum",
    "Cases % Population": "sum",
    "Population (2019 Estimate)": "high"
    "Cumulative Deaths": "high",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    },
    sort: [["Population (2019 Estimate)", "desc"]],
    "row-pivots": ["State Name"],
    "computed-columns": [
    "'New Cases' % 'Population (2019 Estimate)' as 'Cases % Population'"
    'concat_comma("County", "State") as "Location"'
    ],
    "filters": [
    ["New Cases", ">", 100]
    ]
    },
    CountyScatterWidget: {
  11. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -210,7 +210,8 @@
    ],
    "row-pivots": ["State Name"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ["Date", ">", "03/01/2020"],
    ["New Cases", ">", 500]
    ],
    sort: [
    ["Cumulative Cases", "desc"]
    @@ -265,6 +266,9 @@
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    "filters": [
    ["New Cases", ">", 100]
    ]
    },
    CountyPopulationWidget: {
  12. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 24 deletions.
    25 changes: 1 addition & 24 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -115,8 +115,7 @@
    {
    type: "tab-area",
    widgets: [
    "CountyPopulationWidget",
    "CountyDeathsWidget"
    "CountyPopulationWidget"
    ],
    currentIndex: 0
    }
    @@ -247,28 +246,6 @@
    "'New Cases' % 'Population (2019 Estimate)' as 'Cases % Population'"
    ]
    },
    CountyDeathsWidget: {
    name: "Deaths since March 1st (by county)",
    table: "county",
    columns: ["New Deaths"],
    "row-pivots": ["Location"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    plugin: "d3_y_scatter",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    aggregates: {
    "Date": "dominant",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    }
    },
    CountyScatterWidget: {
    plugin: "d3_xy_scatter",
    name: "Cases & Deaths Scatter Plot (by county)",
  13. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 0 additions and 34 deletions.
    34 changes: 0 additions & 34 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -108,7 +108,6 @@
    children: [{
    type: "tab-area",
    widgets: [
    "CountyConfirmedWidget",
    "CountyScatterWidget"
    ],
    currentIndex: 1
    @@ -248,39 +247,6 @@
    "'New Cases' % 'Population (2019 Estimate)' as 'Cases % Population'"
    ]
    },
    CountyConfirmedWidget: {
    name: "Cases since March 1st (by county)",
    table: "county",
    columns: ["Cumulative Cases"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    plugin: "d3_y_line",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'Cumulative Deaths' % 'Cumulative Cases'"
    ],
    aggregates: {
    "Date": "dominant",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    },
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    },
    CountyDeathsWidget: {
    name: "Deaths since March 1st (by county)",
    table: "county",
  14. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -66,7 +66,7 @@

    window.addEventListener("load", async () => {
    const websocket = perspective.websocket(
    "wss://https://perspective-covid.herokuapp.com/ws"
    "wss://perspective-covid.herokuapp.com/ws"
    );
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket);
  15. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 368 additions and 285 deletions.
    653 changes: 368 additions & 285 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,311 +1,394 @@
    <!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://perspective-covid.herokuapp.com/static/perspective-workspace/umd/perspective-workspace.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-datagrid/umd/perspective-viewer-datagrid.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-d3fc/umd/perspective-viewer-d3fc.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective/umd/perspective.js"></script>
    <link
    rel="stylesheet"
    href="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/material.css"
    />
    <head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <style>
    body {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    </style>
    </head>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/perspective-workspace.js">
    </script>
    <script
    src="https://perspective-covid.herokuapp.com/static/perspective-viewer-datagrid/umd/perspective-viewer-datagrid.js">
    </script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-d3fc/umd/perspective-viewer-d3fc.js">
    </script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective/umd/perspective.js"></script>
    <link rel="stylesheet"
    href="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/material.css" />

    <body>
    <perspective-workspace id="workspace"></perspective-workspace>
    <style>
    body {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    </style>
    </head>

    <script>
    const state_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view("state_data_source");
    <body>
    <perspective-workspace id="workspace"></perspective-workspace>

    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };
    <script>
    const state_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view("state_data_source");

    const county_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view("county_data_source");
    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };

    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };
    const county_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view("county_data_source");

    window.addEventListener("load", async () => {
    const websocket = perspective.websocket(
    "wss://perspective-covid.herokuapp.com/ws"
    );
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket);
    window.workspace.tables.set("state", state_datasource);
    window.workspace.tables.set("county", county_datasource);
    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };

    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 100000;
    line_config.max_columns = 5000;
    window.addEventListener("load", async () => {
    const websocket = perspective.websocket(
    "wss://https://perspective-covid.herokuapp.com/ws"
    );
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket);
    window.workspace.tables.set("state", state_datasource);
    window.workspace.tables.set("county", county_datasource);

    await window.workspace.restore({
    sizes: [0.25, 0.75],
    detail: {
    main: {
    type: "split-area",
    orientation: "vertical",
    children: [
    {
    type: "split-area",
    orientation: "horizontal",
    children: [
    {
    type: "tab-area",
    widgets: [
    "StateConfirmedWidget",
    "StatePopulationWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["StateDeathsWidget"],
    currentIndex: 0
    }
    ],
    sizes: [0.5, 0.5]
    },
    {
    type: "split-area",
    orientation: "horizontal",
    children: [
    {
    type: "tab-area",
    widgets: [
    "CountyConfirmedWidget",
    "CountyGridWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["CountyDeathsWidget"],
    currentIndex: 0
    }
    ],
    sizes: [0.5, 0.5]
    }
    ],
    sizes: [0.6, 0.4]
    }
    },
    master: {
    widgets: ["MasterStateWidget", "MasterDateWidget"]
    },
    mode: "globalFilters",
    viewers: {
    MasterStateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by State",
    table: "state",
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    columns: [
    "Fatality Rate (%)",
    "Confirmed",
    "Deaths"
    ],
    "row-pivots": ["State Name"],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg"
    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 100000;
    line_config.max_columns = 5000;

    await window.workspace.restore({
    sizes: [0.25, 0.75],
    detail: {
    main: {
    type: "split-area",
    orientation: "vertical",
    children: [{
    type: "split-area",
    orientation: "horizontal",
    children: [{
    type: "tab-area",
    widgets: [
    "StateConfirmedWidget",
    "StatePopulationWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["StateDeathsWidget"],
    currentIndex: 0
    }
    ],
    sizes: [0.5, 0.5]
    },
    sort: [["Confirmed", "desc"]]
    },
    MasterDateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by Date",
    table: "state",
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    columns: [
    "Fatality Rate (%)",
    "Confirmed",
    "Deaths"
    ],
    sort: [["Date", "desc"]],
    "row-pivots": ["Date"],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg",
    Date: "dominant"
    {
    type: "split-area",
    orientation: "horizontal",
    children: [{
    type: "tab-area",
    widgets: [
    "CountyConfirmedWidget",
    "CountyScatterWidget"
    ],
    currentIndex: 1
    },
    {
    type: "tab-area",
    widgets: [
    "CountyPopulationWidget",
    "CountyDeathsWidget"
    ],
    currentIndex: 0
    }
    ],
    sizes: [0.5, 0.5]
    }
    ],
    sizes: [0.5, 0.5]
    }
    },
    master: {
    widgets: ["MasterStateWidget", "MasterDateWidget"]
    },
    mode: "globalFilters",
    viewers: {
    MasterStateWidget: {
    plugin: "datagrid",
    name: "Cases & Deaths by State",
    table: "state",
    "computed-columns": [
    "'New Deaths' % 'New Cases' as 'Fatality Rate (%)'"
    ],
    columns: [
    "Fatality Rate (%)",
    "New Cases",
    "New Deaths"
    ],
    "row-pivots": ["State Name"],
    aggregates: {
    "Cumulative Cases": "high",
    "Cumulative Deaths": "high",
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    },
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
    table: "state",
    columns: ["Confirmed"],
    "row-pivots": ["Date"],
    "column-pivots": ["State Name"],
    filters: [["Date", ">", "03/01/2020"]],
    sort: [["Confirmed", "desc"]],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    sort: [
    ["Cumulative Cases", "desc"]
    ]
    },
    MasterDateWidget: {
    plugin: "datagrid",
    name: "Cases & Deaths by Date",
    table: "state",
    "computed-columns": [
    "'New Deaths' % 'New Cases' as 'Fatality Rate (%)'"
    ],
    columns: [
    "Fatality Rate (%)",
    "New Cases",
    "New Deaths"
    ],
    sort: [
    ["Date", "desc"]
    ],
    "row-pivots": ["Date"],
    aggregates: {
    "Cumulative Cases": "high",
    "Cumulative Deaths": "high",
    "Fatality Rate (%)": "avg",
    Date: "dominant"
    }
    },
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
    table: "state",
    columns: ["Cumulative Cases"],
    "row-pivots": ["Date"],
    "column-pivots": ["State Name"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    sort: [
    ["Cumulative Cases", "desc"]
    ],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    StateDeathsWidget: {
    name: "Cases & Deaths since March 1st (by state)",
    table: "state",
    columns: [
    "Confirmed",
    "Deaths",
    "Population (2019 Estimate)"
    ],
    "row-pivots": ["State Name"],
    filters: [["Date", ">", "03/01/2020"]],
    sort: [["Confirmed", "desc"]],
    aggregates: {
    Confirmed: "high",
    Deaths: "high"
    },
    plugin: "d3_treemap"
    aggregates: {
    "Date": "dominant"
    }
    },
    StateDeathsWidget: {
    name: "Cases & Deaths since March 1st (by state)",
    table: "state",
    columns: [
    "New Cases",
    "New Deaths",
    "Population (2019 Estimate)"
    ],
    "row-pivots": ["State Name"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    sort: [
    ["Cumulative Cases", "desc"]
    ],
    aggregates: {
    "Date": "dominant",
    "New Cases": "sum",
    "New Deaths": "sum",
    "Cumulative Cases": "high",
    "Cumulative Cases": "high",
    "Population (2019 Estimate)": "high"
    },
    StatePopulationWidget: {
    name: "Cases as % of state population",
    table: "state",
    plugin: "datagrid",
    columns: [
    "Cases % Population",
    "Confirmed",
    "Population (2019 Estimate)"
    ],
    aggregates: {
    Confirmed: "high",
    "Cases % Population": "avg",
    "Population (2019 Estimate)": "high"
    },
    "row-pivots": ["State Name"],
    "computed-columns": [
    "'Confirmed' % 'Population (2019 Estimate)' as 'Cases % Population'"
    ]
    plugin: "d3_treemap"
    },
    StatePopulationWidget: {
    name: "Cases as % of State Population",
    table: "state",
    plugin: "datagrid",
    columns: [
    "Cases % Population",
    "New Cases",
    "Population (2019 Estimate)"
    ],
    aggregates: {
    "Date": "dominant",
    "New Cases": "sum",
    "Cases % Population": "sum",
    "Population (2019 Estimate)": "high"
    },
    CountyConfirmedWidget: {
    name: "Cases since March 1st (by county)",
    table: "county",
    columns: ["Confirmed"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    filters: [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_line",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'Deaths' % 'Confirmed'"
    ],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    sort: [["Population (2019 Estimate)", "desc"]],
    "row-pivots": ["State Name"],
    "computed-columns": [
    "'New Cases' % 'Population (2019 Estimate)' as 'Cases % Population'"
    ]
    },
    CountyConfirmedWidget: {
    name: "Cases since March 1st (by county)",
    table: "county",
    columns: ["Cumulative Cases"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    plugin: "d3_y_line",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'Cumulative Deaths' % 'Cumulative Cases'"
    ],
    aggregates: {
    "Date": "dominant",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    },
    CountyDeathsWidget: {
    name: "Deaths since March 1st (by county)",
    table: "county",
    columns: ["Deaths"],
    "row-pivots": ["Location"],
    filters: [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_scatter",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    aggregates: {
    Confirmed: "high",
    "Deaths": "high",
    },
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    CountyGridWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths (by county)",
    table: "county",
    columns: ["Confirmed", "Deaths"],
    "row-pivots": ["Location"],
    sort: [["Confirmed", "desc"]],
    aggregates: {
    Confirmed: "high",
    Deaths: "high"
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    },
    CountyDeathsWidget: {
    name: "Deaths since March 1st (by county)",
    table: "county",
    columns: ["New Deaths"],
    "row-pivots": ["Location"],
    filters: [
    ["Date", ">", "03/01/2020"]
    ],
    plugin: "d3_y_scatter",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    aggregates: {
    "Date": "dominant",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    }
    }
    });
    },
    CountyScatterWidget: {
    plugin: "d3_xy_scatter",
    name: "Cases & Deaths Scatter Plot (by county)",
    table: "county",
    columns: ["New Cases", "New Deaths"],
    "row-pivots": ["Location"],
    aggregates: {
    "Date": "dominant",
    "Cumulative Cases": "high",
    "Cumulative Deaths": "high",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    },
    CountyPopulationWidget: {
    name: "Cases/Deaths with county-level population, income, unemployment data",
    table: "county",
    plugin: "datagrid",
    columns: [
    "Cases % Population",
    "New Cases",
    "New Deaths",
    "Population (2018 Estimate)",
    "Unemployed (2018 Estimate)",
    "Employed (2018 Estimate)",
    "Civilian Labor Force (2018 Estimate)",
    "Median Household Income (2018 Estimate)",
    ],
    sort: [["Cases % Population", "desc"]],
    aggregates: {
    "Cases % Population": "avg",
    "Date": "dominant",
    "Cumulative Cases": "high",
    "Cumulative Deaths": "high",
    "Population (2018 Estimate)": "high",
    "Unemployment Rate % (2018 Estimate)": "high",
    "Unemployed (2018 Estimate)": "high",
    "Employed (2018 Estimate)": "high",
    "Civilian Labor Force (2018 Estimate)": "high",
    "Median Household Income (2018 Estimate)": "high",
    },
    "row-pivots": ["Location"],
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'New Cases' % 'Population (2018 Estimate)' as 'Cases % Population'"
    ]
    },
    }
    });

    // Custom formatting for the datagrid - display percentages with a `%`
    for (const viewer of document
    // Custom formatting for the datagrid - display percentages with a `%`
    for (const viewer of document
    .getElementById("workspace")
    .querySelectorAll("perspective-viewer")) {
    viewer.addEventListener(
    "perspective-datagrid-after-update",
    event => {
    const datagrid = event.detail;
    for (const td of datagrid.get_tds()) {
    const metadata = datagrid.get_meta(td);
    if (
    metadata.column.includes("%") &&
    typeof metadata.value === "number"
    ) {
    const pct = metadata.value
    .toFixed(4)
    .toString();
    td.textContent = pct + "%";
    } else {
    td.style.display = "table-cell";
    }
    viewer.addEventListener(
    "perspective-datagrid-after-update",
    event => {
    const datagrid = event.detail;
    for (const td of datagrid.get_tds()) {
    const metadata = datagrid.get_meta(td);
    if (
    metadata.column.includes("%") &&
    typeof metadata.value === "number"
    ) {
    const pct = metadata.value
    .toFixed(4)
    .toString();
    td.textContent = pct + "%";
    } else if (metadata.column === "Median Household Income (2018 Estimate)") {
    td.textContent = "$" + metadata.value;
    } else {
    td.style.display = "table-cell";
    }
    }
    );
    }
    });
    </script>
    </body>
    </html>
    }
    );
    }
    });
    </script>
    </body>

    </html>
  16. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -257,6 +257,10 @@
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ],
    aggregates: {
    Confirmed: "high",
    "Deaths": "high",
    },
    },
    CountyGridWidget: {
    plugin: "datagrid",
  17. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -173,7 +173,7 @@
    Date: "dominant"
    }
    },
    StateConfirmedWidget {
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
    table: "state",
    columns: ["Confirmed"],
  18. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 18 additions and 15 deletions.
    33 changes: 18 additions & 15 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -32,19 +32,7 @@
    </head>

    <body>
    <perspective-workspace id="workspace">
    <perspective-viewer
    plugin="d3_y_line"
    slot="StateConfirmedWidget"
    name="Fatality Rate (%) since March 1st (by state)"
    table="state"
    columns='["Fatality Rate (%)"]'
    row-pivots='["Date"]'
    filters='[["Date", ">", "03/01/2020"]]'
    column-pivots='["State Name"]'
    plugin_config='{legend: {left: "80px", top: "15px"}'
    ></perspective-viewer>
    </perspective-workspace>
    <perspective-workspace id="workspace"></perspective-workspace>

    <script>
    const state_data = async websocket => {
    @@ -185,6 +173,22 @@
    Date: "dominant"
    }
    },
    StateConfirmedWidget {
    name: "Cases since March 1st (by state)",
    table: "state",
    columns: ["Confirmed"],
    "row-pivots": ["Date"],
    "column-pivots": ["State Name"],
    filters: [["Date", ">", "03/01/2020"]],
    sort: [["Confirmed", "desc"]],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    },
    StateDeathsWidget: {
    name: "Cases & Deaths since March 1st (by state)",
    table: "state",
    @@ -198,8 +202,7 @@
    sort: [["Confirmed", "desc"]],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg"
    Deaths: "high"
    },
    plugin: "d3_treemap"
    },
  19. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -248,7 +248,7 @@
    name: "Deaths since March 1st (by county)",
    table: "county",
    columns: ["Deaths"],
    "row-pivots": ["Date"],
    "row-pivots": ["Location"],
    filters: [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_scatter",
    "computed-columns": [
  20. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 3 additions and 14 deletions.
    17 changes: 3 additions & 14 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -136,7 +136,7 @@
    sizes: [0.5, 0.5]
    }
    ],
    sizes: [0.5, 0.5]
    sizes: [0.6, 0.4]
    }
    },
    master: {
    @@ -249,22 +249,11 @@
    table: "county",
    columns: ["Deaths"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    filters: [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_line",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'Deaths' % 'Confirmed'"
    ],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    plugin: "d3_y_scatter",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    ],
    },
    CountyGridWidget: {
    plugin: "datagrid",
  21. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 19 additions and 30 deletions.
    49 changes: 19 additions & 30 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,19 @@
    </head>

    <body>
    <perspective-workspace id="workspace"></perspective-workspace>
    <perspective-workspace id="workspace">
    <perspective-viewer
    plugin="d3_y_line"
    slot="StateConfirmedWidget"
    name="Fatality Rate (%) since March 1st (by state)"
    table="state"
    columns='["Fatality Rate (%)"]'
    row-pivots='["Date"]'
    filters='[["Date", ">", "03/01/2020"]]'
    column-pivots='["State Name"]'
    plugin_config='{legend: {left: "80px", top: "15px"}'
    ></perspective-viewer>
    </perspective-workspace>

    <script>
    const state_data = async websocket => {
    @@ -91,15 +103,13 @@
    type: "tab-area",
    widgets: [
    "StateConfirmedWidget",
    "StatePopulationWidget",
    "StatePopulationWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: [
    "StateDeathsWidget"
    ],
    widgets: ["StateDeathsWidget"],
    currentIndex: 0
    }
    ],
    @@ -113,15 +123,13 @@
    type: "tab-area",
    widgets: [
    "CountyConfirmedWidget",
    "CountyGridWidget",
    "CountyGridWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: [
    "CountyDeathsWidget"
    ],
    widgets: ["CountyDeathsWidget"],
    currentIndex: 0
    }
    ],
    @@ -174,26 +182,7 @@
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    }
    },
    StateConfirmedWidget: {
    name:
    "Fatality Rate (%) since March 1st (by state)",
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    table: "state",
    columns: ["Fatality Rate (%)"],
    "row-pivots": ["Date"],
    filters: [["Date", ">", "03/01/2020"]],
    "column-pivots": ["State Name"],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    Date: "dominant"
    }
    },
    StateDeathsWidget: {
    @@ -323,4 +312,4 @@
    });
    </script>
    </body>
    </html>
    </html>
  22. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 25 additions and 10 deletions.
    35 changes: 25 additions & 10 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -84,13 +84,26 @@
    orientation: "vertical",
    children: [
    {
    type: "tab-area",
    widgets: [
    "StateConfirmedWidget",
    "StateDeathsWidget",
    "StatePopulationWidget"
    type: "split-area",
    orientation: "horizontal",
    children: [
    {
    type: "tab-area",
    widgets: [
    "StateConfirmedWidget",
    "StatePopulationWidget",
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: [
    "StateDeathsWidget"
    ],
    currentIndex: 0
    }
    ],
    currentIndex: 0
    sizes: [0.5, 0.5]
    },
    {
    type: "split-area",
    @@ -155,24 +168,26 @@
    "Confirmed",
    "Deaths"
    ],
    sort: [["Date", "desc"]],
    "row-pivots": ["Date"],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg"
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    }
    },
    StateConfirmedWidget: {
    name:
    "Fatality Rate (%) since March 1st (by state)",
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    table: "state",
    columns: ["Fatality Rate (%)"],
    "row-pivots": ["Date"],
    filters: [["Date", ">", "03/01/2020"]],
    "column-pivots": ["State Name"],
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
  23. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 281 additions and 244 deletions.
    525 changes: 281 additions & 244 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,274 +1,311 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />

    <head>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/perspective-workspace.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-datagrid/umd/perspective-viewer-datagrid.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-d3fc/umd/perspective-viewer-d3fc.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective/umd/perspective.js"></script>
    <link
    rel="stylesheet"
    href="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/material.css"
    />

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script src="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/perspective-workspace.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-datagrid/umd/perspective-viewer-datagrid.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective-viewer-d3fc/umd/perspective-viewer-d3fc.js"></script>
    <script src="https://perspective-covid.herokuapp.com/static/perspective/umd/perspective.js"></script>
    <link rel='stylesheet' href="https://perspective-covid.herokuapp.com/static/perspective-workspace/umd/material.css">

    <style>

    body {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    </style>
    </head>

    <body>

    <perspective-workspace id="workspace"></perspective-workspace>

    <script>
    const state_data = async (websocket) => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view('state_data_source');

    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };
    <style>
    body {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    </style>
    </head>

    const county_data = async (websocket) => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view('county_data_source');
    <body>
    <perspective-workspace id="workspace"></perspective-workspace>

    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };
    <script>
    const state_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view("state_data_source");

    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };

    window.addEventListener("load", async () => {
    const websocket = perspective.websocket("wss://perspective-covid.herokuapp.com/ws");
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket)
    window.workspace.tables.set("state", state_datasource);
    window.workspace.tables.set("county", county_datasource);
    const county_data = async websocket => {
    const worker = perspective.worker();
    // Get a proxy for a view named "state_data_source", registered on
    // the server with a reciprocal call to `host_view()`.
    // No data is transferred, `view` is a virtual handle for data on
    // the server.
    const view = websocket.open_view("county_data_source");

    // const scatter_config = window.getPlugin("d3_xy_scatter");
    // scatter_config.max_columns = 500;
    // Create a `table` from this, owned by the local WebWorker.
    // Data is transferred from `view` to the local WebWorker, both
    // the current state and all future updates, as Arrows.
    return worker.table(view);
    };

    // const area_config = window.getPlugin("d3_y_area");
    // area_config.max_columns = 500;
    // area_config.max_cells = 100000;
    window.addEventListener("load", async () => {
    const websocket = perspective.websocket(
    "wss://perspective-covid.herokuapp.com/ws"
    );
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket);
    window.workspace.tables.set("state", state_datasource);
    window.workspace.tables.set("county", county_datasource);

    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 100000;
    line_config.max_columns = 5000;
    const line_config = window.getPlugin("d3_y_line");
    line_config.max_cells = 100000;
    line_config.max_columns = 5000;

    await window.workspace.restore({
    sizes: [0.25, 0.75],
    detail: {
    main: {
    type: "split-area",
    orientation: "vertical",
    children: [
    {
    await window.workspace.restore({
    sizes: [0.25, 0.75],
    detail: {
    main: {
    type: "split-area",
    orientation: "horizontal",
    orientation: "vertical",
    children: [
    {
    type: "tab-area",
    widgets: ["StateConfirmedWidget", "StatePopulationWidget"],
    widgets: [
    "StateConfirmedWidget",
    "StateDeathsWidget",
    "StatePopulationWidget"
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["StateDeathsWidget"],
    currentIndex: 0
    type: "split-area",
    orientation: "horizontal",
    children: [
    {
    type: "tab-area",
    widgets: [
    "CountyConfirmedWidget",
    "CountyGridWidget",
    ],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: [
    "CountyDeathsWidget"
    ],
    currentIndex: 0
    }
    ],
    sizes: [0.5, 0.5]
    }
    ],
    sizes: [0.5, 0.5]
    },
    {
    type: "split-area",
    orientation: "horizontal",
    children: [
    {
    type: "tab-area",
    widgets: ["CountyGridWidget"],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["CountyConfirmedWidget"],
    currentIndex: 0
    },
    {
    type: "tab-area",
    widgets: ["CountyDeathsWidget"],
    currentIndex: 0
    }
    ],
    sizes: [0.33, 0.33, 0.33]
    }
    ],
    sizes: [0.5, 0.5]
    }
    },
    master: {
    widgets: ["MasterStateWidget", "MasterDateWidget"]
    },
    mode: "globalFilters",
    viewers: {
    MasterStateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by State",
    table: "state",
    "computed-columns": ["'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"],
    columns: ["Fatality Rate (%)", "Confirmed", "Deaths"],
    "row-pivots": ["State Name"],
    aggregates: {
    "Confirmed": "high",
    "Deaths": "high",
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    },
    sort: [["Confirmed", "desc"]],
    },
    MasterDateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by Date",
    table: "state",
    "computed-columns": ["'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"],
    columns: ["Fatality Rate (%)", "Confirmed", "Deaths"],
    "row-pivots": ["Date"],
    aggregates: {
    "Confirmed": "high",
    "Deaths": "high",
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    },
    sort: [["Date", "desc"]],
    },
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
    table: "state",
    columns: ["Confirmed"],
    "row-pivots": ["Date"],
    "filters": [["Date", ">", "03/01/2020"]],
    "column-pivots": ["State Name"],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    },
    StateDeathsWidget: {
    name: "Confirmed & Deaths since March 1st (by state)",
    table: "state",
    columns: ["Confirmed", "Deaths", "Population (2019 Estimate)"],
    "row-pivots": ["State Name"],
    "filters": [["Date", ">", "03/01/2020"]],
    plugin: "d3_treemap"
    },
    StatePopulationWidget: {
    name: "Cases as % of state population",
    table: "state",
    plugin: "datagrid",
    columns: ["Cases % Population", "Confirmed", "Population (2019 Estimate)"],
    aggregates: {
    "Confirmed": "high",
    "Cases % Population": "avg",
    "Population (2019 Estimate)": "high"
    master: {
    widgets: ["MasterStateWidget", "MasterDateWidget"]
    },
    "row-pivots": ["State Name"],
    "computed-columns": ["'Confirmed' % 'Population (2019 Estimate)' as 'Cases % Population'"]
    },
    CountyConfirmedWidget: {
    name: "Cases since March 1st (by county)",
    table: "county",
    columns: ["Confirmed"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    "filters": [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_line",
    "computed-columns": ['concat_comma("County", "State") as "Location"', "'Deaths' % 'Confirmed'"],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    "computed-columns": ['concat_comma("County", "State") as "Location"'],
    },
    CountyDeathsWidget: {
    name: "Deaths since March 1st (by county)",
    table: "county",
    columns: ["Deaths"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    "filters": [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_line",
    "computed-columns": ['concat_comma("County", "State") as "Location"', "'Deaths' % 'Confirmed'"],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    mode: "globalFilters",
    viewers: {
    MasterStateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by State",
    table: "state",
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    columns: [
    "Fatality Rate (%)",
    "Confirmed",
    "Deaths"
    ],
    "row-pivots": ["State Name"],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg"
    },
    sort: [["Confirmed", "desc"]]
    },
    MasterDateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by Date",
    table: "state",
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    columns: [
    "Fatality Rate (%)",
    "Confirmed",
    "Deaths"
    ],
    "row-pivots": ["Date"],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg"
    }
    },
    StateConfirmedWidget: {
    name:
    "Fatality Rate (%) since March 1st (by state)",
    table: "state",
    columns: ["Fatality Rate (%)"],
    "row-pivots": ["Date"],
    filters: [["Date", ">", "03/01/2020"]],
    "column-pivots": ["State Name"],
    "computed-columns": [
    "'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"
    ],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    }
    },
    StateDeathsWidget: {
    name: "Cases & Deaths since March 1st (by state)",
    table: "state",
    columns: [
    "Confirmed",
    "Deaths",
    "Population (2019 Estimate)"
    ],
    "row-pivots": ["State Name"],
    filters: [["Date", ">", "03/01/2020"]],
    sort: [["Confirmed", "desc"]],
    aggregates: {
    Confirmed: "high",
    Deaths: "high",
    "Fatality Rate (%)": "avg"
    },
    plugin: "d3_treemap"
    },
    StatePopulationWidget: {
    name: "Cases as % of state population",
    table: "state",
    plugin: "datagrid",
    columns: [
    "Cases % Population",
    "Confirmed",
    "Population (2019 Estimate)"
    ],
    aggregates: {
    Confirmed: "high",
    "Cases % Population": "avg",
    "Population (2019 Estimate)": "high"
    },
    "row-pivots": ["State Name"],
    "computed-columns": [
    "'Confirmed' % 'Population (2019 Estimate)' as 'Cases % Population'"
    ]
    },
    CountyConfirmedWidget: {
    name: "Cases since March 1st (by county)",
    table: "county",
    columns: ["Confirmed"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    filters: [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_line",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'Deaths' % 'Confirmed'"
    ],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    },
    CountyDeathsWidget: {
    name: "Deaths since March 1st (by county)",
    table: "county",
    columns: ["Deaths"],
    "row-pivots": ["Date"],
    "column-pivots": ["Location"],
    filters: [["Date", ">", "03/01/2020"]],
    plugin: "d3_y_line",
    "computed-columns": [
    'concat_comma("County", "State") as "Location"',
    "'Deaths' % 'Confirmed'"
    ],
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    },
    CountyGridWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths (by county)",
    table: "county",
    columns: ["Confirmed", "Deaths"],
    "row-pivots": ["Location"],
    sort: [["Confirmed", "desc"]],
    aggregates: {
    Confirmed: "high",
    Deaths: "high"
    },
    "computed-columns": [
    'concat_comma("County", "State") as "Location"'
    ]
    }
    },
    "computed-columns": ['concat_comma("County", "State") as "Location"'],
    },
    CountyGridWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths (by county)",
    table: "county",
    columns: ["Confirmed", "Deaths"],
    "row-pivots": ["Location"],
    sort: [["Confirmed", "desc"]],
    aggregates: {
    "Confirmed": "high",
    "Deaths": "high"
    },
    "computed-columns": ['concat_comma("County", "State") as "Location"'],
    },
    }
    });

    // Custom formatting for the datagrid - display percentages with a `%`
    for (const viewer of document.getElementById("workspace").querySelectorAll("perspective-viewer")) {
    viewer.addEventListener("perspective-datagrid-after-update", event => {
    const datagrid = event.detail;
    for (const td of datagrid.get_tds()) {
    const metadata = datagrid.get_meta(td);
    if (metadata.column.includes("%") && typeof metadata.value === "number") {
    const pct = metadata.value.toFixed(4).toString();
    td.textContent = pct + "%";
    } else {
    td.style.display = "table-cell";
    }
    });

    // Custom formatting for the datagrid - display percentages with a `%`
    for (const viewer of document
    .getElementById("workspace")
    .querySelectorAll("perspective-viewer")) {
    viewer.addEventListener(
    "perspective-datagrid-after-update",
    event => {
    const datagrid = event.detail;
    for (const td of datagrid.get_tds()) {
    const metadata = datagrid.get_meta(td);
    if (
    metadata.column.includes("%") &&
    typeof metadata.value === "number"
    ) {
    const pct = metadata.value
    .toFixed(4)
    .toString();
    td.textContent = pct + "%";
    } else {
    td.style.display = "table-cell";
    }
    }
    }
    );
    }
    });
    }
    });
    </script>

    </body>

    </script>
    </body>
    </html>
  24. @sc1f sc1f revised this gist Apr 2, 2020. 1 changed file with 4 additions and 11 deletions.
    15 changes: 4 additions & 11 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -181,19 +181,12 @@
    },
    },
    StateDeathsWidget: {
    name: "Deaths since March 1st (by state)",
    name: "Confirmed & Deaths since March 1st (by state)",
    table: "state",
    columns: ["Deaths"],
    "row-pivots": ["Date"],
    columns: ["Confirmed", "Deaths", "Population (2019 Estimate)"],
    "row-pivots": ["State Name"],
    "filters": [["Date", ">", "03/01/2020"]],
    "column-pivots": ["State Name"],
    plugin: "d3_y_line",
    plugin_config: {
    legend: {
    left: "80px",
    top: "15px"
    }
    },
    plugin: "d3_treemap"
    },
    StatePopulationWidget: {
    name: "Cases as % of state population",
  25. @sc1f sc1f revised this gist Apr 1, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -163,7 +163,7 @@
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    },
    sort: [["Confirmed", "desc"]],
    sort: [["Date", "desc"]],
    },
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
  26. @sc1f sc1f revised this gist Apr 1, 2020. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -145,7 +145,8 @@
    aggregates: {
    "Confirmed": "high",
    "Deaths": "high",
    "Fatality Rate (%)": "avg"
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    },
    sort: [["Confirmed", "desc"]],
    },
    @@ -159,7 +160,8 @@
    aggregates: {
    "Confirmed": "high",
    "Deaths": "high",
    "Fatality Rate (%)": "avg"
    "Fatality Rate (%)": "avg",
    "Date": "dominant"
    },
    sort: [["Confirmed", "desc"]],
    },
  27. @sc1f sc1f revised this gist Apr 1, 2020. 1 changed file with 15 additions and 1 deletion.
    16 changes: 15 additions & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -131,7 +131,7 @@
    }
    },
    master: {
    widgets: ["MasterStateWidget"]
    widgets: ["MasterStateWidget", "MasterDateWidget"]
    },
    mode: "globalFilters",
    viewers: {
    @@ -149,6 +149,20 @@
    },
    sort: [["Confirmed", "desc"]],
    },
    MasterDateWidget: {
    plugin: "datagrid",
    name: "Confirmed & Deaths by Date",
    table: "state",
    "computed-columns": ["'Deaths' % 'Confirmed' as 'Fatality Rate (%)'"],
    columns: ["Fatality Rate (%)", "Confirmed", "Deaths"],
    "row-pivots": ["Date"],
    aggregates: {
    "Confirmed": "high",
    "Deaths": "high",
    "Fatality Rate (%)": "avg"
    },
    sort: [["Confirmed", "desc"]],
    },
    StateConfirmedWidget: {
    name: "Cases since March 1st (by state)",
    table: "state",
  28. @sc1f sc1f revised this gist Mar 31, 2020. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    # COVID-19 Perspective Workspace

    This `perspective-workspace` uses `perspective-python` to host the dataset in a remote server. When you load the page, the datset is serialized to Apache Arrow and streamed to the browser.
  29. @sc1f sc1f revised this gist Mar 31, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -63,7 +63,7 @@


    window.addEventListener("load", async () => {
    const websocket = perspective.websocket("ws://perspective-covid.herokuapp.com/ws");
    const websocket = perspective.websocket("wss://perspective-covid.herokuapp.com/ws");
    const state_datasource = await state_data(websocket);
    const county_datasource = await county_data(websocket)
    window.workspace.tables.set("state", state_datasource);
  30. @sc1f sc1f revised this gist Mar 31, 2020. No changes.