Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/.block

Last active April 28, 2023 19:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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
Perspective / Movies
Raw
.block
license: apache-2.0
height: 800
Raw
index.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<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@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>
<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 type="module">
import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective@latest/dist/cdn/perspective.js";
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 MOVIES_URL = "https://vega.github.io/editor/data/movies.json";
const datasource = async () => {
const request = fetch(MOVIES_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();
window.workspace.tables.set("movies", datasource());
window.workspace.restore(layout);
});
</script>
</body>
</html>
Raw
layout.json
{
"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",
"group_by": ["Distributor"],
"aggregates": {
"IMDB Rating": "avg"
},
"sort": [["US Gross", "desc"]],
"columns": ["US Gross"],
"expressions": null,
"split_by": null,
"filter": null,
"plugin_config": {
"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,
"name": null,
"table": "movies",
"linked": false
},
"PERSPECTIVE_GENERATED_ID_0": {
"plugin": "X/Y Scatter",
"group_by": ["Title"],
"aggregates": {
"IMDB Rating": "avg",
"Rotten Tomatoes Rating": "avg",
"Director": "last",
"Release Date": "last",
"MPAA Rating": "last"
},
"sort": [["US Gross", "asc"]],
"columns": [
"Rotten Tomatoes Rating",
"IMDB Rating",
"US Gross",
null,
"Director",
"Release Date",
"MPAA Rating"
],
"selectable": null,
"expressions": null,
"split_by": null,
"filter": 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": "Y Area",
"expressions": ["bucket(\"Release Date\", 'Y')"],
"group_by": ["bucket(\"Release Date\", 'Y')"],
"aggregates": {
"Rotten Tomatoes Rating": "avg"
},
"columns": ["US Gross"],
"split_by": ["Major Genre"],
"selectable": null,
"filter": 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": "Y Line",
"expressions": ["bucket(\"Release Date\", 'Y')"],
"group_by": ["bucket(\"Release Date\", 'Y')"],
"aggregates": {
"Rotten Tomatoes Rating": "avg"
},
"columns": [
"US Gross",
"Rotten Tomatoes Rating",
"Production Budget",
"Worldwide Gross",
"US DVD Sales"
],
"selectable": null,
"split_by": null,
"filter": 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
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment