diff --git a/02.perception-and-color/slides.html b/02.perception-and-color/slides.html index 82c516d..001b66c 100644 --- a/02.perception-and-color/slides.html +++ b/02.perception-and-color/slides.html @@ -13,11 +13,11 @@ /* custom-theme.css */ /* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1} -/* @theme yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}
+/* @theme yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26 */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}

Perception & Color

CAPP 30239

-
+

Today

  • What matters most when creating a visualization?
    • @@ -25,10 +25,10 @@
  • Understanding color, and computational representations of it.
-
+

What is the most important question when creating a visualization?

-
+

What is the most important question when creating a visualization?

  • Where will the data come from? @@ -36,7 +36,7 @@
  • Who is the audience?
-
+

Audience First

  • Who are you presenting to?
    • @@ -47,7 +47,7 @@

Only now can we start thinking about data and presentation.

-
+

Perception

  • Selective - We can only pay attention to so much.
    • @@ -55,7 +55,7 @@
  • Limited working memory - We hold a very limited set of information in our minds at once.
-
+

What do you see?

@@ -74,7 +74,7 @@
-
+

What do you see?

@@ -87,11 +87,11 @@
-
+

Effectiveness Revisited

-
+

Altair Channels

@@ -117,7 +117,7 @@
-
+

Derived Properties

  • Length/Area - size of bars (X, Y)
    • @@ -127,14 +127,14 @@

What about volume?

-
+

Stevens' Power Law

Stevens (1975): Human response to sensory stimulus is characterized by a power law with different exponents with different stimuli.

perception = (magnitude of sensation)a

Smaller a exponent: harder to perceive changes.

Stevens measured values of a by exposing people to varied stimulus and asking them to compare magnitudes.

-
+

@@ -186,30 +186,30 @@
-
+

3D Graphs

-
+

-
+

-
+

Instead of 3D Graphs

  • Find other channels: hue & size are good candidates. (bubble chart)
  • Or make multiple 2D graphs with XY/YZ/XZ pairs.
-
+

What is Color?

Wavelengths of light are perceived as particular colors:

What's missing?

-
+

Color & the Eye

Rods

    @@ -225,26 +225,26 @@
  • hue & saturation
-
+

Spectrum vs. What We See

What we actually see is always a blend of multiple peaks.

This is impacted by ambient light conditions, as well as quirks of our visual processing.

In actuality, multiple combinations of light can give same color (metamers).

-
+

Chromatic Adaptation

Source: Andrew Steele https://www.youtube.com/channel/UC-XYsDNh4-886rMNLnnwR_w

-
+

Color Naming

Color naming is highly subjective, and research has shown that the ability to name a color correlates highly with the ability to distinguish it.

Be particularly careful with blue/green boundaries, as there are significant cultural differences.

Source: https://blog.xkcd.com/2010/05/03/color-survey-results/

-
+

Cultural Considerations

    @@ -253,7 +253,7 @@
  • Most other colors have contradictory meanings depending on culture. For example, yellow might be chosen to denote success (parts of Africa) or be associated with death (Middle East).
-
+

Color Vision Deficiency

More accurate name for what is commonly known as colorblindness.

    @@ -266,17 +266,17 @@
  • rarest, complete lack of color vision, usually corresponds to other vision issues as well
-
+

Color on a Page

Ink absorbs light, so we work with subtractive blending. Our base colors are cyan, magenta, and yellow. To save on ink costs, we throw in black/contrast as well.

We call this CMYK color.

-
+

Color on a Screen

Screens emit light, which means we use additive blending of red, green, and blue light. Every pixel of a screen can emit these three colors in different intensities.

-
+

Color Spaces

Ways of describing a color mathematically, usually have 3 components to match our perception of color:

    @@ -285,7 +285,7 @@
  • HSB/HSV/HSL (1970s)
-
+

A common way to refer to colors is by their intensity in each of these three channels.

this is 0% red, 100% green, 0% blue intensity (#00ff00)
this is 20% red, 60% green, 20% blue intensity: (#143c14)
@@ -293,26 +293,26 @@

This is sometimes expressed in hexadecimal:

-
+

RGB space as a cube

cube

-
+

RGB as pair plots

pair plots

Remember this trick for your own 3-dimensional data!

-
+

A slice through the middle of the cube gives colors of comparable brightness. (You may have seen such a triangle in color pickers.)

-
+

HSL

An alternative color space that's very useful for visualization is HSL color space.

Hue, Saturation, Lightness | https://hslpicker.com/

-
+

Aside: What about "alpha"?

You will often see a fourth channel: RGBA, HSLA.

This is known as alpha transparency (translucency).

@@ -322,20 +322,20 @@
  • Variations are very subtle, and background dependent.
    • -
    +

    CIE (RGB / XYZ / CIELAB)

    Based on human perception experiments where people would adjust dials to recreate colors out of red, green, and blue light.

    First from 1920s, revised in 1970s.

    Commission internationale de l'éclairage (Illumination)

    -
    +

    Screen Gamut

    Screens can't show the entire range of visible colors accurately, they define a "gamut". Since ~1996 most devices aim at a standard gamut to ensure similar representations of color, but even high end devices are not perfectly aligned.

    Projectors (like the one you're likely viewing this on) usually have skewed gamut.

    Moral of the story: Consider your medium!

    -
    +

    What does all this mean for visualization?

    Color choices should be made with respect to:

      @@ -344,7 +344,7 @@
    • differentiability
    -
    +

    Role of Color

    • Identify - Different color per category/actor. @@ -369,7 +369,7 @@
    -
    +

    Color Channels & Data Types

    Lightness is perceived as ordered

    Good for Ordinal variables

    @@ -380,7 +380,7 @@

    Nominal variables.

    -
    +

    Types of Palettes

    • Qualitative - Nominal data
      • @@ -389,27 +389,37 @@

    -
    +

    Hue Separation

    Pick distinct hues for unrelated variables.

    Grouped schemes can be used where there are relationships among the categories.

    https://vega.github.io/vega/docs/schemes/

    -
    +
    +

    Color Tips

    +
      +
    • Aim for no more than ~6 colors that need to be distinguished.
      • +
    • Colors should be distinct & differentiable by name.
      • +
    • Be mindful of cultural considerations & symbolism.
      • +
    • Ensure color schemes chosen appropriately for types of data.
      • +
    • "Get it right in black & white"
      • +
    +
    +

    "Get it right in black & white"

    A common mantra among visual designers.

    Ensure that your hues have different brightness levels.

    Ensure that you aren't using hue alone for your image.

    -
    +

    Text Legibility

    An important issue when using colored text and/or backgrounds is legibility.

    Web Content Accessibility Guidelines require a 4.5 color contrast (3:1 for large text).

    Minimize saturation in backgrounds, pick a font color with opposing lightness.

    https://webaim.org/resources/contrastchecker/

    -
    +

    Tools

    -
    +

    Acknowledgements & References

    Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.

    Color space images are from https://jamie-wong.com/post/color/, which is an incredible resource if you'd like to go deeper into both the biology and math of color.

    diff --git a/02.perception-and-color/slides.md b/02.perception-and-color/slides.md index 5483462..04d3acf 100644 --- a/02.perception-and-color/slides.md +++ b/02.perception-and-color/slides.md @@ -473,6 +473,17 @@ Grouped schemes can be used where there are relationships among the categories. +--- + +## Color Tips + +- Aim for no more than ~6 colors that need to be distinguished. +- Colors should be distinct & differentiable by name. +- Be mindful of cultural considerations & symbolism. +- Ensure color schemes chosen appropriately for types of data. +- "Get it right in black & white" + + --- ## "Get it right in black & white" @@ -500,7 +511,6 @@ Minimize *saturation* in backgrounds, pick a font color with opposing *lightness ![bg left width:600px](contrast.png) - --- ## Tools @@ -530,4 +540,3 @@ Color space images are from , which is an in - https://en.wikipedia.org/wiki/Stevens%27s_power_law - https://colorusage.arc.nasa.gov - https://vega.github.io/vega/docs/schemes/ - diff --git a/03.charts/1080.png b/03.charts/1080.png new file mode 100644 index 0000000..b41313a Binary files /dev/null and b/03.charts/1080.png differ diff --git a/03.charts/5920.png b/03.charts/5920.png new file mode 100644 index 0000000..9c5c840 Binary files /dev/null and b/03.charts/5920.png differ diff --git a/03.charts/crochet.jpg b/03.charts/crochet.jpg index 4d6f70f..88eddcb 100644 Binary files a/03.charts/crochet.jpg and b/03.charts/crochet.jpg differ diff --git a/03.charts/fox-bar.jpg b/03.charts/fox-bar.jpg new file mode 100644 index 0000000..db237cb Binary files /dev/null and b/03.charts/fox-bar.jpg differ diff --git a/03.charts/obama-treemap.png b/03.charts/obama-treemap.png new file mode 100644 index 0000000..956657a Binary files /dev/null and b/03.charts/obama-treemap.png differ diff --git a/03.charts/slides.html b/03.charts/slides.html index 360de17..a0851ad 100644 --- a/03.charts/slides.html +++ b/03.charts/slides.html @@ -13,11 +13,11 @@ /* custom-theme.css */ /* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1} -/* @theme 5xy4lj0j3hpjb3i78txdsw3dbxn0dh6ettheg1elaa */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}
    +/* @theme bbpdrflfi4nf5z23hil8cri9si3yxi3bj1soo7zg7o */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}

    Chart Design

    CAPP 30239

    -
    +

    Today

    • What general principles of visual design are relevant to our work?
      • @@ -25,12 +25,12 @@
    • When and how do we break the rules?
    -
    +

    Edward Tufte

    The Visual Display of Quantitative Information

    -
    +

    Key Ideas

    • Graphical Integrity: Above all else, show the data.
      • @@ -40,10 +40,10 @@
    • Revision & Editing are essential.
    -
    +

    Tufte's Principles for Graphical Integrity

    -
    +
    1. The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities represented.
    @@ -52,20 +52,20 @@ Graph length increase: 783%
    "Lie Factor": 14.8x

    -
    +
    1. Clear, detailed and thorough labeling should be used to defeat graphical distortion and ambiguity.

    How many children get a spinal injury every year? (out of 74,000,000 children in US)

    +

    Note: there are only 22,000 total spinal cord injuries a year in America (and most are 16-30yo).

    -
    +
    1. Write out explanation of the data on the graphic itself. Label important events in the data.
    -

    -
    +
    1. Show data variation, not design variation.
    @@ -73,7 +73,20 @@ Graph length increase: 783%

    The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data. (roughly 1:1 channel mapping)

    Exception: It is OK/common to pair color & shape, or for print color & texture to address issues that color presents.

    -
    +
    +

    Axes/Scale Mistakes

    +
      +
    • Carefully consider not starting at zero.
      • +
    • Beware dual axes.
      • +
    • Consider audience when using log scale.
      • +
    • Related: No pie charts that don't add up to 100%
      • +
    +
    +
    +
    +
    +
    +

    Data-Ink Ratio

    • Data-ink: Ink (pixels) used to show data.
      • @@ -81,27 +94,27 @@ Graph length increase: 783%

    -
    +

    -
    +

    Optimizing Data Density

    Number of entries in DataFrame / Area of Graphic.

    Classic example of high data density is the sparkline, which can fit on a line of text.

    -
    +

    Chart Junk

    Anything that isn't relevant to understanding the data.

    -
    +


    via junkcharts.typepad.com

    -
    +

    Common Chart Types

    -
    +

    How to Pick?

    • Quantitative / Quantitative:
      • @@ -110,27 +123,28 @@ via junkcharts.typepad.com

    • Nominal / Nominal:
    -
    +

    Bar Charts & Histograms

    • X/Y: Nominal (Binned Numerical - Histogram)
    • Y/X: Quantitative
      • +
    • Area must be relevant on bar charts: no log scales/cut axes!

    -
    +

    Line & Area Charts

    • X: Temporal / Quantitative
    • Y: Quantitative (means / sums)
    -
    +

    When to use stacked area charts?

    Sum of stacked axis variable must have meaning.

    -
    +

    Heatmap

      @@ -139,7 +153,7 @@ via junkcharts.typepad.com

    • mark_rect
    -
    +

    Strip Plot

      @@ -149,26 +163,27 @@ via junkcharts.typepad.com

    • mark_tick
    -
    +

    Pie / Donut / Radial Charts

    -

    +

    Theta: Quantitative (ratio)
    Color: Nominal

    Direct comparison of segments is very difficult at n > 2.

    Only use when most important information is ratio between sizes, and relatively few categories.

    +

    Must add up to 100%

    -
    +


    https://www.storytellingwithdata.com/blog/2020/5/14/what-is-a-pie-chart

    -
    +

    Bump / Rank Line Chart

    left

    left

    Useful for showing changes in relative positioning.

    Require some data manipulation using transform_window or pre-computing ranks. (see Altair gallery examples.)

    -
    +

    Scatter & Bubble Plots

      @@ -177,13 +192,14 @@ Color: Nominal

      Bubble charts use size as a 3rd dimension.

      (Note subtle but useful transparency usage as well.)

    -
    +

    Small Multiples / Faceting

    facet

    Useful when there is a nominal variable being compared across two other dimensions.

    -
    +
    +

    Map Basics

    Two most common:

      @@ -195,21 +211,20 @@ Color: Nominal

      We will revisit maps later in this course.

    -
    +

    Two choropleths, same data.

    -

    Unit of measurement is incredibly important.

    +

    Color scale & unit of measurement is incredibly important.

    Consider alternatives if district/population sizes vary significantly.

    -
    +

    When & How to Break the Rules

    When in doubt...

    -
      -
    • 95% of visualizations should be some variation of the common types.
      • -
    • Focus on Tufte's rules for clarity.
      • -
    +

    9 out of 10 visualizations should be some variation of the common types.

    +

    This does not need to hamper creativity, in the right context a little flourish can add a lot. But ensure that it does not obfuscate the data.

    +

    Focus on Tufte's principles & ask for feedback!

    -
    +

    Case Study: Two Innovations

    Two visualization types that have had their moment in the past 10-15 years:

      @@ -217,35 +232,34 @@ Color: Nominal

    • Word Clouds
    -
    +

    Grid Map

    Introduced in https://blog.apps.npr.org/2015/05/11/hex-tile-maps.html

    -
    +

    Word Cloud

    -
    +


    Derived from same data as word cloud.

    source: NYTimes via https://www.niemanlab.org/2011/10/word-clouds-considered-harmful/

    -
    +

    Narrative-supporting graphics

    by ulaniulani on flickr

    -
    +

    When it's OK to use 3D

    -

    You have data that truly makes more sense in 3D.

    -

    and/or

    -

    You work at CERN.

    +

    You have data that relates to a spatial third dimension.

    -

    (Image: CERN Large Hadron Collider)

    +

    (Image: Snowfall, NY Times)
    +(Image: CERN Large Hadron Collider)

    -
    +

    Acknowledgements & References

    Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.

      @@ -255,5 +269,5 @@ Color: Nominal

    .0000003%

    source: https://www.juiceanalytics.com/writing/better-know-visualization-small-multiples

    source: https://data.london.gov.uk/dataset/local-authority-maintained-trees#:~:text=The%20data%20does%20not%20represent,streets%2C%20private%20gardens%20and%20more.

    source: https://carto.maps.arcgis.com/apps/webappviewer/index.html?id=7475c5788efe4c75a9642f552f61d568

    discuss: is this a good thing?

    .0000003%

    source: https://www.juiceanalytics.com/writing/better-know-visualization-small-multiples

    source https://obamawhitehouse.archives.gov/interactive-budget

    source: https://data.london.gov.uk/dataset/local-authority-maintained-trees#:~:text=The%20data%20does%20not%20represent,streets%2C%20private%20gardens%20and%20more.

    source: https://carto.maps.arcgis.com/apps/webappviewer/index.html?id=7475c5788efe4c75a9642f552f61d568

    discuss: is this a good thing?

    \ No newline at end of file diff --git a/03.charts/slides.md b/03.charts/slides.md index 00b8bae..8931332 100644 --- a/03.charts/slides.md +++ b/03.charts/slides.md @@ -53,13 +53,15 @@ Graph length increase: 783% How many children get a spinal injury every year? (out of 74,000,000 children in US) +Note: there are only 22,000 total spinal cord injuries a year in America (and most are 16-30yo). + --- 3. Write out explanation of the data on the graphic itself. **Label important events** in the data. -![](labeled.png) +![bg right width:600px](labeled.png) --- @@ -73,13 +75,29 @@ Exception: It is OK/common to pair color & shape, or for print color & texture t --- -## Misleading Axes +## Axes/Scale Mistakes -- not starting at 0 -- dual axes -- pie charts that don't add up to 100 +- Carefully consider not starting at zero. +- Beware dual axes. +- Consider audience when using log scale. +- Related: No pie charts that don't add up to 100% + +--- + +![bg fit](tools_misleading_axes.png) + +--- + +![bg fit](fox-bar.jpg) + +--- + +![bg vertical fit](1080.png) + +--- + +![bg fit](5920.png) -TODO: add examples --- @@ -138,6 +156,7 @@ via junkcharts.typepad.com - X/Y: Nominal (Binned Numerical - Histogram) - Y/X: Quantitative +- Area must be relevant on bar charts: no log scales/cut axes! ![](bars.png) @@ -184,7 +203,7 @@ Sum of stacked axis variable **must have meaning**. ### Pie / Donut / Radial Charts -![](pyramid.png) +![bg right fit](pyramid.png) Theta: Quantitative (ratio) Color: Nominal @@ -193,6 +212,8 @@ Direct comparison of segments is very difficult at n > 2. Only use when most important information is ratio between sizes, and relatively few categories. +**Must add up to 100%** + --- ![](pie-comparison.png) @@ -228,7 +249,7 @@ Bubble charts use size as a 3rd dimension. ![facet](facet.png) -![bg right](small-maps.png) +![bg right fit](small-maps.png) @@ -236,6 +257,12 @@ Useful when there is a nominal variable being compared across two other dimensio --- +![bg fit](obama-treemap.png) + + + +--- + ### Map Basics Two most common: @@ -256,13 +283,13 @@ Two most common: ## Two choropleths, same data. -![bg width:600px](arcgis-chorolpleth.png) +![bg right vertical width:600px](arcgis-chorolpleth.png) -![bg width:600px](arcgis-choropleth2.png) +![bg right width:600px](arcgis-choropleth2.png) -Unit of measurement is incredibly important. +Color scale & unit of measurement is incredibly important. Consider alternatives if district/population sizes vary significantly. @@ -272,8 +299,11 @@ Consider alternatives if district/population sizes vary significantly. **When in doubt...** -- 95% of visualizations should be some variation of the common types. -- Focus on Tufte's rules for clarity. +9 out of 10 visualizations should be some variation of the common types. + +This does not need to hamper creativity, in the right context a little flourish can add a lot. But ensure that it does not obfuscate the data. + +Focus on Tufte's principles & ask for feedback! --- @@ -323,14 +353,12 @@ by ulaniulani on flickr ### When it's OK to use 3D -You have data that truly makes more sense in 3D. +You have data that relates to a spatial third dimension. -and/or - -You work at CERN. - -![bg right width:700px](lhc.png) +![bg vertical right](snowfall.png) +![bg right fit](lhc.png) +(Image: Snowfall, NY Times) (Image: CERN Large Hadron Collider) --- diff --git a/03.charts/snowfall.png b/03.charts/snowfall.png new file mode 100644 index 0000000..63e94f1 Binary files /dev/null and b/03.charts/snowfall.png differ diff --git a/03.charts/tools_misleading_axes.png b/03.charts/tools_misleading_axes.png new file mode 100644 index 0000000..32d4b83 Binary files /dev/null and b/03.charts/tools_misleading_axes.png differ