Data visualization Session 4: Designing data visuals
Koen Van den Eeckhout - Baryon All the slides and all the links: baryon.be/dataviz-resources Session 1 Design basics Tuesday, September 21, 2 pm – 5.15 pm
Session 2 Graphic representation Wednesday, September 22, 9 am – 12.15 pm
homework assignment part 1
Session 3 Producing data visuals Tuesday, October 5, 2 pm – 5.15 pm
Session 4 Designing data visuals Wednesday, October 6, 9 am – 12.15 pm
homework assignment part 2
Session 5 Feedback Tuesday, October 19, 2 pm – 3.30 pm Components Colors Illustrations Typography
15’ break
Advanced Interactive data visuals data visualization Programming data visuals Maps Components
trust, happiness, stability warmth
energy, sensitive, passion love
friendly, rich, natural mistery
history, neutral, intelligence calm canva.com canva.com coolors.co Accent colors Accent colors Clever color use Accessibility Accessibility https://academy.datawrapper.de/article/140-what-to-consider- when-choosing-colors-for-data-visualization are colors even helpful? gray is the most powerful color use consistent colors use logical colors https://blog.datawrapper.de/gendercolor/ https://blog.datawrapper.de/gendercolor/ dark colors = high values*
*on a light background don’t use gradient colors for categories rainbow scales can be confusing Icons
thenounproject.com
* The most important use cases for 5G Illustrations
freepik.com
Typography Typography Typography Typography Typography Typography
Serif Sans serif perfect for body text perfect for titles
fonts.google.com Some personal favorites Open sans Bahnschrift Lato Roboto Captions Well-crafted captions can make a visual ‘self-contained’ data story
makeovermonday.co.uk Font size Adapt to the situation – a presentation is different from an article! How would you do it? Individual exercise (10 minutes)
Write down what you don’t like about this visual
What would you change to improve it?
Break All the slides and all the links: https://baryon.be/dataviz-resources Advanced data visualization Interactivity Types of interactivity
tooltips filtering navigation storytelling Types of interactivity
tooltips filtering navigation storytelling https://baryon.be/files/MM/2020/W04/ Types of interactivity
tooltips filtering navigation storytelling Noah Veltman https://noahveltman.com/nflplayers/ Types of interactivity
tooltips filtering navigation storytelling Jeff Clark http://neoformix.com/Projects/ObesitySlope/ Types of interactivity
tooltips filtering navigation storytelling De Tijd https://multimedia.tijd.be/biotechrevolutie/ Interactivity
Datawrapper LocalFocus Flourish datawrapper.de localfocus.nl flourish.studio
https://baryon.be/files/MM/2020/W04/ https://baryon.be/data-visualization-tools-datawrapper/ Demo Programming Programming languages for data visualization
R python JavaScript R ggplot2 https://r4ds.had.co.nz/data- visualisation.html https://www.cedricscherer.com/ 2019/08/05/a-ggplot2-tutorial- for-beautiful-plotting-in-r/ Python
Matplotlib https://matplotlib.org/
Seaborn http://web.stanford.edu/~mwask om/software/seaborn/index.html
Plotly https://plot.ly/python/ JavaScript d3.js https://d3js.org/
Highcharts https://www.highcharts.com/ docs/index
Chart.js https://www.chartjs.org/ Choosing a library
supported chart types features interactivity ease of use community support Maps (Some) mapping tools
Mapbox QGIS Datawrapper Google Earth and more? (Some) mapping tools
Mapbox QGIS Datawrapper Google Earth and more?
Mapbox https://studio.mapbox.com
(Some) mapping tools
Mapbox QGIS Datawrapper Google Earth and more?
(Some) mapping tools
Mapbox QGIS Datawrapper Google Earth and more? Pen & paper QGIS & Aerialod
http://www.statsmapsnpix.com/2020/11/ how-to-make-3d-population-density.html Azimuthal map tool & Adobe Illustrator
https://ns6t.net/azimuth/ ??? Excel & Adobe Illustrator https://baryon.be/ behind-the-maps/ Homework assignment
Bringing it all together Homework assignment
Revisit the concept(s) you sketched in the first part of the assignment
Feel free to take feedback into account, modify the concept where needed.
Choose a tool you like to turn this concept into a data visual
Think carefully about the use of colors, typography, icons,…
A data visual is never finished… limit yourself to about 2, but maximum 4 hours
Submit the visual as an image file or link before Monday, October 18: • to [email protected] • or through Moodle Session 1 Design basics Tuesday, September 21, 2 pm – 5.15 pm
Session 2 Graphic representation Wednesday, September 22, 9 am – 12.15 pm
homework assignment part 1
Session 3 Producing data visuals Tuesday, October 5, 2 pm – 5.15 pm
Session 4 Designing data visuals Wednesday, October 6, 9 am – 12.15 pm
homework assignment part 2
Session 5 Feedback Tuesday, October 19, 2 pm – 3.30 pm Q&A All the slides and all the links: https://baryon.be/dataviz-resources
Koen Van den Eeckhout – [email protected] - @koen_vde