Creating Interactive Charts with Flourish

Introduction

For this tutorial, we will be looking at the cumulative amount of COVID-19 cases for different countries over time. These data come from the European Centre for Disease Prevention and Control, which aggregates data from other national sources. (They even include some R code for how to pull those data automatically so your charts can automatically update. Do note that I appended some new variables to their dataset for this tutorial, so you should use my dataset below.)

By the end of the tutorial, we will have produced an animated bar chart of COVID-19 cases for 11 countries, just like the one found on this Boston Globe story. This is what that chart looks like this:

Your browser does not support this video.

For those who cannot wait, here’s what our final product will look like.

Data Processing

To create a data visualization, we need to provide tools like Flourish with data. CSV files are universally accepted by data visualization tools. We can use R to help us create such a file.

Loading the Data

The first step, as usual, is to read in the source data. Like before, we’ll use the readr::read_csv() function to read data from this CSV file.

library(tidyverse)

## ── Attaching packages ─────────────────────────────────────── tidyverse 1.3.1 ──

## ✓ ggplot2 3.3.5     ✓ purrr   0.3.4
## ✓ tibble  3.1.3     ✓ dplyr   1.0.7
## ✓ tidyr   1.1.3     ✓ stringr 1.4.0
## ✓ readr   2.0.1     ✓ forcats 0.5.1

## ── Conflicts ────────────────────────────────────────── tidyverse_conflicts() ──
## x dplyr::filter()     masks stats::filter()
## x dplyr::group_rows() masks kableExtra::group_rows()
## x dplyr::lag()        masks stats::lag()

corona_cases <- read_csv("https://dds.rodrigozamith.com/files/covid19_cases_by_country_20200326.csv")

## Rows: 6931 Columns: 13

## ── Column specification ────────────────────────────────────────────────────────
## Delimiter: ","
## chr  (3): countriesAndTerritories, geoId, countryCode
## dbl  (9): day, month, year, cases, deaths, popData2018, cumulativeCases, cum...
## date (1): dateRep

##
## ℹ Use `spec()` to retrieve the full column specification for this data.
## ℹ Specify the column types or set `show_col_types = FALSE` to quiet this message.

Here’s a sample of the data:

corona_cases %>%
  head(10)

Getting the Data We Need

The next thing we’ll want to do is extract only the information we need for creating the chart. While it can be harmless to include additional data, it can sometimes (a) confuse the software being used to create the chart; (b) make it unwieldy to select options using those software; and (c) exceed the dataset size limitations of the software, especially if you’re on a free tier.

In our case, we only need data from the following eleven countries: China, France, Germany, India, Iran, Italy, Japan, Singapore, South Korea, Spain and the United States. We also only want data after February 24, 2020.

We can thus use a combination of the dplyr::filter() and dplyr::select() functions.

corona_cases %>%
  filter(dateRep >= "2020-02-24" & countriesAndTerritories %in% c("China", "France", "Germany", "India", "Iran", "Italy", "Japan", "Singapore", "South Korea", "Spain", "United States of America")) %>%
  select(dateRep, countriesAndTerritories, cumulativeCases)

Here’s a sampling of the result:

Cleaning Up the Data

A lot of the web-based tools have very limited functionality for cleaning up the data, so it is best to do that within R.

Here, I see two changes we need to make. First, we’ll want to abbreviate “United States of America” and then change our date format (using the lubridate package) to something that is easier for others to read. In both cases, we’ll use the mutate() function to change our variables.

First, let’s load the lubridate package.

library(lubridate)

##
## Attaching package: 'lubridate'

## The following objects are masked from 'package:base':
##
##     date, intersect, setdiff, union

Then, let’s add the two mutate statements to our piped operation. (I am performing this as two separate operations for demonstrative purposes.)

corona_cases %>%
  filter(dateRep >= "2020-02-24" & countriesAndTerritories %in% c("China", "France", "Germany", "India", "Iran", "Italy", "Japan", "Singapore", "South Korea", "Spain", "United States of America")) %>%
  select(dateRep, countriesAndTerritories, cumulativeCases) %>%
  mutate(countriesAndTerritories=recode(countriesAndTerritories, "United States of America"="United States")) %>%
  mutate(dateRep=format(dateRep, format="%m/%d/%Y")) %>%

Here’s what our dataset now looks like. Notice the change in the date. (We would only see the change in the "United States" label by looking further down in the dataset.)

Going from Long to Wide

Unlike ggplot, Flourish likes the data to be uploaded in wide format.

That is, each bar should be a separate row in the data, and each column represents a different data point for that bar. You’ll find that different tools have different expectations, which may require you to reshape your data to fit those expectations. It’s frustrating but, thankfully, easily solved with R.

We can quickly reshape our data with the dplyr::pivot_wider() function like so:

corona_cases %>%
  filter(dateRep >= "2020-02-24" & countriesAndTerritories %in% c("China", "France", "Germany", "India", "Iran", "Italy", "Japan", "Singapore", "South Korea", "Spain", "United States of America")) %>%
  select(dateRep, countriesAndTerritories, cumulativeCases) %>%
  mutate(countriesAndTerritories=recode(countriesAndTerritories, "United States of America"="United States")) %>%
  mutate(dateRep=format(dateRep, format="%m/%d/%Y")) %>%
  pivot_wider(id_col=countriesAndTerritories, names_from=dateRep, values_from=cumulativeCases)

Here’s a sampling of our new data frame:

Producing a CSV File

If we want to get our data out of R, we’ll need to export it. The readr package (part of tidyverse) makes it easy for us to produce a properly formatted CSV file with its write_csv() function.

That function requires us to provide it just two arguments: the object (data frame) we’d like to export and the filename of the CSV file.

The CSV file will be saved in your working directory, unless you specify a different path.

corona_cases %>%
  filter(dateRep >= "2020-02-24" & countriesAndTerritories %in% c("China", "France", "Germany", "India", "Iran", "Italy", "Japan", "Singapore", "South Korea", "Spain", "United States of America")) %>%
  select(dateRep, countriesAndTerritories, cumulativeCases) %>%
  mutate(countriesAndTerritories=recode(countriesAndTerritories, "United States of America"="United States")) %>%
  mutate(dateRep=format(dateRep, format="%m/%d/%Y")) %>%
  pivot_wider(id_col=countriesAndTerritories, names_from=dateRep, values_from=cumulativeCases) %>%
  write_csv("covid_19_plot_data.csv")

Our Final CSV File

You can download a copy of the CSV file we will be using below by clicking here.

Creating an Interactive Plot Online

A powerful tool for creating interactive data visualizations is Flourish. Flourish allows you to create a range of different charts and specify a lot of options—​more than many of its competitors. Large newsrooms like The Boston Globe routinely make use of Flourish when creating data visualizations.

The first step is to create an account with Flourish. As is the case with many online visualization tools, Flourish provides you with a limited free tier and more feature-loaded paid tiers. The free tier will be good enough for our purposes.

After you create your account, you should be presented with a dashboard that looks like this:

Click on the “New visualization” button to create a new chart. Then, since we want to create an animated line chart, select the “Simple” chart under the “Bar chart race” section.

A sample chart will appear, which should look similar to this:

First, let’s title our visualization by entering some text at the box near the top of the page (e.g., “Coronavirus Cases Race Bar Chart”).

Then, click the “Data” button in the middle of the gray row near the top of the screen to upload your dataset. Click the blue “Upload data” button and select the CSV file we just created (covid_19_plot_data.csv).

Import it publicly. Set the Label column to A and the Values columns to cover the rest of the columns (or all possible remaining columns, like B-ZZ). Set the Categories and Image columns to blank ( ).

When your interface looks similar to the above, hit “Preview.” Then, begin playing around with the different settings.

Boston Globe’s Settings

Here are the settings we can use to replicate the Boston Globe’s chart:

• Bars

  • No. bars: 11

• Bar Colors

  • Color mode: By bar

  • Color overrides:

    • China: #63615f

    • France: #a5a29c

    • Germany: #7c51a8

    • India: #2e4764

    • Iran: #82bec8

    • Italy: #7099ac

    • Japan: #ffcf26

    • Singapore: #a6c180

    • South Korea: #84817d

    • Spain: #e39b46

    • United States: #ca7768

• Labels

  • Max font size: 0.8

• Time counter & totalizer

  • Current time counter, size (% of screen): 4

  • Total: disable

• Timeline & animation

  • Loop timeline: disable

• Header

  • Title

    • Label: How coronavirus has spread around the world

    • Styling (change title styles)

      • Size: Bigger

  • Subtitle

    • Label: Confirmed cases by country since Feb. 24

    • Styling (change subtitle styles)

      • Size: 1.3 (Custom, or ‘…​’)

      • Line height: 1.3

• Footer

  • Source name: European Centre for Disease Prevention and Control (My modification, since that’s where I got the data from)

  • Source url: https://www.ecdc.europa.eu/en/publications-data/download-todays-data-geographic-distribution-covid-19-cases-worldwide

  • Size: 0.75

Publishing your Data Visualization

When you are satisfied with your data visualization, you can click the “Export & publish” button at the top-right corner of the screen. Then, select “Publish to share and embed”.

Flourish will then provide you with a link as well as “embed code” that can be used to incorporate the visualization into your story on another platform.

If you used the options listed above, your visualization should look just like this one.