It's a great time to build digital experiences because of the new technical possibilities that are unlocked all the time. It's particularly exciting for us at ESPN, in that we also collaborate with top-notch reporters and editors to give substance and depth to a dynamic visual story.- ESPN Team
Q: What influenced your chosen technical approach, and how did it go beyond past methods?
A: We wanted to leverage a mapping library to tell the story in a clear, precise way. Mapbox framework was our choice to do so, and this was our first-ever use of their product in storytelling. It was worth the extra work needed to get acclimated with their structure, knowing it could deliver higher-end visuals for our narrative.Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?
A: Our initial moodboard included past Mapbox executions from New York Times, Washington Post and others, along with some other mapping stories we liked. From wireframe to completed project, we built in more small text blocks and specific images, to leave room for additional reporting as well as a clearer narrative for each game.Q: What web technologies, tools, and resources did you use to develop this?
A: We gathered large Excel data files, and wrote custom node scripts to boil it down to something a front end could handle. Then we generated JSON files from the data to power our visualizations. We used Handlebars for HTML templating, Scss for better css, Babel to transpile ES6 javascript, Mapbox for mapping, and an asset pipeline. VSCode is our editor of choice. A script queried the US Census API thousands of times for the county codes in our map.When did you experience a breakthrough or an "a-ha" moment during this project?
One breakthrough moment: when the data was first displayed on the map, it was unnerving because we were still in the midst of the pandemic and could watch the spread happen so fast. While unsettling, it told us that we were telling a story that people would find impactful.