The Secret to Storytelling with Data Visualization

Storytelling with data visualization transforms numbers and facts into exciting components, aiding your narrative and grabbing attention.

Reports, articles, year in reviews and advertorials—they all have one thing in common: data. Advances in modern web design tools are enabling us to tell stories in new and exciting ways, taking something as plain as data and spinning it into content that is imaginative and meaningful. We’re going to share the secret to storytelling with data visualization, from why it is effective to the techniques you can use in your own content.

Why Storytelling with Data Visualization is Important

Firstly, let’s set the groundwork. What is data visualization? Data visualization illustrates key facts that help visitors process what they’re reading. Putting statistics, numbers, and other relevant information into a visual context facilitates quicker understanding, making data insights easy to digest for users who are likely to skim your content or have a short attention span.

“A picture is worth a thousand words” isn’t a throwaway statement; it is gospel when it comes to visual storytelling. Storytelling with data visualization—also called "data storytelling"—is not only important for contributing to the look and feel of a design, it also offers an additional dimension of detail. Data visualization is essential for helping visitors identify patterns and trends, connect ideas, and see the relevance of your data for the real world.

Graphs, diagrams, maps, photos, and other visuals translate quantitative or qualitative data into a format that makes it easier to realize its significance. Want to take it a step further? Make it interactive. Interactivity elevates the impact of data visualization in your stories, involving the user in the story and allowing them to uncover data at their own pace. Using this technique in your digital storytelling lets you make content visually appealing and comprehensive, and helps attract and secure the readers’ interest in your story.

The Best Storytelling with Data Visualization Design Techniques

There are a ton of techniques out there for putting your facts and figures into action. Here are some of the most popular ways to combine digital storytelling with data visualization.

Animated Charts

Whether in the form of a bar graph, pie chart, scatterplot, or some other visual representation, putting data into motion with animated charts and integrating visual effects will capture the attention of those scrolling through. 

Interactive Sliders

Interactive image comparison sliders allow visitors to toggle between different photos or images, as well as reveal additional data. They’re great at showing a change in state, like comparing the before and after of an action or event. 

Number Counters

Animated number counters add extra impact to data showing growth. The flicker of numbers counting up is a lively effect that’s popular in annual reports and other websites that combine storytelling with data visualization.

Maps

Data points linked to geography can be visualized through heat maps, topographic maps, cluster maps, and other geospatial representations, allowing you to tell your story visually and even add interactivity so that readers can uncover the information upon scroll, hover, or click.

3D Graphics

3D elements can be applied to graphs, infographics, images, and other design components giving visitors the opportunity to interact and see these from different angles. Not only does this make for a more exciting and visually appealing design, storytelling with three-dimensional data visualizations again aids understanding of the data being presented.

Illustrations

Infographics, drawings, diagrams, and other graphics can convey meaning and add to the visual aesthetics of a web design. When placed next to facts and stats in a storytelling piece, illustrations help the readers understand the message in a visual way, whilst also calling attention to focal points in the content.

Video

Embedded videos can feature animations that touch on data points, show how something works, and provide additional context to what’s being discussed.

Best Practices When Storytelling with Data Visualization

Before jumping into examples, it’s important to keep in mind how to best go about storytelling with data visualization. Here are some best practices:

• Only include data visualizations that are relevant.
• Use a color palette that will make data visualizations stand out.
• Pick an appropriate graphic representation for the type of data.
• Label data in a way that immediately makes sense.
• When combining storytelling with data visualization make sure that you keep your target audience in mind in terms of what they need to know.
• Pay attention to responsive design so that data visualizations are readable across a variety of screens and devices.

10 Inspiring Examples of Storytelling with Data Visualization

Now that we’ve covered some of the main ways that data visualizations can enhance user experiences, let’s take a look at ten websites using them to deliver stories with impact.

The Big Slide

The Big Slide documents a major landslide that struck British Colombia, sending over 50 tons of broken rocks and debris careening down a mountainside, with much of it falling into Elliot Lake and triggering a tsunami. It’s a compelling story that includes scientists Göran Ekström and Marten Geertsema who share their insights about this natural disaster.

The Big Slide is a masterpiece in storytelling, exploring this event with the same level of depth that you would find somewhere like the New York Times. Built with Vev, there are scrollytelling elements like text moving over images and videos that provide details about this landslide. 

Visuals are a huge part of the design, with features like this interactive image comparison slider showing the intersection of Elliott Creek and the Southgate River before and after the landslide, capturing the magnitude of this landslide and how it permanently altered the landscape.

If you want to integrate storytelling with data visualization, you’re not limited to the quantitative realm of numbers or statistics. Something like a change in state, as conveyed with this interactive slider, shows qualitative data in a way that’s easy to interpret and recognize its significance.

Propel

Often retailers integrate storytelling with data visualization to communicate why consumers should choose their products. An example of this being used by brand and marketing teams can be seen on the Propel website. The manufacturers of outboard and inboard motors for boats show off their products with brilliant photos as well as 3D renderings of the motors they offer. 

Any website featuring products should include relevant specs and features to show potential customers why they should consider buying them. This horizontal carousel below, with a staggered arrangement of images, provides a unique way of seeing the different features of these motors. This is a great example of how illustrations can be used to show product data and specifications.

AI Advertising

Case studies give designers and agencies the space to tell in-depth stories about their work. They show step-by-step how they approach a project, tackle challenges, and ultimately find the right solutions for their clients.

In this case study from AI Advertising, they detail a campaign they put together for a client in education, covering the research they did about people’s attitudes towards charter schools, the objectives for the ad campaign they ran, as well as the positive outcomes of their efforts.

Having hard data showing the results of your work goes far in showing the value of what you do. Built with Vev, this case study includes bar charts, as well as number counters that highlight the most important achievements of this ad campaign. 

Voices from the Frontline

Voices From the Front Line covers climate change in Africa and how populations may shift in response to its effects. This website is organized into five different chapters covering different facets of climate change in Africa, and how it will potentially impact its people.

Data visualizations like this heat map project the movement of Africa’s populations. Having this data mapped out makes it easy to see where people will be coming and going, showing the magnitude that climate change may have on displacing people.

Eidsiva

Eidsiva, a Norwegian company working in the energy sector, merges storytelling with data visualization in this annual report that tells about its work towards renewable energy. This annual report website was created with Vev and features elements like horizontal scrolling, parallax effects, and video embeds in communicating Eidsiva’s efforts.

This annual report features eye-catching data visualizations like animated charts and number counters. These data points are pushed to the forefront, making sure that nobody misses out on their significance.

Permian Basin History

The Permian Basin History discusses the archaeological sites found throughout a region that extends from New Mexico to Texas in the American Southwest. It honors the native people who inhabited this area, telling about who they were, the tools they used, as well as the geoarchaeology of the land. It’s a fascinating combination of storytelling with data visualization throughout that brings the artifacts and history of this region to life.

This website features three-dimensional renderings of some of the artifacts found. These images capture the physicality and details of these items, as well as show information like where an artifact was found, what time period it came from, and what it was used for.

Giving visitors the capability to view these items from multiple angles shows a wonderful level of detail that’s not possible with two-dimensions.

WWF

If you’ve been following our blog for any amount of time, you’ve no doubt seen our appreciation for the World Wildlife Fund. We are huge fans of what they’ve done with Vev, with a visually impressive design full of effects like fade-ins, parallax scrolling, and animations. Along with a clean and modern design, there’s plenty of practical information relating to the importance of biodiversity and their efforts in helping the environment.

They highlight some of their major conservation efforts with a row of numbers that rush upwards until they reach the numbers they hit. This is another great example of how adding in something as simple as a number counter with Vev can make a huge impact in highlighting information.

Kerry Gold Butter: The Magic Pantry

The Magical Pantry is a whimsical and entertaining website created by Kerry Gold Butter, that drops visitors directly onto the pages of a story.

At the start, you pick out an avatar and a recipe you’re interested in learning about. You’re then sent on a journey full of colorful illustrations where you’re led to a scene where each step of the recipe is revealed. Instead of showing a recipe in plain text, this data on how to cook something delicious is displayed in a way that’s fun and interactive.

Human Rights House

We’re happy that organizations like the Human Rights House exist in building awareness and providing assistance to so many suffering under humanitarian crises across the globe. This annual report, built in Vev, discusses humanitarian issues in countries like Ukraine, Armenia, Georgia, and Kyrgyzstan and what the Human Rights House is doing in assisting the people of these countries. 

The Human Rights House shows some of its biggest accomplishments in terms of its reach and adoption of its human rights standards with animated numbers in a golden yellow. These bold number counters stand out from the dark background, making this data spring from the screen.

ServiceNow

Service Now’s interactive report blends storytelling with data visualization in communicating why companies should utilize environmental, social, and governance (ESG) frameworks in working towards better sustainability practices.

Created with Vev, this annual report features scroll-triggered effects like fade-ins and animations that bring a sense of energy to the graphs and other content that is spread throughout this design, keeping your attention as you move your way down the page.

Ready to Combine Storytelling with Data Visualization?

Vev gives you the tools to craft immersive and engaging storytelling content adorned with stunning data visualizations. We make it easy to include bar graphs, donut charts, line graphs, and other infographics by adding them directly onto the canvas and inputting your data. When you’re ready, publish your content anywhere or host it with us.