How to display an image in your Countdown visualization

To display an image in your Countdown visualization,

1

Go to the Countdown > Display Style settings and select Custom.

2

Paste the format you would like your text to display in, along with an image in HTML format. Our example above uses the following code:

{{d}}d {{h}}h {{m}}m {{s}}s </br>

<img style="width: 50%;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/1200px-Olympic_rings_without_rims.svg.png"/>

You can simply replace the URL with your own image URL and change the width if you would like your image to fill a different percentage of the container.

TIP: If you don't yet have an image URL, you can upload your image to the cell of any Flourish visualization to generate one. Learn more about this here.

3

That's it! You can also add any other HTML content, such as formatting or coloring certain words differently.