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

▶

Oct 03, 2022 230 likes •653 views

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

SLIDE 1

Impactful Dataviz UIUX Conf China 2018

Designing Impactful Data Visualization

By Thomas Portolano

SLIDE 2

Impactful Dataviz UIUX Conf China 2018

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

Workshop agenda

SLIDE 3

Version 1.0 Impactful Dataviz UIUX Conf China 2018

A picture is worth a thousand words

SLIDE 4

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

When did China’s GDP

vertake France’s?

SLIDE 5

Version 1.0 Impactful Dataviz UIUX Conf China 2018

When did China’s GDP

vertake France’s?

SLIDE 6

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Dataviz has become “convenient”

SLIDE 7

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Are danish really that lazy?

SLIDE 8

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Is global warming total BS?

Average annual global temperature in Fahrenheit (1880-2015)

SLIDE 9

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Why you shouldn’t dribbblify your data viz?

Arable land per capita (hectares per person)

SLIDE 10

Version 1.0 Impactful Dataviz UIUX Conf China 2018

To the risk of misleading your readers

Gun deaths in Florida (Number of murders committed using firearms)

Source: Florida Department of Law Enforcement

SLIDE 11

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Our ambition

SLIDE 12

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Initial questions

Is the information conceptual or data

driven?

Am I declaring something or exploring

something?

SLIDE 13

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Conceptual or data-driven

What’s your material? Thoughts? Qualitative data? Ideas? Statistical and quantitative?

SLIDE 14

Version 1.0 Impactful Dataviz UIUX Conf China 2018

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..

SLIDE 15

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Practice

SLIDE 16

Version 1.0 Impactful Dataviz UIUX Conf China 2018

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

SLIDE 17

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Your toolbox

SLIDE 18

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Principle of proportional ink

SLIDE 19

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Colors

SLIDE 20

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Data ink ratio

SLIDE 21

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Avoid 3D

SLIDE 22

Version 1.0 Impactful Dataviz UIUX Conf China 2018

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

SLIDE 23

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Amounts

Bar plot (horizontal or vertical)
Grouped bars
Stacked charts
Gather charts per category serves a better

purpose

Dot plots

SLIDE 24

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Bar chart

SLIDE 25

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Horizontal bar chart

SLIDE 26

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Grouped chart

SLIDE 27

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Dot plot

SLIDE 28

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Pie charts
Stacked bars
Side by side bars
More advanced proportion visualizations

Proportion

SLIDE 29

Version 1.0 Impactful Dataviz UIUX Conf China 2018

SLIDE 30

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Pie chart

SLIDE 31

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Stacked bars

SLIDE 32

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Side by side bars

SLIDE 33

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Pie chart Stacked bars Side-by-side 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 ✖ ✔ ✖

SLIDE 34

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Distribution

Histogram
Stacked histogram vs pyramid
Scatter plot

SLIDE 35

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Histogram

SLIDE 36

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Stacked vs Pyramid

SLIDE 37

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Scatter plot

SLIDE 38

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Time series distribution

SLIDE 39

Version 1.0 Impactful Dataviz UIUX Conf China 2018

Wrap-up

SLIDE 40

We’re Wiredcraft. Thanks!

Impactful Dataviz UIUX Conf China 2018