Connected Scatterplot

Welcome to the connected scatterplot section of the gallery. If you want to know more about this kind of chart, visit If you're looking for a simple way to implement it in d3.js, pick an example below.

Note on connected scatterplot

It is of importance to understand that a connected scatterplot is basically an hybrid between a scatterplot and a lineplot. Thus, please visit the related section here and here to get more examples, since the techniques used are very similar.

Please note also that 2 types of connected scatterplot exist. The first is simply a lineplot with dots added on top of it. It takes as input 2 numeric variables only. The second shows the relationship between 2 numerical variables across time. It requires 3 numerical variables as input. Confusing? Visit data-to-viz to clarify.

Step by step

Pretty straightforward once you understood how to build a scatterplot and a lineplot. See the focus on annotation that is handy for the second type of connected scatter (see above).


Tooltip is usually the most desired interactive feature for connected scatterplot. The ability to swap from one group or dataset to another is also frequently used. Zooming is not necessary in general, see the line plot section for that.

Selection of blocks

A selection of the best blocks to illustrate what you can do with connected scatterplot in d3.js

Related chart types

Connected scatter
Density 2d