Project description:

The Inside Scoop of Ben & Jerry’s is an in-depth look at the 98 different ice cream flavors offered by Ben & Jerry’s around the world. It is an extensive deep dive into Ben & Jerry’s base flavors (chocolate, vanilla, etc.), additions (cookie dough, brownies, etc.), types (dairy, non-dairy, etc.), and countries. Additionally, it looks at the combination of these attributes and answers questions such as which additions are more likely to appear in chocolate ice cream? Does the U.S. have different taste preferences from those in other regions? This light hearted visualization will have you screaming for ice cream!

Impact reached:

2020 was a hard year for everyone. Data journalism had shifted to mainly (& importantly) covering Covid-19 related news. The Inside Scoop of Ben & Jerry’s provided a release from the seriousness of the news and allowed for readers to learn more about a universally popular topic, ice cream. Ben & Jerry’s even recognized the project, tweeting “these folks may know more about our own ice cream than we do!”. The project also impacted us personally, as working on it in our free time helped us get through lockdown and expanded our own capabilities.

Techniques/technologies used:

We used a variety of tools and techniques across our process to create this piece. To clean, categorize, and normalize our dataset, we used Alteryx. To easily explore the data, generate stories, and prototype charts we used Tableau. Once we had an idea of what we wanted to create, we used various web technologies to achieve our desired result. All visualizations were created by using D3.JS to draw SVG and Canvas objects. We added Scrollama.js to implement scrollytelling and allow for seamless transition between sections. GSAP was used for additional animations. The rest of the webpage was built from scratch using standard HTML, CSS, and JavaScript. Additionally, we created all legends in Adobe Illustrator and exported them to a SVG.

What was the hardest part of this project?

The hardest part of this project was ensuring all pieces from end to end lived up to our vision, as this project was our first time creating a web-based visualization. We wanted to find the best way to tell an engaging, joyful story, but had to balance that with creating a user experience that worked across devices and browsers. We had to rework sections multiple times in order to enhance performance and remove any bugs that could occur from user’s interacting in unexpected ways. For example, we used a circle for each of the 98 flavors. We wanted to transition the position of the circle between each section. However, we noticed the performance lagged occasionally and scrolling too fast would break the visualization. We had to figure out how Canvas worked, and how it worked with D3.js, in order to fix the speed. All in all, we faced a lot of challenges as we navigated the complexities of the web, but we learned a lot doing it!

What can others learn from this project?

The best way to find new, not done before, projects to work on is to take a topic you are passionate about and explore!

Project links:

benjerry.heshlindsdataviz.com/