No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data
design
map
webapp
.gitignore
Makefile
README.md
SUPPORT.md

README.md

Traveling Through 2018

This repo contains the code necessary to generate what's hosted at https://arnaudbrousseau.github.io/travel2018/

Purpose

I tried to accomplish a bunch of different things here:

  • visualize travel data from 2018 (duh!)
  • explore the process of map creation from pure data (see "Map", below)
  • play with the Google Spreadsheet API instead of having to deal with a DB (see "Data" below)
  • learn about SVG as a technology; in particular its scaling and animation features
  • avoid using any JavaScript or CSS frameworks for once; only vanilla is allowed. This means doing feature-detection and progressive enhancement by hand, this means having to deal with vendor prefixes in places, this means having to write not-so-pretty code at times.

Map

Built with data from NaturalEarthData and Mapnik. To re-build the map:

`make map`

Data

This is taken from a Google Spreadsheet. To pull fresh data:

`make data`

This will create a new data/locations.html file. Then manually copy/paste its content in webapp/index.html.

Webapp

No framework allowed here! Pure hand-written HTML/SVG/CSS/JS.

I'm also trying to do progressive enhancement. The data is there to begin with in a <table>, and the visualization elements built from this piece by piece.

Deploying

This is a static page, hosted with Github pages:

$ git checkout gh-pages
$ make
$ git push origin HEAD

That's it!