Negro Population of Georgia by Counties, 1870-1880 (Plate 6)

Challenge #1

14 Jun 2024

How it's made

This plate maps the black population of Georgia’s counties in 1870 and 1880 and places them diagonally across from each other in separate rows to show the changes between the two time periods. The population size in each county is denoted with colour and the legend is split between the two rows. To make the plate, I used two rows containing a map and legend (each legend only shows one half the items on the colour scale). I used photoshop to remove the content but keep the old paper as the background. This did feel like cheating from a recreation standpoint, but it does look nicer than the CSS solution in plate #1. The map is created in an SVG element using a projection function and path generator from d3-geo. Using Svelte’s {#each} block, I create a path element for each county that sets the fill using a colour scale from d3-scale. The legend is created with the Legend component which takes the colour scale, and a starting and stopping index to slice the legend to mimic the original piece.

How I want to make it better

First and foremost, I want to add a tooltip. It would also be nice to add a filter functionality that allows users to select a legend item and filter to those population segments. Another interaction that could be helpful would be, upon the user clicking a county, highlighting the same county on both maps and identifying the change in population category.

With regards to the style, I would like to learn to recreate the old paper aesthetic with purely CSS/HTML. I would also like to recreate the marker line texture that is present in Du Bois’ plates.