The Flourish component allows you to embed custom data visualizations directly from Flourish Studio into your project. This brings a new level of interactive and data-driven content to your design.
Configuring the Flourish Component
To add a Flourish visualization to your canvas, follow these steps:
Add the Component: Add a Flourish component from the Add Menu to your canvas.
Open the Properties Panel: Double-click the Flourish element on the canvas to open the Properties panel on the right side.
Paste the URL: Paste the URL of your Flourish visualization into the 'Flourish URL' field.
Enabling Scrollytelling
Scrollytelling allows your visualization to advance to the next slide as the user scrolls down the page.
How to Enable: In the Flourish component's Properties tab, toggle the 'Scrollytelling' option on.
Important: For this feature to work correctly, you must pin the position of the Flourish component so that it stays in place while the user scrolls.
Once enabled, you can adjust the following settings:
Number of slides: Specify the total number of slides you want to be visible through the scroll.
Play for how long: Choose how the scrollytelling should stop. Options include:
Bottom of the page: The scrollytelling stops when the user reaches the end of the page.
Distance (px): The scrollytelling stops after a specific number of pixels have been scrolled.
To an element: The scrollytelling stops when the user scrolls to a specific element on the page.
Custom Interactions
The Flourish component also supports custom interactions that make your data visualization more immersive. You can use these actions with various triggers, such as a button click or a timed event.
Next slide: Advances the Flourish visualization to the next slide.
Previous slide: Moves the Flourish visualization to the previous slide.
Set slide: Directs the visualization to a specific, predefined slide.