Designing Impactful Data Visualization By Thomas Portolano 1 UIUX - PowerPoint PPT Presentation

UIUX Conf China 2018 Impactful Dataviz Designing Impactful Data Visualization By Thomas Portolano 1

UIUX Conf China 2018 Impactful Dataviz Workshop agenda A picture is worth a thousand words 3 But not any picture 12 Our ambition 12 Key design elements 20 Dataviz grammar 33 Wrap up 35 2

UIUX Conf China 2018 Impactful Dataviz Version 1.0 A picture is worth a thousand words

UIUX Conf China 2018 Impactful Dataviz Version 1.0 When did China’s GDP overtake France’s? Country 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 12113468 133939571 147055001 16602879 19553470 22859658 275213177 355218231 45982060 51099536 61006204 75725538 85605473 96072244 104823721 110646662 111909925 122377004 China 69605 8865 5081 65662 04963 92360 3355 1652 91384 09257 88867 36875 14679 81532 09961 82625 50229 79375 13622489 13764653 14942866 18404808 211574248 219612610 23185936 265721324 29183828 26902222 26426095 286140817 26838252 281107772 28521657 24382078 24651342 25825013 France 40482 24384 55373 12641 8204 3718 51988 9384 91460 83967 48930 0264 25092 5703 60630 96251 97438 07216

UIUX Conf China 2018 Impactful Dataviz Version 1.0 When did China’s GDP overtake France’s?

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Dataviz has become “convenient”

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Are danish really that lazy?

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Is global warming total BS? Average annual global temperature in Fahrenheit (1880-2015)

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Why you shouldn’t dribbblify your data viz? Arable land per capita (hectares per person)

UIUX Conf China 2018 Impactful Dataviz Version 1.0 To the risk of misleading your readers Gun deaths in Florida (Number of murders committed using firearms) Source: Florida Department of Law Enforcement

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Our ambition

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Initial questions - Is the information conceptual or data driven? - Am I declaring something or exploring something?

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Conceptual or data-driven What’s your material? Thoughts? Qualitative data? Ideas? Statistical and quantitative?

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Declarative vs Exploratory Analysts can use a dataset to confirm or refute an hypothesis, or communicate a message. In the first case, the key is going fast, iterate , try and refute. In the second, clarity, simplicity and using the correct codes ..

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Practice

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Know key design principles - Principle of proportional ink - Each type of data is preferably used with a specific plot - Know your grammar and you’re already half way there

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Your toolbox

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Principle of proportional ink

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Colors

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Data ink ratio

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Avoid 3D

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Know your grammar - Data visualization is a language - For maximal impact, better to follow conventions - Know your grammar and you’re already half way there

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Amounts - Bar plot (horizontal or vertical) - Grouped bars - Stacked charts - Gather charts per category serves a better purpose - Dot plots

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Bar chart

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Horizontal bar chart

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Grouped chart

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Dot plot

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Proportion - Pie charts - Stacked bars - Side by side bars - More advanced proportion visualizations

UIUX Conf China 2018 Impactful Dataviz Version 1.0

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Pie chart

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Stacked bars

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Side by side bars

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Pie chart Stacked Side-by-side bars bars Clearly visualizes the data as proportions of a whole ✔ ✔ ✖ Allows easy visual comparison of the relative proportions ✖ ✖ ✔ Visually emphasizes simple fractions, such as 1/2, 1/3, 1/4 ✔ ✖ ✖ Looks visually appealing even for very small datasets ✔ ✖ ✔ Works well when the whole is broken into many pieces ✖ ✖ ✔ Works well for the visualization of many sets of proportions or time ✖ ✔ ✖ series of proportions

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Distribution - Histogram - Stacked histogram vs pyramid - Scatter plot

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Histogram

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Stacked vs Pyramid

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Scatter plot

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Time series distribution

UIUX Conf China 2018 Impactful Dataviz Version 1.0 Wrap-up

UIUX Conf China 2018 Impactful Dataviz We’re Wiredcraft. Thanks!