MTW-BOILERPLATE-DECKS

Full Report: Last One

This boilerplate allows you to develop quickly and easily WebGL-based visualizations of large datasets in deck canvas bundles. It has two modes. The result of production mode is a minimized bundle. You can embed this bundle on a website and then automatically update the deck's datasets continuously, for example.

In development mode, the deck files are watched. This means, if you edit them and save your changes, the decks will be recompiled and reloaded immediately. Feel free to adapt the existing decks or create a completely new one. If you need inspiration, check out deck.gl showcase or deck.gl examples. There you can see what's possible. E. g. Nicolas Belmonte's Wind Map is really amazing.

| Deck Canvas Examples

mtw-deck-flights

mtw-deck-flights.mp4

• Note: moving, zooming and rotating is possible; airports are clickable;

• Original Sources: deck.gl website example | globe and deck.gl pure-js example | globe

• Original Authors: deck.gl contributors

• License & Copyright: MIT © 2020 Urban Computing Foundation

• Changes: made

Air Traffic Data Source

• Original Source: Crowdsourced air traffic data from The OpenSky Network 2020 [CC-BY]

• License: CC BY 4.0

• Credits:

  • Matthias Schäfer, Martin Strohmeier, Vincent Lenders, Ivan Martinovic and Matthias Wilhelm. "Bringing Up OpenSky: A Large-scale ADS-B Sensor Network for Research". In Proceedings of the 13th IEEE/ACM International Symposium on Information Processing in Sensor Networks (IPSN), pages 83-94, April 2014.

  • Xavier Olive. "traffic, a toolbox for processing and analysing air traffic data." Journal of Open Source Software 4(39), July 2019.

• Used Source: deck.gl-data example | globe

Land & Airport Data Source

• Original Source: Natural Earth

• License: Public Domain

• Used Source: geojson-xyz

mtw-deck-trips

mtw-deck-trips.mp4

• Note: moving, zooming and rotating is possible (e. g. hold down shift to rotate)

• Original Source: deck.gl website example | trips

• Original Authors: deck.gl contributors

• License & Copyright: MIT © 2020 Urban Computing Foundation

• Changes: made

Boundaries & Roads Data Source

• Original Sources: Borough Boundaries and NYC Street Centerline via NYC OpenData

• License: Public Domain / OpenData

• Credits:

  • Department of City Planning (DCP)

  • Department of Information Technology & Telecommunications (DoITT)

• Changes: data modified, minified & converted via mapshaper to use only area of interest data

Trips Data Source

• Original Source: NYC Taxi & Limousine Commission Trip Record Data

  • License: Public Domain / OpenData

  • Credits:

    • Taxi and Limousine Commission (TLC)

    • Technology System Providers (TSP)

    • Department of Information Technology & Telecommunications (DoITT)

• Used Source: deck.gl TripsLayer Example | trips.json via deck.gl-data

  • License & Copyright: MIT © 2017 Uber Technologies, Inc.

  • Credit: deck.gl-data contributors

  • Changes: data modified and minified to use only area of interest data

Buildings Data Source

• Original Source: OpenStreetMap via Mapzen Vector Tiles API

  • License & Copyright: ODbL © OpenStreetMap contributors

  • Credits:

    • OpenStreetMap contributors

    • Mapzen

• Used Source: deck.gl TripsLayer Example | buildings.json via deck.gl-data

  • License & Copyright: MIT © 2017 Uber Technologies, Inc.

  • Credit: deck.gl-data contributors

| Feature Overview

Branch: main

Note: Badges are clickable and linked to their sources.

Additional Feature Information:

[click to toggle]

Note: Cards are clickable and linked to the corresponding GitHub repositories.

| Setup

To enable local operation of this boilerplate, you can do the following:

1. open your terminal and define your startup file MYSTARTUPFILE in use
   • e. g. for Zsh

      MYSTARTUPFILE=".zshrc"

   • or for pure Bash

      MYSTARTUPFILE=".bashrc" # or .bash_profile for macOS

2. install nvm and source your startup file again

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
   source ~/$MYSTARTUPFILE

3. if your terminal has closed, open it again and continue
4. execute to install Node.js
5. clone the repository git clone https://github.com/mythemeway/mtw-boilerplate-decks or your fork to your local machine
6. change your current directory to mtw-boilerplate-decks cd mtw-boilerplate-decks
7. run npm install

Note: If you've already installed you only have to do steps 5-7.

That's it.

| Boilerplate Usage

Run Development Mode

Go to the mtw-boilerplate-decks directory on your local machine and execute npm start. The result will appear at e. g. http://localhost:8080.

Run Production Mode

There are two ways to get your minimized bundle.

Way 1: npm run build = without terser [default] [faster]

Way 2: npm run terser = with terser additionally [smaller]

Note: output directory is always ~/mtw-boilerplate-decks/dist

Embed Deck

<div style="position:relative; height:40vh; width:80vw">
	<canvas id="mtw-canvas"></canvas>
</div>
<script src="./canvas.bundle.min.js"></script>

Warning: WebGL canvases can make your CPU sweat. For the environment, stop the requestAnimationFrame loop when the canvas isn't visible #GreenCoding. See my website-boilerplate for an example.

Switch Deck

1. open ~/mtw-boilerplate-decks/canvas.config.js
2. change const canvas and save it

   // 
   // CANVAS SETTINGS
   //  - path:  path to canvas
   //  - id:    canvas id attribute
   //  
   
   // const canvas = { path: './src/mtw-deck-flights.js', id: 'mtw-canvas' };
   const canvas = { path: './src/mtw-deck-trips.js', id: 'mtw-canvas' };
   
   module.exports = canvas;

Add Deck

1. put mtw-deck-new.js into the ~/mtw-boilerplate-decks/src/... directory
2. follow the switch deck procedure

   // 
   // CANVAS SETTINGS
   //  - path:  path to canvas
   //  - id:    canvas id attribute
   //  
   
   // const canvas = { path: './src/mtw-deck-flights.js', id: 'mtw-canvas' };
   // const canvas = { path: './src/mtw-deck-trips.js', id: 'mtw-canvas' };
   const canvas = { path: './src/mtw-deck-new.js', id: 'new-canvas' };
   
   module.exports = canvas;

Note:

• your canvas id attribute setting is only used in production mode; in development mode it is always the default mtw-canvas

• if you switch/add a Deck in development mode, the result is displayed immediately after saving your changes

| Other Boilerplates

| Appendix

Note on protected brand names and logos

• The use of protected brand names, trade names, utility models and brand logos on this website does not constitute an infringement of copyright; rather, it serves as an illustrative note. Even if this is not marked as such at the respective points, the corresponding legal provisions always apply.

• The brand names and logos used are the property of their respective owners and are subject to their copyright provisions.

• This offer is in no way related to the legal entities of the protected brand names and logos used.

Note on liability for links

• This README contains links to external third-party websites. The README operator has no influence on the content of these sites. Therefore, he cannot assume any liability. Instead, the respective provider is always responsible for the content.

• The linked pages were checked for possible legal violations at the time of linking and illegal content wasn't discernible. A permanent control of the linked pages is unreasonable without concrete evidence of an infringement. However, if the README operator becomes aware of such a violation, he will act immediately.

Readme uses

• star-solid.svg & code-branch-solid.svg [License: CC BY 4.0; Copyright: © Fonticons, Inc.; Changes: made]

• GitHub Readme Stats [License: MIT; Copyright © 2021 Anurag Hazra; Changes: made]

• Simple Icons [License: CC0 1.0]

• Shields.io [License: CC0 1.0]