How to Create a Zooming Story Map in Flourish

Mapping is a much misunderstood tool when it comes to data-driven storytelling. Using a shaded choropleth to illustrate regional data can give us big picture comparisons, and a map can also tell the small, personal stories. After all, After all, what better way to show impact than by revealing its effect on a reader’s home and neighbours?

Maps can, however, also be poor tools to communicate data. Trying to cram too much into a map, for example, or relying on interactive tooltips instead of colour or icons, turns it into a data explorer rather than a story-tellling device.

Interactivity is also a challenge. Guaranteeing performance on mobile devices, or easy navigation with fingers or mouse, is not easy.

Which is one reason we love using Flourish’s Story tool to create zooming, interactive maps. It makes creative mapping easy to do, is tried and tested for load speeds and files size, and, if you are concerned about data use, can be used to make GIFs or videos that drive narrative at a pace more akin to TikTok than a typical text feature.

Here’s an example of how it works.

Sort out your subject

‍

For our story map we are going to create a quick timeline of the life of former South African Ambassador to the United States, Ebrahim Rasool. Rasool only served a short time in the post, before he was declared persona non grata by the Secretary of State, Marco Rubio and sent home. Expelling an ambassador is a highly unusual event, even more so when it is the ambassador of a friendly nation who has committed no crime. Hence Rasool’s story remained in the headlines for several months. 

Given the interest in Rasool, many news organisations ran pieces explaining his background and the events leading up to his expulsion. A story map can quickly and succinctly give detailed insights into a life, indicating in the most direct way when and where events happened. 

For our map, we started by building a dataset outlining Rasool’s life, based on biographical information on his Wikipedia page. If this were a real story, we would - of course - verify and add more data points before publishing.

Creating a dataset

‍

We started with a simple spreadsheet of highlights, with a location for each event taken from the Wikipedia entry. This included where he was born, where he studied, his first employment and placements throughout his political career (including his first stint as an Ambassador to Washington during the Obama administration.

Enriching the data

‍

For each event we need a geographic location in longitude and latitude. Since our dataset is small, we did this manually by looking up each location in Google Maps, and then taking the GPS reference from the URL. Other ways to find these coordinates include using a plugin such as Awesome Tables in Google Sheets. You could even use an LLM chatbot such as ChatGPT or Gemini. In all cases, however, be sure to check your results as geocoding can be hit or miss if the address locations are not detailed or recognised. Note that we aren’t including detailed biographical information in the dataset.

Creating a map

Next we need to move the data into Flourish. For this, we are going to open up https://app.flourish.studio/ (create an account if you do not have one already) and create a new visualisation. In the list of dataviz that appears, choose the Point Map from the 3D Map options (it’s important to choose the right map, as there are several different types that do similar things, but not all work with the stories function).

Add the data

Open the Data tab and click on Points, and delete all existing data. Simply copy your table over from Google Sheets to Flourish. Using the options on the right of the screen, choose the columns that hold the location name, and the longitude and latitude points. Now click preview and see if the points are in the right places. If they all appear to be a million miles from where they should be, the chances are you have the latitude and longitude columns the wrong way round.

You can style the map the way you want to using the sidebar in Preview.

Publish and create a story

For now, that’s all we need to do on our make, so click publish to make it accessible, and then return to the project overview page in Flourish. This time, we are going to create a new story, rather than a new visualisation. Stories are used in Flourish to link multiple charts and captions together. They consist of a series of slides, which can contain text, images or charts, which animate intelligently when the reader clicks on the “Next” button. They can be very effective, but remember that stories with a lot of slides may be slow to load.

Create your first slide

Our story is going to be very simple. In the dialogue that appears, choose “Basic Visualisation” and select the map that we just made. Using the navigation controls, slightly angle the map so that you aren’t looking at it as a flat image, and scroll to the first point that we want to draw the reader’s attention to, District Six in Cape Town. You can zoom in very close if you wish.

Add an annotation

Don’t activate the default popup by clicking on the point in the middle of your screen. Instead, we’re going to add a custom annotation. Click on the pencil icon in the top right of the map view, and then click in the middle of the District Six dot. You’ll see a few things happening. FIrst of all, a curved arrow now points at the dot, and the annotation editor has appeared on the right hand side of the map. You can add text to this annotation, and even drag it around a bit to create some distance from the map dot.

Style and add images

You can style the annotation using the options in the panel, but the text input box also supports HTML tags. This means you can add an image with a line such as <img src=> and style the background and border of the box too.

Add another slide

Once you are happy with the annotation, add a second slide by duplicating the first (click on the double clipboard icon on the slide preview in the left-hand sidebar). In the second slide, you can move the viewpoint to point two. In our case, this is Claremont suburb in Cape Town, where Rasool went to school. Repeat the process and add a new annotation here.

Add more slides

With two slides, you can switch between them using the arrows at the top of the screen to get a feeling for how the reader will experience your timeline. Now repeat this process until you create a slide for each of the rows in your timeline table. One important thing to bear in mind is that as you duplicate slides to create the next in order, you will end up with lots of annotations on the map. You can remove annotations from earlier slides in the story without affecting the original slide. For example, removing the annotation designed for slide three while editing slide four will not affect slide three.

Wherever you pan and zoom your map at the start of a slide will be where a reader who is viewing (rather than editing) the story will zoom to.

Publish and embed/share

Once you are happy with your interactive, zooming timeline, you can test it in mobile views using the icons in the top left. You should also give your story a name. 

Now click publish in the top right. Flourish will generate both a direct link to the story, and a code snippet for embedding the interactive on your site. 

Congratulations, you’ve built an interactive story map in Flourish!

One last tip - if you are worried about using too much data or how the map will load on a reader’s phone, you can always use the Flourish story to create a GIF or short flyby video. Just record your screen while tabbing through the slides (but don’t go too fast!).

‍