Skip to content

Instantly share code, notes, and snippets.

@DevAndyLee
Last active Apr 30, 2019
Embed
What would you like to do?
Perspective Maps with Citibikes
height: 650
border: no
license: apache-2.0

Perspective Maps with Citibikes

This example uses live and updating data from NYC Citibikes, as demostrated in Andrew Stein's blog article: NYC Citybike Analytics in Real-Time

<!--
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">
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<!--
use babel so that we can use arrow functions and other goodness in this block!
-->
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
<script src="https://unpkg.com/perspective-viewer-maps@0.0.15/build/maps.plugin.js"></script>
<link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
<style>
perspective-viewer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
--map-tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
}
</style>
</head>
<body>
<perspective-viewer view="map_points" row-pivots='["name"]' columns='["lon","lat","num_bikes_available"]'
aggregates='{"lat":"avg","lon":"avg","num_bikes_available":"sum"}'>
</perspective-viewer>
<script>
function get(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "json";
xhr.onload = () => resolve(xhr.response);
xhr.send(null);
});
}
async function get_feed(feedname, callback) {
const url = `https://gbfs.citibikenyc.com/gbfs/en/${feedname}.json`;
const {data: {stations}, ttl} = await get(url);
if (typeof callback === "function") {
callback(stations);
setTimeout(() => get_feed(feedname, callback), ttl * 1000);
} else {
return stations;
}
}
const worker = perspective.worker();
async function get_schema(feed) {
const table = worker.table(feed);
const schema = await table.schema();
table.delete();
return schema;
}
async function merge_schemas(feeds) {
const schemas = await Promise.all(feeds.map(get_schema));
return Object.assign({}, ...schemas);
}
async function main() {
const feednames = ["station_status", "station_information"];
const feeds = await Promise.all(feednames.map(get_feed));
const schema = await merge_schemas(feeds);
const table = worker.table(schema, {index: "station_id"});
for (let feed of feeds) {
table.update(feed);
}
get_feed("station_status", table.update);
const viewers = document.getElementsByTagName("perspective-viewer");
for (viewer of viewers) {
viewer.load(table);
}
viewers[0].toggleConfig();
}
main();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment