World Snapshot

    The joy of making graphs in a data-driven web application has been the highlight that kept me going from project to project. Once all things are hooked up and data can be created in a meaningful way, the ultimate presentation are reports and graphs. In most cased, I have found graphs are far better than reports — reports often fall into a table form which looks impressive because it is filled with data. But who is to the analysis and draw a conclusion!? On the other hand, graph, even using the same data set as that of the report/table, is one step closer to a conclusive message — KPI is above or below threshold, department A is doing better than department B, sales of this month dropped comparing to last month's...

    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.

    REACT components

    Following REACT practice, compoents have been designed to handle both the data acquisition through 3rd party API, and ploting using the awesome D3 library:

    Data visualization SPA architecture

    The key is to encapsulate data acquisition into AjaxContainer, data source handling into DataSourceContainer and graphing into its own GraphFactoryContainer. Therefore, we can swap out any of these components, for example, using Google chart for graphing, adding a new data source, or using fetch instead of jQuery for AJAX calls.

    — by Feng Xia

    Related:

      2018-10-15
    SPA: a cofiguration Dashboard

    Project SPA Dashboard demo
      2016-09-30
    SPA: car leasing calculator

    Project Car Leasing Calculator