How to connect scatterplot dots with lines

To connect the dots – also called bubbles – of your scatterplot with each other, you can use the powerful Datawrapper feature Add custom areas and lines (experimental) that you can find in the Annotate tab. It's called "experimental" because it doesn't (yet) come with an easy to use interface. But don't worry: In this article, you'll learn how to use it well, step by step.

Let's say we want to create the following chart: 

The chart shows the life expectancy and the GDP per capita for selected countries in the year 1800 and in the year 2015. The country dots are connected with lines (e.g. the red "China" dot with the other red dot). 

👉 To learn more about how to add lines and areas and their style properties (width, opacity, color, etc), visit our Academy article  "How to add custom lines and areas in scatterplots".

Let's start simple: With two grey rectangles for the background. In the Add custom areas and lines (experimental) option, you can type in coordinates. If you want to draw a rectangle, you'll need the x/y positions of four points:

Now we want to add dozens of lines. For that, we need two x/y positions – one starting point and one end point of the line.This is how we want our lines to look at the end:

the x position of the 1st dot, the y position of the 1st dot, the x position of the 2nd dot, the y position of the 2nd dot @color:grey @opacity:0.1

We could write down the line coordinates for these almost 200 countries by hand – or we could calculate it. To do so, we use Google Sheets (Excel or OpenLibre works, too). 

Set up the columns

First, we need the data to be in the right format. Here we sort the columns in the same order as we want them later on in our line coordinates:

Create the line coordinates out of the columns

Now we can simply merge the columns together. There are several ways: 

We can use JOIN() to simply join the columns together with the "," delimiter: 

=JOIN(",",B2:E2)

A more complex but more flexible way is to chain he columns together with ampersands (&):

=B2&","&C2&","&D2&","&E2

With the simple chain, we can also easily add the style properties, like @width:2, @color:grey or @opacity:0.3. We recommend to keep them in an extra cell and to append them to the line coordinates. This way, you can easily experiment around.

If you keep the style properties in an extra cell, don't forget to add a $ symbol before the 1 in H1, like so: $H$1 (or just H$1). This ensures that the formula always refers to the correct cell. 

We can apply the formula to all cells below with a click on the little blue square in the bottom right of the selected cell. 

Bring the line coordinates into Datawrapper

Now we're ready for the great effect: Copy the line coordinates (you can just click on the column header to select and the copy the whole column) and paste them into the Add custom lines and areas (experimental) text field

And voila, your lines should now appear. To try it out yourself, find the Google Sheet with the calculated lines here. You can also hover over the chart above and click on "Edit this chart" in the top right to jump right into the chart creation process and see the line coordinates.