Skip to content
Interactive WebGL worldmap of visa-free travel
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
composer.lock Add php files Jan 9, 2019


Interactive worldmap of visa-free travel, live demo at


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


Install from source

First, clone or download:

$ git clone


$ wget -O
$ unzip

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,

You can’t perform that action at this time.