Data visualization of a country's data
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.


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 = "";


  • 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.


  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.


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