Leveraging Open Data for social good - 28 juin 2017 - Nairobi
Thomas Roca, Phd, Researcher and Data Officer @Agence Française de Développement
Stay in touch via Twitter, Github or LinkedIn
Dataviz workshop: Lecture slides available
Tools we are going to use: For this workshop, you will need to install a code editor (e.g. Bracket or Notepad++, these editors can be installed without admin rights);
We are also going to use:
- JSFiddle, a javascript online editor sign up here - free
- Carto an online map editor sign up here - free
! To save time during the workshop, register to jsfiddle and carto
I. Basic introduction to data representation [15min]
- What, and why dataviz ?
- Better understanding
- Communication
- Interactivity and Story telling
- Using packages with Stata, Python and R
- SIG using cloudbased soft Microsoft Office 365' PowerBI and Carto
Practical: Create a heatmap with Carto [30min]
- map Kenya Health sites using CSV file from HDX plateform;
- Map Cameroon population in 2015 using the data in the Github folder (CMR sub)
II. Basic instroduction to the web languages: HTML, CSS, JavaScript [20min]
JavaScript library & dataviz
- dataviz the example of Highcharts
- SIG using Highmaps and leaflet
III. Data and programmming for the web: [30min]
A tiny bit of code [20min]
- Quick intro to JavaScript
When data comes in [10min]
- Data are not only stored in xls!
- Text format to store data: CSVs, TSVs, etc.
- Structured text data:
- Intro to XML
- Intro to JSON
- Intro to YAML
IV. Getting real time data: from scrapper to API, the data revolution: [20min]
- Introduction: what is an API ?
- Use cases:An application leveraging World Bank API
- Example: DHS API app': http://data.afd.fr/DataTools/DHS/DHS+browser.html
Practical: Option A. Create a DataStory with Highcharts and Carto
- use Data Story Template in the github repository It can be about :
- health
- Education
- sociaux economic conditions etc. You can use data sources such as the World Bank indicators, UN OCHA HDX platform, etc.
Pratical: OPtion B. Use world bank API & the DHS application
- World bank API
- GDP growth (annual %) of Kenya (WDI)
- last 20 observation
- using highcharts
- DHS API
- Create a heatmap using leaflet
- display age specific literacy rate 15-19
- subnational level in Kenya
- for the last DHS available
- Friendly, M., 1999, "Re-Visions of Minard", link
- Friendly, M., 2008, "A Brief History of Data Visualization" link
- Lupi, H., Posavec, S.,2016, "Dear Data", http://www.dear-data.com/
- Yau, N. 2011, visualize this: the flowingdata guide to design, visualization, and statistics link
- The Smithonianmag:"The Revolutionary Infographics of W.E.B. Du Bois And Booker T. Washington" link
- ToucanTouco, Infographie vs Dataviz: Faites la différence. Link
- Tufte, E. R. The Visual Display of Quantitative Information. Graphics Press, Cheshire, CT, 1983.
- Hagley, J. What is the difference bewteen infographic and dataviz ? Link
-
Code sample we saw on JSfiddle:
-
Highcharts:
-
Carto:
- Video tutorial for Carto: in french, in spanish
- Carto Workshop tutorial:https://github.com/CartoDB/carto-workshop
-
HTML, CSS and JS: