Flourish Player Tutorial: Step-by-Step Guide for Beginners Flourish is a powerful data visualization tool that turns spreadsheets into stunning, interactive stories. The Flourish Player allows you to seamlessly embed, display, and present these visualizations across websites and digital platforms. This guide will walk you through everything you need to know to get started. What is Flourish Player?
The Flourish Player is the core rendering engine used to display Flourish graphics. When you embed a Flourish chart or map into a webpage, the player ensures that the visualization is responsive, interactive, and smooth across all desktop and mobile devices. Step 1: Create Your Visualization
Before you can use the player, you need a visualization to display. Go to the Flourish website and log into your account. Click New visualization on your dashboard.
Choose a template (e.g., Bar chart race, Projection map, or Scatter plot).
Replace the default data by uploading your own Excel or CSV file in the Data tab.
Customize your colors, labels, and animations in the Preview tab. Step 2: Get Your Embed Code
Once your visualization is ready, you need to generate the code that triggers the Flourish Player.
Click the Export and publish button in the top-right corner. Select Publish to download and share.
Click the green Publish button to make your visualization live.
Copy the provided Script embed code. It will look similar to this:
Use code with caution. Step 3: Insert the Code Into Your Website
The Flourish Player relies on the script tag (embed.js) to look for the
Preview or publish the page to see the interactive player in action. For Custom HTML Websites Open your project’s .html file.
Paste the embed code directly into the section where you want the graphic to appear.
Ensure your website has an active internet connection, as the player loads assets directly from Flourish servers. Step 4: Configure Advanced Player Settings (Optional) If you are a developer or
Responsive Sizing: By default, the player automatically scales to fit the width of its parent container. You can restrict the size by wrapping the embed code in a styled
max-width or height.
Lazy Loading: The player automatically optimizes loading times, only rendering the full interactive elements as the user scrolls them into view. Troubleshooting Common Issues
The chart is blank: Ensure you have actually clicked “Publish” in Flourish. If the visualization is still a draft, the player cannot fetch the data.
The chart does not resize properly: Check if your website’s CSS theme is overriding the player’s canvas. Removing fixed height restrictions on the container usually fixes this.
To help tailor this guide or troubleshoot your setup, could you share a few more details?
What platform are you embedding your chart into (e.g., WordPress, Webflow, custom HTML)? What type of chart are you trying to display?
Leave a Reply