diff --git a/04.critique/bikeshed.png b/04.critique/bikeshed.png new file mode 100644 index 0000000..c9f4128 Binary files /dev/null and b/04.critique/bikeshed.png differ diff --git a/04.critique/slides.html b/04.critique/slides.html index e73c7aa..1622221 100644 --- a/04.critique/slides.html +++ b/04.critique/slides.html @@ -13,18 +13,19 @@ /* custom-theme.css */ /* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1} -/* @theme 77steilngbo5x5285jqdqon1u1c6dwsolrini7ejgxd */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 5z7zz5hzu45dbx4z8ryqm4dsgbwfgnt428b18woeulq */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%}

Critique / Models of Good Data Visualization

-
+

This Week

  • Review common rules & mistakes.
  • What makes a useful critique?
    • -
  • Look at a lot of data viz examples.
    • +
  • Look at a lot of examples.
+

Like any kind of visual art, creating good visualizations takes learning to see.

-
+

Reminder: Color

  • Appropriate & consistent use of color for data type.
    • @@ -33,26 +34,20 @@
  • Accessibility: contrast, color vision deficiency, legibility
-
+

Reminder: Data / Chart Integrity

  • Data variation, not design variation.
  • Maximize data-ink ratio.
    • -
  • Remove all chart junk. (gridlines, shadows, 3d effects)
    • -
  • Context: title, axes, units, important events.
    • +
  • Strip out chart junk. (gridlines, shadows, 3d effects)
    • +
  • Add Context: title, axes, units, important events.
  • Alignment/Proximity: make comparisons easy & avoid misleading choices like changing axes between two otherwise identical graphs
-
+

What to Look For

Expressiveness: Does every choice further the understanding of the data?

-
    -
  • Example: Consistent and clear channel mappings.
    • -

Effectiveness: Can audience decipher data and meaning quickly?

-
    -
  • Example: Highlighting of primary elements.
    • -

Non-Data Elements

  • Title, Label, Caption, Data Source, Annotations
    • @@ -60,7 +55,7 @@
  • Appropriate use of grouping/sorting.
-
+

Critique

  • What is the purpose of critique?
    • @@ -68,10 +63,10 @@
  • Taking Critique
-
+

Purpose of Critique

You are the expert on your data source, and it can be challenging to look at things through the eyes of your audience.

-

Also it is likely that you've stared at variations of the same chart for an hour or more, easily overlooking small flaws.

+

It is likely that you've stared at variations of the same chart for an hour or more, easily overlooking small flaws.

Extra eyes will help you identify what people are actually taking away from your graphic:

  • Highlight accessibility issues.
    • @@ -80,37 +75,40 @@
  • Consider alternative solutions.
-
+

Giving Critique

Be specific. If your first impulse is "I like it/I don't like it" go deeper and connect with why. Does it violate principles? Does a color choice stress your eye?

Give your interpretation. What do you take away from the graphic as-is. Where is your eye drawn? Check your understanding against intention.

Balance positives and negatives. Find things that are working and incorporate those into feedback as well. It's easier on recipient but also important so that they don't get removed in revision.

Offer alternatives. What could be done differently?

-
    -
  • "I like..." - point out what works.
    • -
  • "I wish..." - frame negative feedback as ways that it could improve for audience.
    • -
  • "What if..." - new ideas and alternatives to consider.
    • -
+
+
+

Critique Language

+

"I like..." - point out what works.
+"I wish..." - frame negative feedback as ways that it could improve for audience.
+"What if..." - new ideas and alternatives to consider.

Be respectful. Be mindful of your tone and word choice.

-
+

What to Avoid (Giving Critique)

Comments on creator. "You always...", "What were you thinking?", etc. Stay focused on the work.

Bike-shedding. Suggesting arbitrary changes based on your preferences. "If I made this, I'd have chosen green."

+ +

https://bikeshed.org

-
+

Receiving Critique

Listen without defensiveness. Do not interrupt initial feedback to defend/clarify your intentions, doing so will lead to missing important first impressions.

Separate yourself from the work. Remember the context you are doing this in, your peer is giving you their time to improve your work.

Ask clarifying questions. If you do not understand why their interpretation is what it is, ask! Take the opportunity to learn more about what a new viewer will see.

Look for patterns. Feedback may be unique or contradictory. Focus on trends in the feedback that point to common issues.

-
+

What to Avoid (When Receiving Critique)

Convincing. If someone misunderstood your viz, others will too. There's nothing to be gained by convincing them they actually do understand it.

Assuming all feedback is correct. If you disagree with a piece of feedback, it is OK to thank the person for it and not incorporate that into your changes if you feel strongly it was off base. There's generally no need to debate them on the spot however.

-
+

Suggested Peer Critique Process

  1. @@ -124,7 +122,7 @@
-
+

  1. Offer constructive criticisms and other suggestions for improvements and things to try. Author should mostly listen at this point, take notes, avoid the urge to respond to each piece of feedback as offered.

    @@ -141,25 +139,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+

Practice Critique

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Readings & Sources

Crimean War via Livia, <https://edstem.org/us/courses/68015/discussion/5428917>

1% of 1% via <https://sunlightfoundation.com/2013/06/26/1pct_of_the_1pct_polarization/>

Chicago Racial Segregation via Miguel, <https://edstem.org/us/courses/68015/discussion/5441644>

Grammys via Ruben, <https://edstem.org/us/courses/68015/discussion/5452397>

DiCaprio via Amber

Will's NC Seats via <https://projects.fivethirtyeight.com/partisan-gerrymandering-north-carolina/>

KFC from Minh

hungarian immigration from Dorka

military from Tori

part 2 of military expenditure

NZ

gender

ny radial

tx radial

iraq

inequality by Yi-Huai

Fox from Andrew

tribes in texas from Echo

Crimean War via Livia, <https://edstem.org/us/courses/68015/discussion/5428917> + +author: Florence Nightingale + +- legend? +- labeling on the chart itself?

DuBois hourglass + +Pronounced De-bois + +not a pie chart! meant for direct comparison between the two types + +today this would be misread because people have seen pie charts

Chicago Racial Segregation via Miguel, <https://edstem.org/us/courses/68015/discussion/5441644> + +type: map

DuBois slaves visualization

eye color + +uncertainity +why are some slices larger than others? +does the eye in the middle mislead?

1% of 1% via <https://sunlightfoundation.com/2013/06/26/1pct_of_the_1pct_polarization/>

Grammys via Ruben, <https://edstem.org/us/courses/68015/discussion/5452397>

DiCaprio via Amber

Will's NC Seats via <https://projects.fivethirtyeight.com/partisan-gerrymandering-north-carolina/>

KFC from Minh

hungarian immigration from Dorka

military from Tori

part 2 of military expenditure

NZ

gender

ny radial

tx radial

iraq

inequality by Yi-Huai

Fox from Andrew

tribes in texas from Echo

github +two issues: scale is dependent on person's max commits +more importantly: what we choose to visualize has an effect

\ No newline at end of file diff --git a/04.critique/slides.md b/04.critique/slides.md index bb14ef3..b9ba5af 100644 --- a/04.critique/slides.md +++ b/04.critique/slides.md @@ -5,7 +5,10 @@ - Review common rules & mistakes. - What makes a useful critique? -- Look at a lot of data viz examples. +- **Look at a lot of examples.** + +Like any kind of visual art, creating good visualizations takes *learning to see*. + --- @@ -22,8 +25,8 @@ - Data variation, not design variation. - Maximize data-ink ratio. -- Remove all chart junk. (gridlines, shadows, 3d effects) -- Context: title, axes, units, important events. +- Strip out chart junk. (gridlines, shadows, 3d effects) +- Add Context: title, axes, units, important events. - Alignment/Proximity: make comparisons easy & avoid misleading choices like changing axes between two otherwise identical graphs --- @@ -31,10 +34,8 @@ ## What to Look For **Expressiveness**: Does every choice further the understanding of the data? -- Example: Consistent and clear channel mappings. **Effectiveness**: Can audience decipher data and meaning quickly? -- Example: Highlighting of primary elements. **Non-Data Elements** - Title, Label, Caption, Data Source, Annotations @@ -56,7 +57,7 @@ You are the expert on your data source, and it can be challenging to look at things through the eyes of your audience. -Also it is likely that you've stared at variations of the same chart for an hour or more, easily overlooking small flaws. +It is likely that you've stared at variations of the same chart for an hour or more, easily overlooking small flaws. Extra eyes will help you identify what people are actually taking away from your graphic: @@ -77,9 +78,13 @@ Extra eyes will help you identify what people are actually taking away from your **Offer alternatives.** What could be done differently? -- *"I like..."* - point out what works. -- *"I wish..."* - frame negative feedback as ways that it could improve for audience. -- *"What if..."* - new ideas and alternatives to consider. +--- + +## Critique Language + +**"I like..."** - point out what works. +**"I wish..."** - frame negative feedback as ways that it could improve for audience. +**"What if..."** - new ideas and alternatives to consider. **Be respectful.** Be mindful of your tone and word choice. @@ -91,6 +96,10 @@ Extra eyes will help you identify what people are actually taking away from your **Bike-shedding.** Suggesting *arbitrary* changes based on your preferences. "If I made this, I'd have chosen green." +![bg right height:200px](bikeshed.png) + + + --- ## Receiving Critique @@ -133,20 +142,73 @@ Extra eyes will help you identify what people are actually taking away from your --- -![bg fit](nightingale-mortality.jpg) - - +## Practice Critique --- -![bg fit](lee-1pct.png) - +![bg fit](nightingale-mortality.jpg) + + + +--- + +![bg fit](dubois-hourglass.png) + + --- ![bg fit](chicago-segregation.png) - + + +--- + +![bg fit](dubois-slaves.jpg) + + + +--- + +![bg fit](eye-colors.webp) + + + +--- + +![bg fit](lee-1pct.png) + + --- @@ -229,29 +291,18 @@ Extra eyes will help you identify what people are actually taking away from your ---- - -![bg fit](eye-colors.webp) - - - ---- - -![bg fit](dubois-slaves.jpg) - - - ---- - -![bg fit](dubois-hourglass.jpg) - - --- ![bg fit](github.png) - + ---