How to create non-linear navigation stories

You may be creating multiple visualizations where you want people to have the choice to click on the visualizations they want to see without having to click through slides as our Story player offers. To create this non-linear navigation for your visualizations, follow the steps below!

NOTE: Please note that non-linear navigation stories only work with iframe embeds. This means that your story would not be dynamically responsive in accordance to the device's screen size.

Creating buttons for your navigation

WARNING: Please note that the buttons must be added directly to the web page where the Flourish story will be embedded.

To utilize non-linear navigation, you will need to create buttons that will link to your visualizations/story. There are a few ways that you can create buttons using HTML and CSS, and you can find examples easily online. To follow the steps on how we created our buttons, follow the steps below.

1

In HTML, there is an easy method of creating buttons. You simply use:



2

You may want to style your button to match your house style or the visualizations you have created. Below are two ways in which you can add your button styles.

Adding a visualization to appear on load

When using non-linear navigation, your projects will only load once you have clicked on a button. However, to avoid just an empty screen, you can input a Flourish iframe that will appear automatically when the page loads.

1

You can either embed a story or a visualization to load automatically when the page loads. To begin, Export & publish your visualization or story and click on the iframe option.



2

Copy the iframe code and paste it into your code editor.

3

At the beginning of your iframe code, enter name="Storyembed" class="iframe trend". This is because we want to replace this visualization within the iframe with the visualization we select on the buttons.

4

Embed this after the code for the buttons. Below is an example of how it should look:

Linking projects to buttons

1

At the beginning of your code, before adding a <button> tag, add an  <a href=""> tag and close it after closing your button tag.



2

Instead of the usual code that you get from the Export and publish button, we will be using a different embed code that will just be a link. You can use this link to view how your project will look in full view after you have published it. Within the quotation marks ("") in the code, enter: https://flo.uri.sh/visualisation/YOUR_VIZ_ID/embed .


If you want to embed a story, you will want to do the same thing but add the slide number after the embed. So for example, https://flo.uri.sh/story/YOUR_STORY_ID/embed#slide-0. Remember that slide-0 is actually slide 1.




3

After your embed link, you will need to set a target for where this embed should be displayed. After your closing quotation mark, you will want to add target="Storyembed".

Altogether, your code for your link and button should look like this:



4

You can now create multiple buttons and simply change the visualization/story ID each time within the link above.

Example of code

Here is an example of how your code should look all together. This is the code we used for the example above: