This video is a screen recording of the NAACP Black Progress Index interactive map. It shows the continental United States, in which each county with data is visualized as a point. Counties with higher predicted lifespans in the Black Progress Index have larger, bright gold symbols, and those with lower predicted lifespans are visualized as smaller purple points that are less visually distinct from the dark background. As I move my mouse down the east coast of the United States, the UI shows the decreasing predicted lifespan for the counties I'm hovering over. Clicking on each county opens a chart which compares the different values used to calculate the predicted life expectancy for that county, and compares the predicted value to the actual measured life expectancy. If you're currently using a screenreader, I think you're amazing, and I'm sorry Adobe Portfolio doesn't have better accessibility tools!
I was given total creative freedom to design and build out this interactive data visualization for the NAACP National Convention, using the data from the Brookings Institute Black Progress Index. The BPI explores whether Black American life expectancy can be accurately predicted through a set of variables including math proficiency, income, and geographic distance from Facebook friends.
My teammate Jared Kohler flexed his cartography skills to make a beautiful multiscale map, and the two of us worked closely to design harmonious cartography and UI. The NAACP website is gloriously maximalist, and I took full advantage of their design motifs. Beyond colors and display fonts, we were even able to incorporate their brush-pen decorative details into our basemap.
I built the site as a React/TS app with Vite. Implementing a smooth hovering tooltip turned out to be the most challenging feature, as that behavior isn't natively supported in the ArcGIS Maps SDK for JS. Carto guru Tommy Fauvell told me after the fact that developers used to have to create fake feature layers out of vanilla SVGs to achieve this effect-- thanks to advancements in the SDK, I was able to knock it out with the Web Animation API and CSS positioning.