Recreating W.E.B Du Bois’s Data Portraits

Anthony Starks
Published in
9 min readAug 21, 2019

Background and Motivation

In May 2017, I attended a talk: “Historical development of W.E.B. Du Bois’s graphical narrative” at the Data Visualization New York meetup. As an African-American, I was intrigued by the subject matter and fascinated by the visualization choices — especially, the now-iconic spiral charts. I made a mental note to attempt to recreate these.

In 2018, the book documenting the data portraits was published, and many others, including Nightingale editor-in-chief Jason Forrest, have written about the work (Part 1, Part 2). The time was ripe for me to take a crack at it.

Plate 51: Proportion of Slave and Free, 1790–1870, Recreation and original,

Process and Tools

The idea of the project is to re-create the visualizations with as much precision as possible, preserving the original look, colors, and layout. The principle is to respect the 120-year-old design choices, using modern digital techniques. You can think of these as covers, not re-mixes (more on that later).

When confronted with a data visualization or information display task, my tool of choice is decksh — a cross-platform little language (aka domain-specific language) for making presentation decks and information displays. Decksh creates deck markup, a device-independent markup for combining text, images, and 2D shapes on a scalable canvas that uses percentage-based layout.

Decksh uses a few simple keywords like “deck/edeck”, (begin/end of the deck) “slide/eslide”, (begin/end of a slide) “text”, “ctext”, “image” (left-aligned text, centered text, place and image) to describe the elements of the visual.

Decksh also uses the dchart package for making various kinds of charts (bar charts, dot graphs, area charts, proportional bars, waffle charts, etc.).

The general flow is:

decksh script > deck markup > output (PDF, PNG or SVG)

On my computer, each visualization (plates in the book) is created in its own directory. For example, the directory plate13 contains “color.dsh” (the decksh script)

// Plate 13: Race…

Anthony Starks

Infovis, SVG, Go Programming Language