Dynamic DuBois Data Visualisation
library(tidyverse)
library(leaflet)
library(leaflet.extras2)
library(ggplot2)
library(plotly)
library(htmltools)
# dubois palette
dubois_pal <- list(
"black" = "#000000",
"brown" = "#654321",
"tan" = "#d2b48c",
"gold" = "#ffd700",
"pink" = "#ffc0cb",
"crimson" = "#dc143c",
"green" = "#00aa00",
"blue" = "#4682b4",
"purple" = "#7e6583"
)
# plotly margins
m <- list(
l = 125,
r = 125,
b = 25,
t = 25,
pad = 4
)This is a showcase for my attempts at the Du Bois Visualization Challenge: 2024. In the past I’ve explored the DuBois style in a few different ways. As part of a TidyTuesday challenge in 2021 I took the challenge literally, and recreated one of the plates as accurately as I could in {ggplot2}.
In 2023, as part of the Posit Tables Contest, I presented Tabulating DuBois - an attempt to create DuBoisian tables (with admittedly mixed success!) using {gt}.
Since I’ve moved from academia to consultancy, increasingly my outputs are interactive rather than static. This year, I’m keen to see if I can re-render the DuBois data using more interactive packages - notably {leaflet} maps and {plotly} graphs, but I’ll see if anything else comes up as I go! The rules I’m setting for myself are not dissimilar to those of Tabulating DuBois:
I’ll try to capture the spirit of the original plates. DuBois played with the medium of static data visualisation (e.g., making bars loop around, flipping axes, etc.) and I want to try to be as playful with the interactive plots where I can.
Where there’s an opportunity to do something off-piste or learn something new, I’ll take it.
I’ll do my best to follow the DuBois style guide, including using the colour palette.
This year the theme for the challenge will be organized around the colours of the Pan African flag: Challenges 1-3: red, Challenges 4-6: black, Challenges 7-9: green, Challenge 10: a combination. This document is a living one, and will be updated week-on-week as the challenge progresses.
Please note that the data used on this website was originally presented by DuBois in 1900, which means it includes the use of now-offensive terms such as “colored” and “negroes” to make reference to black Americans. These terms were used by many of the participants of the 2021 DuBois Challenge as the goal was to recreate DuBois’ original plates as accurately as possible using modern tools.
The aim of this document is not to directly recreate, but be inspired by. As the data is now presented in a new context and in a new medium, it did not feel appropriate to use these outdated terms. Black Americans are now referred to using the terms “Black” or, where relevant, “Black Americans”. DuBois’ original language can still be seen in the images and descriptions of the plates shown on this website, which are displayed unaltered and uncensored.
“Negro Population of Georgia by County”, is a choropleth map with a alternating left-right pattern, comparing the population of Black Georgians in the years 1870 and 1890. Note the decrease of lightly populated areas, with the heavily populated areas in red shifting west.
This is a map, so I’m naturally going to use {leaflet}. As we’re comparing two maps, I thought it’d be interesting to use {leaflet.extras2} to create a “side-by-side” slider. This is a bit of a departure from the original plate, but it is fun to play with the slider and see how the colours change between decades!
# read shapefile
shapes <-
sf::read_sf(
"data/georgia-1880-county-shapefile/DuBoisChallenge - Georgia Counties w 1870 & 1880 data.shp"
) |>
sf::st_transform(crs = 4326) |>
mutate(County = toupper(NHGISNAM))
# read CSV data
duboisdata <-
bind_rows(
`1870` = readr::read_csv(
"https://raw.githubusercontent.com/ajstarks/dubois-data-portraits/master/challenge/2024/challenge01/data1870.csv"
),
`1880` = readr::read_csv(
"https://raw.githubusercontent.com/ajstarks/dubois-data-portraits/master/challenge/2024/challenge01/data1880.csv"
),
.id = "year"
)
# join
shapes_plot <-
shapes |>
left_join(duboisdata, join_by(ICPSRNAM == County)) |>
sf::st_as_sf(crs = 4326)
# get color pal
pal_df <-
tribble(
~Population, ~Colour,
"> 1000", dubois_pal$green,
"1000 - 2500", dubois_pal$gold,
"2500 - 5000", dubois_pal$pink,
"5000 - 10000", dubois_pal$crimson,
"10000 - 15000", dubois_pal$tan,
"15000 - 20000", dubois_pal$brown,
"20000 - 30000", dubois_pal$purple
)
# join
shapes_plot <- left_join(shapes_plot, pal_df, join_by(Population))
# get border
sf::sf_use_s2(FALSE)
border <- summarise(shapes_plot)
# define a nice binned legend pal
breaks_pal <-
scales::col_bin(
palette = pal_df$Colour,
bins = c(0, 1000, 2500, 5000, 10000, 15000, 20000, 30000)
)
# make map
challenge1 <-
leaflet() %>%
addMapPane("left", zIndex = 0) %>%
addMapPane("right", zIndex = 0) %>%
addProviderTiles(providers$CartoDB.Positron,
layerId = "light",
options = pathOptions(pane = "left")
) |>
addProviderTiles(providers$CartoDB.Voyager,
layerId = "colour",
options = pathOptions(pane = "right")
) |>
addPolygons(
data = border,
opacity = 1,
fillOpacity = 0,
color = "black", fillColor = "white"
) |>
addPolygons(
data = filter(shapes_plot, year == 1870),
fillColor = ~Colour,
opacity = 1,
fillOpacity = 3 / 4,
weight = 0.5,
color = "black",
options = pathOptions(pane = "left")
) |>
addPolygons(
data = filter(shapes_plot, year == 1880),
fillColor = ~Colour,
opacity = 1,
fillOpacity = 3 / 4,
weight = 0.5,
color = "black",
options = pathOptions(pane = "right")
) |>
addSidebyside(
layerId = "sidecontrols",
rightId = "colour",
leftId = "light"
) |>
addControl(html = "<b>1870</b>", position = "bottomleft") |>
addControl(html = "<b>1880</b>", position = "bottomright") |>
addLegend(
pal = breaks_pal,
values = c(0, 30000),
opacity = 1,
title = toupper("Black Population<br>of Georgia<br>by Counties .")
)