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...
- DHS: DHS data set is published by US AID. Following its API documents, indicators are selected to depict a country's well doing.
- 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";
- 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
Following REACT practice, compoents have been designed to handle both the data acquisition through 3rd party API, and ploting using the awesome D3 library:
The key is to encapsulate data acquisition into
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