The gender income gap, squared
November 14th, 2024
3 min
Datawrapper lets you show your data as beautiful charts, maps or tables with a few clicks. Find out more about all the available visualization types.
Our mission is to help everyone communicate with data - from newsrooms to global enterprises, non-profits or public service.
We want to enable everyone to create beautiful charts, maps, and tables. New to data visualization? Or do you have specific questions about us? You'll find all the answers here.
Data vis best practices, news, and examples
250+ articles that explain how to use Datawrapper
Answers to common questions
An exchange place for Datawrapper visualizations
Attend and watch how to use Datawrapper best
Learn about available positions on our team
Our latest small and big improvements
Build your integration with Datawrapper's API
Get in touch with us – we're happy to help
This article is brought to you by Datawrapper, a data visualization tool for creating charts, maps, and tables. Learn more.
Tooltips in locator maps
Chile is a really long country. It’s 4,300 km “long” – that’s almost as much as the distance between San Francisco and New York, but never “wider” than 240 km; less than the distance between Berlin and Hamburg.
Perfect for some simple scrollytelling! And to show off our new feature: It’s now possible to add tooltips to locator maps in Datawrapper. Hover over the markers to see for yourself:
To add images, I used HTML code in the tooltip text field. Here’s the code I used:
If you’ve never seen this before, here’s a short explanation: is an individual element in HTML. It shouts out to everyone who wants to hear it (e.g. your browser) that we want to use an image. In this element, we define two things: The source of the image –src
– and the width of the image –width
. I defined the width as 100% so that the image takes up the entire available width in the tooltip.
The source has to be an address. That could be an address of vacation pics on your computer. But then only you could see them, since only you can access the images on your computer. That’s not terribly convenient. So in my tooltips, I link to images that already exist on the web. I used the image search machine pxhere, since all of their images are under a license that doesn’t require us to attribute the photographer. (As you can see in the notes below the map, I also used two images that do require attribution.)
To see it for yourself, hover over the map and click “Edit this chart” in the top-right corner. This will bring you right into the map creation process. Or go to datawrapper.de > “Create a map” and then “Locator map” to create your own. I’ll see you next week!
Comments