How to add conditional statements to your popups

Very often, you may need to display different information for various regions of your map. While there are multiple ways to do this, one of the most straightforward methods is to use IF statements. These are logical conclusions that help you set different content in your popups and panels, depending on whether certain series fulfil a condition or not. 

WARNING: At the moment, not all Flourish templates support IF statements.
Chord diagrams, Tables, Network graphs, Election results charts, Connections globes, Slope charts, Heatmaps and Arc maps currently DO NOT support this function.

To use IF statements:
1
In the Data tab, create a new column and bind it under Metadata for popups. You can name your column however you like, but do not use any spaces.

2
In the new column, add any content only for the series that should display a different popup content. In the example above, those are only the regions with missing values. It doesn't matter what content you add to the cells – that could be a character, a word or a number. 

3
In the Preview tab > Popups & panels, enable Custom popups.

4
Now it's time to use the IF statement function. 

The syntax is as follows:
{{#if No-popup}} This popup only shows up if the region <b>has no data</b>. {{/if}} ,
where {{No-popup}} is the name of our new column.

What the IF statement function does is take into consideration which series have any content in the {{No-popup}} column, and applies the specified message only to the cells that are not empty. In addition, you can customize the popup content in multiple ways – read more about using custom HTML and CSS here.

5
Please note that at the moment, IF... Else statements are not supported. Instead, what you can do is add multiple IF statements in your popups.

6
In a similar manner, you can add specific popup content to only one or two regions – all you need to do is create a separate column and bind it under Metadata for popups.

Related Articles