Creating a story

What are stories?

Flourish stories are a bit like PowerPoint or Keynote presentations, but built for data visualization on the modern web. You can:

• Highlight different views of your interactive visualizations
• Add annotations to your visualizations
• Create animated transitions between slides
• Publish on the web or embed on your own website
• Automatically resize for desktop, tablet and mobile

Here’s an example Flourish story. Click the arrows to move forwards and backwards between slides.

Creating a story

There are two main ways to create a new Flourish story: 

1

To create a visualization or go to an existing visualization, and then, from inside the visualization editor, click the “Create a story” button in the top right corner. This creates a new story containing that visualization as a single slide.

2

To navigate to your Projects page and click "+ New story". This creates a new, blank story.

In the story editor, whenever you make a change to the view –for example, dragging around a map around or clicking a menu item – the changes are saved to the slide.

Changes to settings and data in your visualizations are automatically reflected in any slides based on those visualizations.

Adding slides

There are also a few ways to add a new slide to a story:

1

To click the "+ new slide" button on the panel to the left, which will add a blank slide to your story. The story editor will then prompt you to choose between adding an existing visualization or a new Basic slide.

2

To duplicate an existing slide. This is handy if you want to show different versions of the same visualization. Once you’re happy with your first slide, you can click the “Duplicate slide” button in the top right, and make changes to show the next view. When you click between slides, you should see a smooth transition. Animations only display between slides if they are based on the same template.

3

To duplicate an existing slide, and then change the visualization. The “change” link in the top right corner of the story editor lets you swap the slide's existing visualization for a different one.

Embedding a story

Once you’re happy with the text and slides in your story, you can embed it in on your web page in the same way you would with a normal Flourish visualization.