You can view the full story and interactive graphics for this piece here. I created this piece in a Visual Storytelling for Design class I took fall of my second year at Northeastern. It's one of my favorites, not only because of the story we were writing, but also because of the multiple design aspects utilized. The entirety of the piece was coded by me in HTML, using CSS and some D3, along with Tableau for multiple data visualizations. 
The piece, which is about the history of cleaning up Boston's stereotyped Charles River, opens with a spinning visual of the Charles River Esplanade taken using a 3D camera. This shot was taken by me in the midst of my research with the Augmented Reality and Virtual Reality lab at Northeastern, which gave me access to equipment and also encouraged me to branch out in styles of my journalism. Scrolling down — reading typography restricted by our professor — readers bump into a variety of other coded elements.
The first visualization, and one of the biggest struggles in coding, is a shrinking and expanding circle that represents the massive decrease in the amount of wastewater being dumped in the Charles since the 1980s. It populates as users scroll, and was coded using CSS and Javascript.
 As readers scroll, they encounter several other graphs, most created in Tableau and one created in Adobe Illustrator. While all different in their own ways, each graph demonstrates an important aspect of the story and ties in a cool-colored scheme reflective of the watery colors in the header image.
Back to Top