diff --git a/03.charts/area.png b/03.charts/area.png new file mode 100644 index 0000000..790229d Binary files /dev/null and b/03.charts/area.png differ diff --git a/03.charts/bars.png b/03.charts/bars.png new file mode 100644 index 0000000..0f06809 Binary files /dev/null and b/03.charts/bars.png differ diff --git a/03.charts/bubble.png b/03.charts/bubble.png new file mode 100644 index 0000000..1268cb3 Binary files /dev/null and b/03.charts/bubble.png differ diff --git a/03.charts/bump.png b/03.charts/bump.png new file mode 100644 index 0000000..087a44c Binary files /dev/null and b/03.charts/bump.png differ diff --git a/03.charts/crochet.jpg b/03.charts/crochet.jpg new file mode 100644 index 0000000..4d6f70f Binary files /dev/null and b/03.charts/crochet.jpg differ diff --git a/03.charts/examples.ipynb b/03.charts/examples.ipynb index 81a0680..30993ea 100644 --- a/03.charts/examples.ipynb +++ b/03.charts/examples.ipynb @@ -138,16 +138,129 @@ }, { "cell_type": "code", - "execution_count": null, + "execution_count": 53, "id": "44096965-f500-4ebf-81c5-c1e8df9d4ea1", "metadata": {}, "outputs": [], + "source": [ + "import math\n", + "import polars as pl" + ] + }, + { + "cell_type": "code", + "execution_count": 58, + "id": "f652c1e0-ed86-45cd-b299-4ab662f2437d", + "metadata": {}, + "outputs": [], + "source": [ + "rows = []\n", + "for pt in range(100):\n", + " rows.append({\"percentage\": pt, \"theta\":pt / 100 * 2 * math.pi, \"area\": (pt / 100 * 100**2) / (100**2)})\n", + "area_df = pl.DataFrame(rows)" + ] + }, + { + "cell_type": "code", + "execution_count": 59, + "id": "813f6626-9ff4-4d9f-ad60-6a2bf508490a", + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "\n", + "\n", + "
\n", + "" + ], + "text/plain": [ + "alt.Chart(...)" + ] + }, + "execution_count": 59, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "alt.Chart(area_df).mark_point().encode(x=\"percentage\", y=\"area\")" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "abf756b4-3ccd-4ea3-972b-ac36926a39b3", + "metadata": {}, + "outputs": [], "source": [] }, { "cell_type": "code", "execution_count": null, - "id": "f652c1e0-ed86-45cd-b299-4ab662f2437d", + "id": "b4c75d21-2a82-4326-87b0-8f4b788a3d38", "metadata": {}, "outputs": [], "source": [] diff --git a/03.charts/facet.png b/03.charts/facet.png new file mode 100644 index 0000000..e12b72a Binary files /dev/null and b/03.charts/facet.png differ diff --git a/03.charts/heatmap.png b/03.charts/heatmap.png new file mode 100644 index 0000000..1c23a41 Binary files /dev/null and b/03.charts/heatmap.png differ diff --git a/03.charts/lhc.png b/03.charts/lhc.png new file mode 100644 index 0000000..44f4b69 Binary files /dev/null and b/03.charts/lhc.png differ diff --git a/03.charts/lines.png b/03.charts/lines.png new file mode 100644 index 0000000..0636262 Binary files /dev/null and b/03.charts/lines.png differ diff --git a/03.charts/npr-side-by-side.png b/03.charts/npr-side-by-side.png new file mode 100644 index 0000000..8d231c3 Binary files /dev/null and b/03.charts/npr-side-by-side.png differ diff --git a/03.charts/nyt1.png b/03.charts/nyt1.png new file mode 100644 index 0000000..9ca22ae Binary files /dev/null and b/03.charts/nyt1.png differ diff --git a/03.charts/nyt2.png b/03.charts/nyt2.png new file mode 100644 index 0000000..ab092da Binary files /dev/null and b/03.charts/nyt2.png differ diff --git a/03.charts/pie-comparison.png b/03.charts/pie-comparison.png new file mode 100644 index 0000000..bcc412b Binary files /dev/null and b/03.charts/pie-comparison.png differ diff --git a/03.charts/pie-many.avif b/03.charts/pie-many.avif new file mode 100644 index 0000000..33a2cc0 Binary files /dev/null and b/03.charts/pie-many.avif differ diff --git a/03.charts/pyramid.png b/03.charts/pyramid.png new file mode 100644 index 0000000..d177e8a Binary files /dev/null and b/03.charts/pyramid.png differ diff --git a/03.charts/rankline.png b/03.charts/rankline.png new file mode 100644 index 0000000..8f94ce3 Binary files /dev/null and b/03.charts/rankline.png differ diff --git a/03.charts/slides.html b/03.charts/slides.html index 9c10b79..79facb6 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 jk93wtcnhlsok7gaorv2w746ca0cpbzxbmibphhu7ou */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 hzd964qpq0r7pxj5yjx4vi6afu9u6zji3fkt1frt113k */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,25 +25,25 @@
  • 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.
  • Maximize the data-ink ratio.
    • -
  • Minimize chart-junk.
    • +
  • Minimize chart junk.
  • Aim for high chart density, consider small multiples.
  • 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)

-
+
  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,7 @@ 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.

-
+

Data-Ink Ratio

  • Data-ink: Ink (pixels) used to show data.
    • @@ -81,50 +81,153 @@ 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

+
+

Bar Charts & Histograms

+
    +
  • X/Y: Nominal (Binned Numerical - Histogram)
    • +
  • Y/X: Quantitative
    • +
+

+
+

Line & Area Charts

-

Sparklines

-

Strip Plot & Heatmap

+
    +
  • X: Temporal
    • +
  • Y: Quantitative
    • +
+
+
+

When to use stacked area charts?

+ +

Combined X axis variable has meaning.

+
+
+

Heatmap

+ +
    +
  • X & Y: Quantitative or Nominal
    • +
  • Color: Quantitative
    • +
  • mark_rect
    • +
+
+
+

Strip Plot

+ +
    +
  • Y: Nominal
    • +
  • X: Temporal or Quantitative
    • +
  • Color: Optional (any type)
    • +
  • mark_tick
    • +
+
+

Pie / Donut / Radial Charts

-

Ranked Line Chart

-

Scatterplots

+

+

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.

+
+
+


+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

+

+
    +
  • X / Y: Quantitative
    • +
+

Bubble charts use size as a 3rd dimension.

+
+

Small Multiples / Faceting

+

+ +

Most useful when there is a nominal variable that charts vary on.

+
+

Distributions

Map Basics

-
-
+

When & How to Break the Rules

-

2 Examples: Hex / Grid maps ... Word Clouds

-

Narrative-supporting graphics

-

When it's OK to use 3D

+

When in doubt...

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

Case Study: Two Innovations

+

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

+
    +
  • Hex/Grid Maps
    • +
  • 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.

+
+

Acknowledgements & References

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

.0000003%

.0000003%

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

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 45f0e6f..a9ca538 100644 --- a/03.charts/slides.md +++ b/03.charts/slides.md @@ -28,7 +28,7 @@ theme: custom-theme - Graphical Integrity: Above all else, show the data. - Maximize the data-ink ratio. -- Minimize chart-junk. +- Minimize chart junk. - Aim for high chart density, consider *small multiples*. - Revision & Editing are essential. @@ -113,36 +113,177 @@ via junkcharts.typepad.com ## Common Chart Types +--- + ### Bar Charts & Histograms +- X/Y: Nominal (Binned Numerical - Histogram) +- Y/X: Quantitative + +![](bars.png) + +--- + ### Line & Area Charts -### Sparklines +- X: Temporal +- Y: Quantitative -### Strip Plot & Heatmap + +![bg right width:600px](lines.png) + +--- + +### When to use stacked area charts? + +![bg left width:600px](area.png) + +Combined X axis variable has meaning. + +--- + +### Heatmap + +![bg right width:600px](heatmap.png) + +- X & Y: Quantitative or Nominal +- Color: Quantitative +- `mark_rect` + +--- + +### Strip Plot + +![bg left width:600px](strip.png) + +- Y: Nominal +- X: Temporal or Quantitative +- Color: Optional (any type) +- `mark_tick` + +--- ### Pie / Donut / Radial Charts -### Ranked Line Chart +![](pyramid.png) -### Scatterplots +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. + +--- + +![](pie-comparison.png) +https://www.storytellingwithdata.com/blog/2020/5/14/what-is-a-pie-chart + +--- + +### Bump / Rank Line Chart + +![width:200px left](rankline.png) + +![width:500px left](bump.png) + +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 + +![](bubble.png) + +- X / Y: Quantitative + +Bubble charts use size as a 3rd dimension. + +--- ### Small Multiples / Faceting +![](facet.png) + +![bg right](small-maps.png) + + + +Most useful when there is a nominal variable that charts vary on. + +--- + ### Distributions ### Map Basics -### Altair Gallery Miscellania - --- ## When & How to Break the Rules -### 2 Examples: Hex / Grid maps ... Word Clouds -### Narrative-supporting graphics +**When in doubt...** + +- 95% of visualizations should be some variation of the common types. +- Focus on Tufte's rules for clarity. + +--- + +### Case Study: Two Innovations + +Two visualization types that have had their moment in the past 10-15 years: + +- Hex/Grid Maps +- Word Clouds + +--- + +## Grid Map + +![](npr-side-by-side.png) + +Introduced in + + + + +--- + +## Word Cloud + +![](word-cloud.jpg) + + +--- + +![bg left](nyt1.png) +![](nyt2.png) + +Derived from same data as word cloud. + +source: NYTimes via https://www.niemanlab.org/2011/10/word-clouds-considered-harmful/ + +--- + +## Narrative-supporting graphics + +![bg left width:500px](crochet.jpg) + +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. + +![bg right width:700px](lhc.png) + --- ## Acknowledgements & References @@ -150,3 +291,6 @@ via junkcharts.typepad.com Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials. - https://www2.cs.uh.edu/~ceick/NO/COSC3337-DV2.pdf +- Images from Tufte's Visual Display of Quantitative Information +- Images from Altair + diff --git a/03.charts/small-maps.png b/03.charts/small-maps.png new file mode 100644 index 0000000..87194a1 Binary files /dev/null and b/03.charts/small-maps.png differ diff --git a/03.charts/strip.png b/03.charts/strip.png new file mode 100644 index 0000000..1c52a12 Binary files /dev/null and b/03.charts/strip.png differ diff --git a/03.charts/word-cloud.jpg b/03.charts/word-cloud.jpg new file mode 100644 index 0000000..8ddb874 Binary files /dev/null and b/03.charts/word-cloud.jpg differ diff --git a/03.charts/word-cloud.png b/03.charts/word-cloud.png new file mode 100644 index 0000000..59c7387 Binary files /dev/null and b/03.charts/word-cloud.png differ