computingfreak / travelscope

Interactive WebGL worldmap of visa-free travel

Travelscope

Interactive worldmap of visa-free travel, live demo at https://www.markuslerner.com/travelscope/

About

A visual exploration of the travel freedom attached to passports using three.js and d3.

The weight and the travel freedom attached to a passport vary drastically across nationalities. International visa-regulations are very complex and often non-transparent. They reflect the economical and geopolitical situations as well as the relationships of countries.

This project aims to cast some light on these structures. The default Visa-free destinations mode shows a choropleth map, which is shaded based on the number of destination countries an individual of a certain nationality can travel to without a visa or with visa on arrival.

The visa requirements are pulled from Wikipedia in regular intervals and matched to the countries/territories via the sovereignty of the respective country/territory.

This project uses the following libaries/technologies:

• bootstrap Bootstrap 3: HTML, CSS, and JS framework
• three.js lightweight JavaScript 3D library using WebGL
• d3 D3 (or D3.js) is a JavaScript library for visualizing data using web standards
• d3-threeD hooking d3.js up to three.js
• tween.js Javascript tweening engine
• Sass powerful CSS extension language
• gulp as a task runner
• browserify for bundling
• watchify for watching browserify builds
• Babel for ES6 and ES7 magic
• ESLint to maintain a consistent code style

Installation

Install from source

First, clone or download:

$ git clone https://github.com/markuslerner/travelscope.git

or

$ wget -O travelscope.zip https://github.com/markuslerner/travelscope/archive/master.zip
$ unzip travelscope.zip

Optionally rename to your project name and change into the directory:

$ mv travelscope <my-project-name>
$ cd <my-project-name>

Install dependencies

$ npm install

Install gulp globally

Only, if gulp isn't installed yet.

$ sudo npm install --global gulp-cli

Running dev server

Files are compiled to dev folder, which is automatically created, if it doesn't exist.

$ gulp

Gulp will run a server on your local machine at port 3000. Whenever you change a source file it will re-compile client.js and reload your browser.

Building production files

Files are compiled to public folder.

$ gulp build

Application Structure

.
├── dev                            # Development folder created by gulp/browserify
├── public                         # Distribution folder
│   └── index.php                  # Production index.php file
└── src                            # Application source code
    ├── assets                     # Asset files
    │   ├── fonts                  # Font files
    │   └── img                    # Image files
    ├── client                     # Application JS folder
    │   ├── config.js              # Application settings file
    │   ├── jquery                 # jQuery plugins
    │   ├── jquery-ui              # jQuery UI
    │   ├── LogTerminal            # Window overlay log terminal
    │   ├── thirdparty             # Thirdparty JS files
    │   ├── three                  # Three.js extras
    │   ├── utils                  # Utility function
    │   └── worldmap               # Application core files
    │       ├── geometry.js        # Geometry functions
    │       ├── index.js           # Main application file
    │       ├── panel.js           # UI Panel for displaying content
    │       └── userinterface.js   # UI functions
    ├── client.js                  # Main JS file
    ├── index.html                 # Main HTML page container for app used for development
    └── scss                       # SCSS source files

– Markus Lerner, markuslerner.com