Agence Française de Développement - 19 juin 2017 - Paris
Equipe transformation numérique - Agence Française de Développement
Retrouvez-nous sur Github
Outils que nous allons utiliser: Pour cet atelier, vous aurez besoin d'installer un éditeur de code (ex. Bracket or Notepad++, ces editeurs peuvent être installés sans droits administrateurs de votre poste);
Nous utiliserons également:
- JSFiddle, un éditeur en ligne de JavaScript sign up here - free
- Carto un éditeur de cartes en ligne sign up here - free
! Pour gagner du temps au cours de l'atelier, merci de vous inscrire au préalable sur jsfiddle et 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
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
III. 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: 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.
- 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: