Data visualization of a country's data
Branch: master
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.
node_modules
src
typings
.babelrc
.gitignore
.jsbeautifyrc
LICENSE
README.md
index.html
package.json
webpack.config.js

README.md

worldsnapshot

Inspired by DATA USA this is a REACT project that utilize public data API for data visualization. In particular, the application will illustrate a snapshot of a country using data such as the World Bank API and the DHS dataset.

demo: A World Snapshot

Data sources

  1. DHS: DHS data set is published by US AID. Following its API documents, indicators are selected to depict a country's well doing.
  2. The World Bank: Another comprehensive data set is The World Bank set. Check out its indicators page for a list of available indexes. Note that official document is still refering to v1 version of the API, which will block on CORS requests. Using v2/en endpoint instead. For example, to get a list of country names:
var api = "http://api.worldbank.org/v2/en/countries?format=json&per_page=1000";

Toolset

  • Materialize: "A modern responsive front-end framework based on Material Design" by their words.
  • REACT: core
  • webpack: new module builder that is making lot of buzz these days.
  • fetch: a new way to talk to API endpoints instead of jQuery AJAX.

Development

  1. Install nvm and node 9.4.
  2. npm install: to pull all dependencies
  3. npm run dev
  4. browse localhost:8080, browser will auto-refresh when webpack detects a change to source files.

Deploy

  1. npm run build
  2. goto /dist
  3. pip install awscli
  4. assuming you have setup your AWS account, aws s3 sync . s3://snapshots.world/.
  5. verify on a browser.