class: center middle main-title section-title-7 # What makes a good visualization? .class-info.medium[ **Part 2** &nbsp; &nbsp; ] --- layout: true class: title title-1 --- # What makes a great visualization? .box-inv-1.medium[No substantive issues] -- .box-inv-1.medium[No perceptual issues] -- .box-inv-1.medium[Honesty + good judgment] -- .box-inv-1.medium[Good aesthetics] .box-1.tiny[Kieran Healy, *Data Visualization: A Practical Introduction*] --- # Common perceptual issues .box-inv-1.medium[Angles and bars] -- .box-inv-1.medium[Bars and truncated axes] -- .box-inv-1.medium[Dual y-axes] --- # Pie charts .box-inv-1[Perceptual issues with angle and fill space] -- .box-inv-1[Only okay(ish) if there are a few easily distinguishable categories] -- .pull-left[ <img src="02_good-visualizations_files/figure-html/pie-good-1.png" width="100%" style="display: block; margin: auto;" /> ] .pull-right[ <img src="02_good-visualizations_files/figure-html/pie-bad-1.png" width="100%" style="display: block; margin: auto;" /> ] --- # Yay bar plots! .box-inv-1[We are a lot better at visualizing<br>line lengths than angles and areas] .pull-left[ <img src="02_good-visualizations_files/figure-html/example-pie-1.png" width="100%" style="display: block; margin: auto;" /> ] .pull-right[ <img src="02_good-visualizations_files/figure-html/example-bar-1.png" width="100%" style="display: block; margin: auto;" /> ] --- # Oh no bar plots! .pull-left.center[ <figure> <img src="img/02/obamacareenrollment-fncchart.jpg" alt="Fox News Obamacare enrollment" title="Fox News Obamacare enrollment" width="100%"> </figure> ] -- .pull-right.center[ <figure> <img src="img/02/econcharts-education.gif" alt="Obama graduation rate" title="Obama graduation rate" width="100%"> </figure> ] ??? https://blog.ed.gov/2014/10/progress-on-education-is-helping-fuel-our-economys-growth/ and https://www.mediamatters.org/fox-news/dishonest-fox-charts-obamacare-enrollment-edition and https://twitter.com/ObamaWhiteHouse/status/517743415375974401 --- # Start at zero .box-inv-1.medium.sp-after[The entire line length matters,<br>so don't truncate it!] -- .box-1.large.sp-after[Always start at 0 *with bar charts*] -- .box-inv-1.sp-after[(Or don't use bars)] --- # Truncation is fine sometimes! .box-inv-1.medium[It is actually more legal to<br>truncate the y-axis than you might think!] .box-inv-1.small.sp-after[Just not with bars!] -- .box-1[When small movements matter] -- .box-1[When the scale itself is distorted] -- .box-1[When zero values are impossible] --- # When is it okay to truncate? .box-inv-1[When small movements matter] -- .pull-left[ <figure> <img src="img/02/us_gdp_us_gdp_chartbuilder-3.png" alt="GDP not truncated, from Quartz" title="GDP not truncated, from Quartz" width="100%"> </figure> ] -- .pull-right[ <figure> <img src="img/02/us_gdp_us_gdp_chartbuilder-2.png" alt="GDP truncated, from Quartz" title="GDP truncated, from Quartz" width="100%"> </figure> ] ??? Stock prices too https://qz.com/418083/its-ok-not-to-start-your-y-axis-at-zero/ --- # When is it okay to truncate? .box-inv-1[When the scale itself is distorted] -- .pull-left.center[ <figure> <img src="img/02/uber-sign.jpg" alt="Sign in an Uber car about rating system" title="Sign in an Uber car about rating system" width="60%"> </figure> ] -- .pull-right[ <figure> <img src="img/02/uber-scale.jpg" alt="Internal rating system at Uber" title="Internal rating system at Uber" width="100%"> </figure> ] ??? https://www.buzzfeed.com/carolineodonovan/the-fault-in-five-stars http://www.businessinsider.com/leaked-charts-show-how-ubers-driver-rating-system-works-2015-2 --- # When is it okay to truncate? .box-inv-1[When zero values are impossible] -- .pull-left[ <figure> <img src="img/02/oral_temperature_sara_bob_chartbuilder.png" alt="Temperature not truncated, from Quartz" title="Temperature not truncated, from Quartz" width="100%"> </figure> ] -- .pull-right[ <figure> <img src="img/02/oral_temperature_sara_bob_chartbuilder-1.png" alt="Temperature truncated, from Quartz" title="Temperature truncated, from Quartz" width="100%"> </figure> ] ??? https://qz.com/418083/its-ok-not-to-start-your-y-axis-at-zero/ --- # Why not use double y-axes? .box-inv-1.medium[You have to choose where the y-axes<br>start and stop, which means…] -- .box-inv-1.medium[…you can force the two trends<br>to line up however you want!] --- # Stop eating margarine! .center[ <figure> <img src="img/02/chart.png" alt="Spurious correlation between divorce rate and margarine consumption" title="Spurious correlation between divorce rate and margarine consumption" width="100%"> <figcaption>Source: <a href="https://www.tylervigen.com/spurious-correlations" target="_blank">Tyler Vigen's spurious correlations</a></figcaption> </figure> ] --- # It even happens in *The Economist!* .center[ <figure> <img src="img/02/economist-dogs.png" alt="Dog neck size and weight in The Economist" title="Dog neck size and weight in The Economist" width="85%"> </figure> ] ??? <https://medium.economist.com/mistakes-weve-drawn-a-few-8cdd8a42d368> --- # When is it legal? -- .box-inv-1.medium[When the two axes measure the same thing] -- .center[ <figure> <img src="img/02/3-operations.png" alt="Lollipop chart with dual y-axes from my dissertation" title="Lollipop chart with dual y-axes from my dissertation" width="85%"> </figure> ] --- # When is it legal? <img src="02_good-visualizations_files/figure-html/atl-weather-dual-nice-1.png" width="100%" style="display: block; margin: auto;" /> --- # Alternative: Use multiple plots <img src="02_good-visualizations_files/figure-html/atl-weather-patchwork-1.png" width="100%" style="display: block; margin: auto;" /> --- # Honesty and good judgment .box-inv-1.sp-after[No automatic or easy way to test this] -- .box-inv-1.medium.sp-after[Every visualization tells a story.<br>Use data that emphasizes that story.] -- .box-inv-1.medium[Care about the audience and their needs] --- # What makes a great visualization? .box-inv-1.medium[No substantive issues] .box-inv-1.medium[No perceptual issues] .box-inv-1.medium[Honesty + good judgment] .box-inv-1.medium[Good aesthetics] .box-1.tiny[Kieran Healy, *Data Visualization: A Practical Introduction*] --- # What's wrong? .center[ <figure> <img src="img/02/pie-genus.png" alt="Distribution of genus" title="Distribution of genus" width="60%"> </figure> ] ??? - Aesthetic issues - Substantive issues - Perceptual issues - Honesty + judgment issues --- # What's wrong? .center[ <figure> <img src="img/02/changing-face-of-america.png" alt="Changing face of America" title="Changing face of America" width="45%"> </figure> ] ??? - Aesthetic issues - Substantive issues - Perceptual issues - Honesty + judgment issues --- # What's wrong? .center[ <figure> <img src="img/02/how-stuff-works-recidivism.png" alt="Recidivism pie chart" title="Recidivism pie chart" width="45%"> </figure> ] ??? - Aesthetic issues - Substantive issues - Perceptual issues - Honesty + judgment issues --- # What's right? .pull-left[ <img src="02_good-visualizations_files/figure-html/flatten-the-curve-1.png" width="100%" style="display: block; margin: auto;" /> ] ??? - Aesthetic issues - Substantive issues - Perceptual issues - Honesty + judgment issues -- .pull-right.center[ <figure> <img src="img/02/bergstrom-tweet.png" alt="Carl Bergstrom tweet" title="Carl Bergstrom tweet" width="80%"> <figcaption><a href="https://twitter.com/CT_Bergstrom/status/1235865328074153986" target="_blank">Thread by Carl T. Bergstrom</a></figcaption> </figure> ] ??? [Carl Bergstrom on the flatten the curve visualization](https://twitter.com/CT_Bergstrom/status/1235865328074153986)