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. 

1.1 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 Visualization only URL. 

Alternatively, once the charts are published, you can simply construct the 'Visualisation only' URL by swapping out the chart ID of the following URL: 

https://datawrapper.dwcdn.net/{Chart ID}/

Note: The number at the end of the URL is the versioning number and will increase every time you republish the chart. These numbers don't have to be included when copying the URLs of the published charts. 

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

...and paste the following code in the Description section. Then replace the chart URLs with your won and change the style of the buttons by customizing the inline CSS:  

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

<span style="line-height:30px">

<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>

</span>
  • Make sure that you're using the URL under the option 'Visualization only'. (If you use the URL under 'For sharing', the buttons will lead you to a Datawrapper dashboard instead of another chart.) 
  • 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. 
  • Make sure to wrap the buttons (the <a> tags) around a <span> with an in-line CSS to add a good line-height. This will add some space between the buttons when they go on multiple rows.
  • &nbsp; is an HTML entity for a non-breaking space. This is what gives space between the buttons so make sure to add them at the end of every <a> tag.  

1.2 Create a group/ungroup button for bar charts

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

1.3 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.