Data Visualisation with Flourish

Topic Progress:

Click on the numbered tabs to navigate this lesson.

Free data visualisation templates for newsrooms

This lesson has been adapted from Google News Lab and is reproduced with permission.

With its journalism roots, Flourish is designed to help newsrooms increase the quality and quantity of their data stories. Built by London data studio Kiln, Flourish offers beautifully designed data visualization templates. Google News Lab partners with Flourish to offer the tool for free editorial use in newsrooms. You can customize many aspects of the templates with no coding experience. Or, your developers can use Flourish tools to create and share templates with other publications.

Getting Started with Flourish

  1. To begin, click “Get started for free.”
  2. Enter your name and email to create an account.
  3. Answer a few simple questions and click “Submit.”

Get acquainted with Flourish

There are several different types of templates currently available, with more being added all the time. From “horse race” visuals that compare multiple data points over time to renderings of the globe that show relational data, you can choose the right type of visual to tell your story.

Prepare your data set

Flourish works with Excel spreadsheets and Comma Separated Value (CSV) files. To save time in the long-term, make sure your data set is organized and free of errors.

  1. To learn more about a template and whether it’s right for the type of data you want to visualize, click “Need help with this template?”
  2. Once you choose a template, click on “Create Visualization,” and then “Data” to see how to format your CSV properly.

Starting your project

Let’s say you’re writing a piece analyzing Transparency International’s Corruption Index for Sub-Saharan Africa Countries between 2012 and 2017 and you want to use the “horse race” template.

  1. Select “Import your data” and be sure to name your data sheet.
  2. Make sure that “Overwrite current sheet” is selected, then click “Import.”
  3. Click “Next, select the columns,” and label the columns you want to visualize. If there is an image you want to associate with the data and the template you chose allows it, click on the “Image column” field and enter the header letter of the column that contains your image URLs.

Customise your visualisation

Each Flourish template has multiple design elements you can customize to make your project unique. From colours and shading to font sizes and curve shapes, there are dozens of choices, all created by skilled designers, so no matter what you choose, your visualization will look attractive and professional.

  1. Let’s say you like the shape of your graphic but you want to change the colors. Click on “Colours” to see a designer selection of color palettes. We’ll select “Scheme Category 10.”
  2. To change the speed that the graphic populates, click on “Animation”.
  3. Altering the shape of the lines is also easy. Simply click on “Curve” under the “Line Styles” menu item and scroll through until you see one you like.

Preview your project on multiple screens

With more and more readers using mobile devices today, it’s very important to preview your data visualization on different screen sizes. A font size that looks great on a desktop may be unreadable on a mobile phone. A graphic that looks beautiful on a phone may look sparse on a full-size screen. Flourish makes it easy to see just how your visualization will appear.

To preview your project on each screen size, click the icons in the upper left corner.

Publish your visualization

When you’re satisfied with your creation, click on the “Publish” button to save it and embed it to your site. Flourish outputs can be published from your own server and will work forever.

If you’re using the free version of this program, your visualization will appear with Flourish branding. Publishers using the full, paid version can download the HTML file and embed it without Flourish branding.

  1. Click “Export & publish,” “Publish to share and embed” and then confirm by selecting “Publish”
  2. Click on the URL to view your published animation.