Scatterplot





This is the Scatterplot section of the gallery. If you want to know more about this kind of chart, visit data-to-viz.com. If you're looking for a simple way to implement it in d3.js, pick an example below.

Step by step

Scatterplot is one of the easiest chart to make with d3.js, and thus a good starting point if you're discovering this tool. The first example below is the most basic scatterplot you can do, keeping only the core code. Next is shown how to custom the general appearance, and how to add tooltips to each circle.



Grouped scatter

Grouping is a common practice in scatterplots. It allows to investigate how groups behave for the 2 numeric variables. It requires a minimal additional amount of effort: just create a color scale and use it for the fill argument of the circles



Animation | Interactivity

Two interactive features are highly necessary on scatterplots: the ability to zoom on a specific part of the chart, and the creation of tooltips linked to each data points. Here is a set of examples showing how to implement these features through different techniques.



Selection of blocks

Related chart types


Scatter
Heatmap
Correlogram
Bubble
Connected scatter
Density 2d