Skip to content

Instantly share code, notes, and snippets.

@texodus
Last active February 2, 2022 00:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save texodus/e074d7d9e5783e680d35f565d2b4b32e to your computer and use it in GitHub Desktop.
Save texodus/e074d7d9e5783e680d35f565d2b4b32e to your computer and use it in GitHub Desktop.
Perspective / COVID
license: apache-2.0

Demo of Perspective, using US COVID data from 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, 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')
<!--
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 type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@latest/dist/cdn/perspective-viewer.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@latest/dist/cdn/perspective-viewer-datagrid.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@latest/dist/cdn/perspective-viewer-d3fc.js"></script>
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/themes.css" />
<script type="module">
import {worker} from "https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js";
const WORKER = worker();
const REQ = fetch(
"https://api.covidtracking.com/v1/states/daily.csv"
);
const LAYOUT = {
plugin: "Y Area",
plugin_config: {
legend: {
height: "106px",
left: "100px",
top: "25px",
width: "",
},
},
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\')`,
],
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment