Interactive worldmap of visa-free travel, live demo at https://www.markuslerner.com/travelscope/
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
- d3-threeD hooking d3.js up to three.js
- 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 https://github.com/markuslerner/travelscope.git
$ 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>
$ 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 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
$ gulp build
. ├── 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