Add initial content

R/slide-things.R

@@ -0,0 +1,49 @@
+slide_buttons <- function(slide_id) {
+  glue::glue('<p class="buttons"><a class="btn btn-danger" target="_blank" href="{slide_id}.html"><i class="fa-solid fa-arrow-up-right-from-square"></i> View all slides in new window</a> <a class="btn btn-danger" target="_blank" href="{slide_id}.pdf" role="button"><i class="fa-solid fa-file-pdf"></i> Download PDF of all slides</a></p>')
+}
+
+slide_tabs <- function(slide_df, slide_url) {
+  slugify <- function(x) {
+    x <- stringr::str_replace_all(x, "[^[:alnum:] ]", "")
+    x <- stringr::str_replace_all(x, " ", "-")
+    x <- stringr::str_to_lower(x)
+    return(x)
+  }
+
+  nav_li <- function(title, selected = FALSE) {
+    select_flag <- ifelse(selected, "true", "false")
+    active_flag <- ifelse(selected, " active", "")
+    out <- glue::glue('<li class="nav-item">\n',
+                      '<a class="nav-link{active_flag}" id="{slugify(title)}-tab" data-toggle="tab" ',
+                      'href="#{slugify(title)}" role="tab" ',
+                      'aria-controls="{slugify(title)}" aria-selected="{select_flag}">',
+                      '{title}</a>\n',
+                      '</li>')
+    return(out)
+  }
+
+  tab_pane <- function(title, slide, active, url) {
+    select_flag <- ifelse(active, " show active", "")
+    out <- glue::glue('<div class="tab-pane fade{select_flag}" id="{slugify(title)}" ',
+                      'role="tabpanel" aria-labelledby="{slugify(title)}-tab">\n',
+                      '<div class="ratio ratio-16x9">\n',
+                      '<iframe src="{url}#{slide}"></iframe>\n',
+                      '</div>\n</div>')
+    return(out)
+  }
+
+  sections <- dplyr::mutate(
+    slide_df,
+    li = purrr::pmap_chr(list(title, active), nav_li),
+    pane = purrr::pmap_chr(list(title, slide, active, slide_url), tab_pane)
+  )
+
+  tabset <- paste('<ul class="nav nav-tabs" id="slide-tabs" role="tablist">',
+                  paste(sections$li, collapse = "\n"),
+                  '</ul>',
+                  '<div class="tab-content" id="slide-tabs">',
+                  paste(sections$pane, collapse = "\n"),
+                  '</div>', sep = "\n")
+
+  cat(tabset)
+}

R/youtube-playlist.R

@@ -0,0 +1,27 @@
+youtube_list <- function(video_df, playlist_id, example = FALSE) {
+  if (example) {
+    intro_p <- glue::glue("There's a set of videos that walks through each section below. To make it easier for you to jump around the video examples, I cut the long video into smaller pieces and included them all in [one YouTube playlist](https://www.youtube.com/playlist?list={playlist_id}).")
+  } else {
+    intro_p <- glue::glue("Videos for each section of the lecture are [available at this YouTube playlist](https://www.youtube.com/playlist?list={playlist_id}).")
+  }
+
+  videos_in_list <- dplyr::mutate(
+    video_df,
+    li = purrr::map2_chr(
+      title, youtube_id, ~{
+        glue::glue("- [{.x}](https://www.youtube.com/watch?v={.y}&list={playlist_id})")
+      })
+  )
+
+  video_embed <- glue::glue('<div class="ratio ratio-16x9">
+<iframe src="https://www.youtube.com/embed/playlist?list={playlist_id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>')
+
+  final <- paste(intro_p,
+                 paste(videos_in_list$li, collapse = "\n"),
+                 "You can also watch the playlist (and skip around to different sections) here:",
+                 video_embed,
+                 sep = "\n\n")
+
+  cat(final)
+}

_quarto.yml

@@ -52,37 +52,41 @@ website:
         - section: "Overview"
           contents:
             - content/index.qmd
-        - section: "Capitalism, markets, and public policy"
+        - section: "Foundations"
           contents:
-            - text: "1: Capitalism and measurement"
+            - text: "1: Truth, beauty, and data + the tidyverse"
               file: content/01-content.qmd
-            - text: "2: Governments and institutions"
+            - text: "2: Graphic design"
               file: content/02-content.qmd
-            - text: "3: Social interactions and economic outcomes"
+            - text: "3: Mapping data to graphics"
               file: content/03-content.qmd
-            - text: "4: Fairness and efficiency"
-              file: content/04-content.qmd
-        - section: "Economic models"
+        - section: "Core types of graphics"
           contents:
-            - text: "5–6: Work, wellbeing, and scarcity"
+            - text: "4: Amounts and proportions"
+              file: content/04-content.qmd
+            - text: "5: Themes"
               file: content/05-content.qmd
-            - text: "7–8: The firm"
+            - text: "6: Uncertainty"
+              file: content/06-content.qmd
+            - text: "7: Relationships"
               file: content/07-content.qmd
-            - text: "9–10: Firms and markets"
+            - text: "8: Comparisons"
+              file: content/08-content.qmd
+            - text: "9: Annotations"
               file: content/09-content.qmd
-        - section: "Market failures and institutions"
+        - section: "Special applications"
           contents:
-            - text: "11: Institutions, power, and inequality"
+            - text: "10: Interactivity"
+              file: content/10-content.qmd
+            - text: "11: Time"
               file: content/11-content.qmd
-            - text: "12: Market failures"
+            - text: "12: Space"
               file: content/12-content.qmd
-            - text: "13: When governments go wrong"
+            - text: "13: Text"
               file: content/13-content.qmd
-            - text: "14: Institutional alternatives"
+            - text: "14: Enhancing graphics"
               file: content/14-content.qmd
-        - section: "Conclusions"
-          contents:
-            - text: "15: Markets, public policy, and public administration"
+            - text: "15: Truth, beauty, and data revisited"
               file: content/15-content.qmd
 
     - title: "Examples"

content/01-content.qmd

@@ -0,0 +1,61 @@
+---
+title: "Truth, beauty, and data + R and tidyverse"
+date: "2022-06-06"
+date_end: "2022-06-10"
+---
+
+```{r slides-videos, echo=FALSE, include=FALSE}
+source(here::here("R", "slide-things.R"))
+source(here::here("R", "youtube-playlist.R"))
+
+playlist_id <- "PLS6tnpTr39sHom5NPjrZAeMTYS5orTl9c"
+
+slide_details <- tibble::tribble(
+  ~youtube_id,   ~title, ~slide, ~active,
+  "tVcomh6jQ2Y", "Introduction", "1", TRUE,
+  "UbQ8IW3UI9E", "Facts, truth, and beauty", "facts-truth-beauty", FALSE,
+  "DldFVc08YY4", "Data, truth, and beauty", "data-truth-beauty", FALSE,
+  "6MTC9uGMNFg", "Beautiful visualizations", "beautiful-visualizations", FALSE,
+  "_TclSs8iLMY", "Class details", "class-details", FALSE
+)
+```
+
+## Readings
+
+- The [syllabus](/syllabus/), [content](/content/), [lessons](/lesson/), [examples](/example/), and [assignments](/assigment/) pages for this class
+- <i class="fas fa-podcast"></i> Tim Harford, ["Florence Nightingale: Data Viz Pioneer,"](https://99percentinvisible.org/episode/florence-nightingale-data-viz-pioneer/) *99% Invisible*, episode 433, March 2, 2021 (*this is a podcast; listen to it in your browser or use an app like [Overcast](https://overcast.fm/) or [Spotify](https://spotify.com/)*)
+- <i class="fas fa-book"></i> [Chapter 1](http://socviz.co/lookatdata.html) in Kieran Healy, *Data Visualization* [@Healy:2018]
+- <i class="fas fa-book"></i> Chapters 2 and 3 in Alberto Cairo, *The Truthful Art* [@Cairo:2016] (*skim the introduction and chapter 1*)
+- <i class="fas fa-external-link-square-alt"></i> [Study: Charts change hearts and minds better than words do](https://www.washingtonpost.com/news/wonk/wp/2018/06/15/study-charts-change-hearts-and-minds-better-than-words-do/?utm_term=.4474599c0d5e)
+
+
+### Questions to reflect on
+
+*(Remember, you don't need to answer all of these—or even any of them! These are just here to help guide your thinking.)*
+
+- How do we know what is true?
+- Are facts truth?
+- Why do we visualize data?
+- What makes a great visualization?
+- How do you choose which kind of visualization to use?
+
+
+## Slides
+
+The slides for today's lesson are available online as an HTML file. Use the buttons below to open the slides either as an interactive website or as a static PDF (for printing or storing for later). You can also click in the slides below and navigate through them with your left and right arrow keys.
+
+```{r show-slide-tabs, echo=FALSE, results="asis"}
+slide_buttons("/slides/01-slides")
+slide_tabs(slide_details, "/slides/01-slides.html")
+```
+
+:::{.callout-tip}
+**Fun fact**: If you type <kbd>?</kbd> (or <kbd>shift</kbd> + <kbd>/</kbd>) while going through the slides, you can see a list of special slide-specific commands.
+:::
+
+
+## Videos
+
+```{r show-youtube-list, echo=FALSE, results="asis"}
+youtube_list(slide_details, playlist_id)
+```

content/02-content.qmd

@@ -0,0 +1,59 @@
+---
+title: "Graphic design"
+date: "2022-06-06"
+date_end: "2022-06-10"
+---
+
+```{r slides-videos, echo=FALSE, include=FALSE}
+source(here::here("R", "slide-things.R"))
+source(here::here("R", "youtube-playlist.R"))
+
+playlist_id <- "PLS6tnpTr39sEznTwka0EmWfkkphjncq7U"
+
+slide_details <- tibble::tribble(
+  ~youtube_id,   ~title, ~slide, ~active,
+  "ny7HYqyVNp4", "Introduction", "1", TRUE,
+  "SXW0RtenLgk", "Truth, beauty, stories, design", "truth-beauty-design", FALSE,
+  "iuEwh2EnIcw", "Graphic design and CRAP", "design-crap", FALSE,
+  "j0aqBmRV66A", "Image types", "image-types", FALSE
+)
+```
+
+## Readings
+
+- <i class="fas fa-book"></i> Chapter 5 in Alberto Cairo, *The Truthful Art* [@Cairo:2016]
+- <i class="fas fa-book"></i> [Chapter 4](https://clauswilke.com/dataviz/color-basics.html) and [Chapter 27](https://clauswilke.com/dataviz/image-file-formats.html) in Claus Wilke, *Fundamentals of Data Visualization* [@Wilke:2018]
+- <i class="fas fa-external-link-square-alt"></i> Cédric Scherer, ["Colors and emotions in data visualization"](https://blog.datawrapper.de/colors-for-data-vis-style-guides/)
+- <i class="fas fa-external-link-square-alt"></i> Lisa Charlotte Muth, ["A detailed guide to colors in data vis style guides"](https://www.storytellingwithdata.com/blog/2021/6/8/colors-and-emotions-in-data-visualization). You can skim this—this is a good resource for future you.
+- <i class="far fa-file-pdf"></i> [Summary of CRAP graphic design principles](http://www.presentationzen.com/chapter6_spread.pdf) from Garr Reynolds, *Presentation Zen* [@Reynolds:2008]. These principles are from Robin Williams' [*The Non-Designer's Design & Type Books*](https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151) [@Williams:2008], which you should really get if you're interested in doing anything design-related ever. Her stuff is life-changing.
+- <i class="fas fa-external-link-square-alt"></i> [Typography in ten minutes](https://practicaltypography.com/typography-in-ten-minutes.html). The rest of the *Practical Typography* book is phenomenal and you'd be remiss if you didn't read the whole thing and bookmark it for life, but for now just read this quick summary.
+- <i class="fas fa-external-link-square-alt"></i> ["What's the Difference Between JPG, PNG, and GIF?"](https://gizmodo.com/5656669/whats-the-difference-between-jpg-png-and-gif)
+- <i class="fas fa-external-link-square-alt"></i> ["File formats explained"](https://www.theglowstudio.com/file-formats-explained/)
+
+### Questions to reflect on
+
+*(Remember, you don't need to answer all of these—or even any of them! These are just here to help guide your thinking.)*
+
+- Why does graphic design matter when conveying truth?
+- What makes something well designed (vs. poorly designed)?
+
+
+## Slides
+
+The slides for today's lesson are available online as an HTML file. Use the buttons below to open the slides either as an interactive website or as a static PDF (for printing or storing for later). You can also click in the slides below and navigate through them with your left and right arrow keys.
+
+```{r show-slide-tabs, echo=FALSE, results="asis"}
+slide_buttons("/slides/02-slides")
+slide_tabs(slide_details, "/slides/02-slides.html")
+```
+
+:::{.callout-tip}
+**Fun fact**: If you type <kbd>?</kbd> (or <kbd>shift</kbd> + <kbd>/</kbd>) while going through the slides, you can see a list of special slide-specific commands.
+:::
+
+
+## Videos
+
+```{r show-youtube-list, echo=FALSE, results="asis"}
+youtube_list(slide_details, playlist_id)
+```

content/03-content.qmd

@@ -0,0 +1,60 @@
+---
+title: "Mapping data to graphics"
+date: "2022-06-13"
+date_end: "2022-06-17"
+---
+
+```{r slides-videos, echo=FALSE, include=FALSE}
+source(here::here("R", "slide-things.R"))
+source(here::here("R", "youtube-playlist.R"))
+
+playlist_id <- "PLS6tnpTr39sF-mpzuaQaDw5VoOgp359Z9"
+
+slide_details <- tibble::tribble(
+  ~youtube_id,   ~title, ~slide, ~active,
+  "ukDGvD3XXHg", "Introduction", "1", TRUE,
+  "S56YAocj-hk", "Data, aesthetics, and the grammar of graphics", "grammar-of-graphics", FALSE,
+  "DVr8ubJ7JHk", "Grammatical layers", "grammatical-layers", FALSE,
+  "pfYkWZcTHAM", "Aesthetics in extra dimensions", "extra-dimensions", FALSE,
+  "KHpZ1oa_99g", "Tidy data", "tidy-data", FALSE
+)
+```
+
+## Readings
+
+- <i class="fab fa-youtube"></i> Hans Rosling, ["200 Countries, 200 Years, 4 Minutes"](https://www.youtube.com/watch?v=jbkSRLYSojo)
+- <i class="fas fa-book"></i> [Chapter 2](https://clauswilke.com/dataviz/aesthetic-mapping.html) in Claus Wilke, *Fundamentals of Data Visualization* [@Wilke:2018]
+- <i class="fas fa-book"></i> [Chapter 3](http://socviz.co/makeplot.html) in Kieran Healy, *Data Visualization* [@Healy:2018]
+
+### Questions to reflect on
+
+*(Remember, you don't need to answer all of these—or even any of them! These are just here to help guide your thinking.)*
+
+- Why is it important to visualize variables and data?
+- What does it mean to map data to graph aesthetics?
+- What data was mapped to which aesthetics in Rosling's video?
+
+## Other resources
+
+[This tutorial by Cédric Scherer](https://www.cedricscherer.com/2019/05/17/the-evolution-of-a-ggplot-ep.-1/) is an excellent demonstration of the grammar of graphics and the sequential nature of building up a plot layer-by-layer.
+
+
+## Slides
+
+The slides for today's lesson are available online as an HTML file. Use the buttons below to open the slides either as an interactive website or as a static PDF (for printing or storing for later). You can also click in the slides below and navigate through them with your left and right arrow keys.
+
+```{r show-slide-tabs, echo=FALSE, results="asis"}
+slide_buttons("/slides/03-slides")
+slide_tabs(slide_details, "/slides/03-slides.html")
+```
+
+:::{.callout-tip}
+**Fun fact**: If you type <kbd>?</kbd> (or <kbd>shift</kbd> + <kbd>/</kbd>) while going through the slides, you can see a list of special slide-specific commands.
+:::
+
+
+## Videos
+
+```{r show-youtube-list, echo=FALSE, results="asis"}
+youtube_list(slide_details, playlist_id)
+```