Share or embed a Flourish visualisation

So you’ve made a Flourish visualisation - 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.

Publish your visualisation on Flourish

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”.

Publish dialog Publish dialog

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.

Embed it on your own web page

If you’d rather include the visualisation 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.

Publish dialog

The default embed type is a responsive script. This creates an iframe in your page containing your visualisation 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.

Publish dialog

Click “Export & publish”, then ”Download HTML”. This will download a zip file (containing HTML, JavaScript, your data, etc) ready to be dropped onto any web server. If you’re not sure how this works, talk to your web development team.

Embed in Medium

Although Medium will not let you paste in HTML like our embed code, you can still embed Flourish visualisations in Medium posts. Simply paste the visualisation URL on a new line and press Enter, and Medium will automatically convert it to an iframe.

Get an image of your visualisation

Sometimes it can be useful to have a simple image of your visualisation, e.g. to post on Instagram. The most reliable way to do this is to create a screenshot. First adjust the visualisation 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.