dataviz

Du Bois Viz Challenge 2024: Plate 1

Celebrating a pioneer of data visualization

23 Apr 2024

Please Note: The language used in this piece comes directly from W.E.B. Du Bois' scientific study in 1900. You can view the original piece here. I am torn about reproducing language that could be painful for people to read, but I thought altering the wording would be a disservice to the work. I find the language of Du Bois' work to be a powerful reminder, especially for readers in a modern context, that racial inequality has a long tenure in our societies and institutions. However, race is a difficult subject for white people like myself to navigate with appropriate awareness and compassion, so please reach out with any thoughts or feedback on this work.

The Georgia Negro.

A Social Study By W.E. Burghardt Du Bois

≣ Routes of the African slave trade.

✪ The State of Georgia.

This case is devoted to a series of charts, maps and other devi–ces designed to illustrate the development of the American Negro in a single typical state of the United States.

"The problem of the 20th century is the problem of the color-line."

Source: Trans-Atlantic Slave Trade Database

This is part of the Du Bois Visualization Challenge - an annual challenge which honours the social scientist and data visualization pioneer, W.E.B. Du Bois. The full details of this year’s challenge can be found on GitHub. I learned about W.E.B. Du Bois when these challenges started a few years ago and then I happened upon a book about his work in a museum in Washington D.C. - Visualizing Black America. This challenge was an excellent opportunity to practice my skills with Svelte and D3, while celebrating the work of a data visualization pioneer.

Process

I started out using code from Connor Rothschild’s lesson Create an Interactive Globe Visualization With Svelte + D3.js. This included using an SVG circle as the background of the globe and using the d3-geo and TopoJSON libraries to render countries’ borders and shapes. The development process went something along the lines of:

Create the twin globes
Prepare the data
Draw the paths
Draw the regions

Create the twin globes

The first challenge was creating the twin globes Du Bois uses to show the two different sides of the world. I used two SVG circle elements, their centres placed at 25% and 75% of the chart’s width, to create the visual outline of the two globes. Next I needed to plot the countries’ borders. I tried a few different projections, but didn’t come across one which looked right. geoEquirectangular() looked very close, but I still needed to figure out how to restrict the elements to those within the two globes. To do this, I used SVG clipPath elements which were identical in size to the circles used for the two globes. For example, here is the map without clipping:

Prepare the data

The data for this challenge is provided in the GitHub repo in the routes and route-pairs CSV files. To recreate Du Bois’ map, we don’t actually need either dataset. In fact, neither dataset is even helpful for recreating Du Bois’ work (though they have inspired a future extension of this work). We need the coordinates of the 5 slave trade routes and the polygons to depict the destinations of these African slaves to the western hemisphere. This did require manual (gasp!) effort to draw custom paths and polygons and export them into JSON format. I used geojson.io to select the coordinates of the sources and destinations of each route and cross-referenced the locations in Du Bois’ visualization with the map from the Trans Atlantic Slave Trade Database.

In the future, I am hoping to extend this visual to incorporate the more granular data of individual slave trade routes.

Draw the paths

As mentioned above, I generated the JSON for the routes with an online tool. The routes look something like this:

{
      "Source": ""Western Africa"",
      "Destination": ""Brazil"",
      "coords": [
        [
          14.7587,
          -22.1929
        ],
        [
            -38.4388, -12.9200
        ]
      ]
    }

Using Svelte, I created an SVG <path> element for each route, and used the draw transition to animate the routes from their source to their destination. I still need to learn to curve the paths into arcs when using coordinates.

Draw the regions

Next I needed to draw the different regions on the plot - the dark areas for the locations African slaves were primarily transported from and to, and the lighter areas to indicate the wide reach of both the capturing and migration that occurred. I ran into an interesting problem when drawing the regions - the points of polygon geometries need to be arranged in anti-clockwise order. Unfortunately I had not adhered to this rule when creating the polygons and I didn’t really want to go back and re-do all that work. Thankfully, there is a library that will rearrange the points to be in the order you need: turf.js (also see this StackOverflow post). With this problem solved, I drew the regions and used Svelte’s fade transition on the destination shapes. This transition, in combination with the animated routes, are meant to emphasize Du Bois’ static representation of the migration of slaves beyond their initial landing point.

Mark Barrett