This video is a screen recording of the NAACP Black Progress Index interactive map. 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.
the story
In 2024, the NAACP asked my team to create a web app for their national convention which would invite attendees to explore one of their rich and complex data products: 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 goal was to design and build an intriguing and accessible web experience around this data. My teammate Jared Kohler flexed his cartography skills to make a beautiful multiscale map incorporating my calligraphy, and the two of us worked closely to design harmonious cartography and UI.
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.