How to add images to your visualization

Most Flourish templates allow you to display images in one way or another. In most cases, this is done by uploading images or linking to URLs in your datasheet.

Many templates, such as the Cards, Line chart race, Bar chart race and Bubble chart, have a dedicated Image column setting. But if you're working with one that doesn't, you might still be able to add an image to a popup.

To add images to your Flourish visualization using the Image column in your datasheet, you have two options:

1

Supply a non-Flourish URL

For images on the Internet – presuming they're free-to-use or your own – you can copy the URL by right-clicking on the image and selecting "Copy link address". You can then paste that URL into the Image column of your datasheet.

Keep in mind that your images should be as small as possible – the larger the image size, the slower it will load in the Flourish visualization. The images used in our example are 64x64 pixels. 







2

Upload an image to Flourish

If you don't already have a URL for an image because, for example, the image is saved to your computer, you can always right-click on a cell of the Image column in the Data tab and choose Upload file. This will let you browse through your local files and upload the appropriate image to the Flourish server.



3

Via a shortcode for country flag images

If you'd like to display country flag images, you can use the two-letter shortcode of a country, for example :us:, to display the image of that country's flag. Typing or copy-pasting the country shortcode in this syntax will automatically render the corresponding SVG image URL.



TIP: You can also copy-paste several shortcodes across after creating them in Google sheets with an ampersand function. You can browse a list of shortcodes here.