How to add tabs and drop-downs to your visualizations

"How do you create tabs/drop-downs to show multiple views of the dataset?" This is one of the most frequently asked questions we receive. Now, Datawrapper does not have an in-built function to add tabs and drop-downs to switch between multiple chart/map views – and for a reason:

Our focus is more on features that empower content-creators to tell author-driven stories with data (e.g annotations, etc.) as opposed to very interactive visualizations that hide data behind tabs and clicks. You can read more about our explanatory approach to visualization and why we don't offer filters and tabs in our academy articles.

However, since it is asked of quite often, we've come up with a few workarounds: 

Index

  1. Add tabs within the visualization that link to different visualizations
  2. Built a custom "user interface" outside the visualization in your website or CMS 

Both ways require you to write or adjust some HTML and CSS. The second approach also uses Javascript. 

1. Add tabs within the visualization that link to different visualizations 

There's a lot you can do in Datawrapper using basic HTML and inline CSS. 

Create buttons that link to different charts 

You can also use it to style buttons & tabs in the "description" section like below: 

Here, the blue buttons are links to different charts showing data for each country. 

To create the above chart,  create 6 charts for Spain, Germany, Italy, UK, France, and Europe: 

Publish all of them to get the  sharable URL (fullscreen): 

Then go back to Step 3: Visualize > Annotate...

...and paste the following code in the Description section:

Click on the buttons below to see data for the different countries: <br><br>

<a target="_self" href="https://datawrapper.dwcdn.net/RxU9O/" style="background:#429ddd; padding:1px 6px; border-radius:5px; color:#ffffff; font-weight:400; box-shadow:0px 0px 7px 2px rgba(0,0,0,0.07); cursor:pointer;"> Spain </a> &nbsp;


<a target="_self" href="https://datawrapper.dwcdn.net/FW0bo/" style="background:#429ddd; padding:1px 6px; border-radius:5px; color:#ffffff; font-weight:400; box-shadow:0px 0px 7px 2px rgba(0,0,0,0.07); cursor:pointer;"> Germany </a> &nbsp;


<a target="_self" href="https://datawrapper.dwcdn.net/boIL8/" style="background:#429ddd; padding:1px 6px; border-radius:5px; color:#ffffff; font-weight:400; box-shadow:0px 0px 7px 2px rgba(0,0,0,0.07); cursor:pointer;"> Italy </a> &nbsp;


<a target="_self" href="https://datawrapper.dwcdn.net/C3Er2/" style="background:#429ddd; padding:1px 6px; border-radius:5px; color:#ffffff; font-weight:400; box-shadow:0px 0px 7px 2px rgba(0,0,0,0.07); cursor:pointer;"> UK </a> &nbsp;


<a target="_self" href="https://datawrapper.dwcdn.net/FP5mq/" style="background:#429ddd; padding:1px 6px; border-radius:5px; color:#ffffff; font-weight:400; box-shadow:0px 0px 7px 2px rgba(0,0,0,0.07); cursor:pointer;"> France </a> &nbsp;


<a target="_self" href="https://datawrapper.dwcdn.net/vq9AT/" style="background:#429ddd; padding:1px 6px; border-radius:5px; color:#ffffff; font-weight:400; box-shadow:0px 0px 7px 2px rgba(0,0,0,0.07); cursor:pointer;"> Europe </a>

Each <a> tag is a link to another chart and formatted into a blue button using inline CSS. When the button is clicked, it leads to the chart with the specific ID and opens it within the same iframe. Hover over the chart and click " Edit this chart" to duplicate the chart and view/edit the code yourself. 

Create a group/ungroup button for bar charts

You can also use this to create a group/ungroup button: 

Sort by category in tables by pre-filling search query

You can also use it to create tabs to sort your table by category. 
Below is an example of a table where you can  sort the table according to the  continent: 
This is using the same approach to adding tabs explained earlier on in this article except this time, every tab is linked to a  different view of the same table. 

You can add a query-string at the end of the chart URL that pre-fills the table search. For example, to sort by the continent "Europe", a URL to the table (chart ID: 98o03) would look like this: 

https://datawrapper.dwcdn.net/98o03/3/?search=Europe

The number 3 after the chart ID is the versioning number. It indicates that the chart has been published and republished 3 times. Don't forget to set the versioning number that is +1 to the version you're working on. (e.g. If you're working on a chart with versioning number 32, then you should set all the URLs in the <a> tag to versioning number 33.) 

The code in the description for the table above looks like this:  

Click to sort by continent:<br>

<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3/?search=Europe">Europe /</a>
<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3/?search=Asia">Asia /</a>
<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3/?search=Africa">Africa /</a>
<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3/?search=South America">South America /</a>
<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3/?search=North America">North America /</a>
<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3/?search=Oceania">Oceania /</a>
<a target="_self" href="https://datawrapper.dwcdn.net/98o03/3“>
[ All ] </a><br><br><br>

2. Build a custom UI around the visualization on your website or CMS

Another way to embed multiple visualizations and enable switching between views is to build custom tabs around the visualizations on your website or CMS. 

Here, instead of buttons in the description, we've created a dropdown menu around the visualizations. Take a look at the code in JSfiddle below: 

And that's how you create custom tabs and drop-downs. If you have any more questions about this topic, don't hesitate to get in touch with us at support@datawrapper.de.