So you’ve made a Flourish visualization - congratulations! The next step is to share it with the world. Here’s how.
Note: if you’re on a free account, your draft project and data will be publicly visible on the web, even before you publish your project. To make them private, upgrade to a private account.
When you’re ready to share your project, the easiest option is simply to publish it on Flourish. This will create a public page containing your project plus some share and embed buttons. To do this, just click “Export & publish”, then “Publish”.
One of the great things about publishing on Flourish is that you can then make changes in the editor and then click “republish” when you’re ready to update the shared or embedded version.
If you’d rather include the visualization in your own web pages, you have two choices.
Option 1: embed from Flourish
This is the simplest way - all you need to do is add a single-line embed code to your web page.
Just click “Export & publish”, then “Publish”. This will give you an embed code that you can copy and paste into your page.
One advantage of embedding from Flourish this way is you can make changes in the editor and then hit “republish” to update the live project embedded on your site.
The default embed type is a responsive script. This creates an iframe in your page containing your visualization and changes its height dynamically to fit the contents. You can change the width and height settings if you prefer by clicking ”More options”.
If your company or website does not allow script embeds, click ”More options” and choose a basic iframe embed instead. The limitation with this approach is that the embed will be a fixed height, which will not suit some templates.
Option 2: Download and host yourself (paying customers only)
This approach is suitable if you prefer to embed from your own server – for example to put a private project on an intranet, or if your company has a policy of self-hosting all web content.
The process for embedding Flourish visualizations on AMP pages is very similar. Click “Export & publish”, then click on “More options” and choose “AMP”. This will give you code that you can embed in your AMP page. Your page will need to be valid AMP for this to work – see the AMP iframe documentation for details.
To comply with our terms of service, you must also include a Flourish credit and link below the embed, e.g. “Chart made with Flourish“.
Although Medium will not let you paste in HTML like our embed code, you can still embed Flourish visualizations in Medium posts. Simply paste the visualization URL on a new line and press Enter, and Medium will automatically convert it to an iframe.
Sometimes it can be useful to have a simple image of your visualization, e.g. to post on Instagram. The most reliable way to do this is to create a screenshot. First adjust the visualization to the desired size, then screenshot the relevant area of the screen. Tip: the shortcut key to do this is Cmd+Shift+4 (Mac) or Win+Shift+S (Windows 10).
Some templates also provide a “Download image” button in the “Export & publish” menu. This is especially useful for vector graphics templates such as charts and basic maps, which – if you choose to download in SVG format – can be edited in a graphics programme such as Illustrator or Sketch.
For more information see here.