This is developed as part of my Master's thesis to test the effects of latency on user comprehension. See the full work here.
- Install node.js. For a Mac with Homebrew just run
brew install node
. - Create a keys.js file in the
/keys
folder. Fill in a Bing Maps key
module.exports = {
bingMapsKey: 'ADD KEY'
};
- Type
npm install
. If using Windows make sure that git bash is installed to run the postinstall script. - Type
npm run debug
- Go to
localhost:8080
in your browser to see the project.http://localhost:8080/webpack-dev-server/
will automatically recompile when code changes.
- This assumes you were able to get it running locally.
npm run build
- The
/public
directory has everything needed to run the site. Now find a server or service to deliver these files. Recommended setup is using AWS S3. Just copy the folder's contents into a bucket and configure it as a HTTP server. More information available here.
- Click and hold to turn the earth.
- Scroll to zoom in or out
- Holding shift, click and drag to select stations for the histogram
- Press play to move the time forward
- Spacebar also plays and pauses the animation
- Dragging the timeline scrubber moves time forward as well