D3 Scatterplots (a.k.a. Scatter Plots)

All of following scatterplots lead to this one...

The purpose of this tutorial is to walk the reader through the building of a complex scatterplot like this one, in small understandable pieces. Note that each of the following examples is isolated in the HTML with div element and in Javascript with a seperate and corresponding function call.

To learn from this reference tutorial, simply open up the source to this page and explore the code for each of the following examples, as they lead you to this final resulting scatterplot.

Let's start with an integer based linear Y Axis:

The axis is generated from the numeric array [0,10], which has 11 elements.

Notice that the axis is oriented left, which flips it vertically and to the left.

We can now add an integer based linear X Axis:

The axis is also generated from the numeric array [0,10], which has 11 elements.

We can now add some data points:

Numeric integer ranges are used to set up each axis. Notice how the first and last integer values align with the start and end of the axis lines.

X axis is ordinal scale & Y axis is numeric scale:

Notice that the ordinal scale's first value does not start at the join point for the two lines that make up the axes.

X axis is numeric scale & Y axis is ordinal scale:

Notice the right shift of the Y axis to accommodate label text strings.

X axis is ordinal scale & Y axis is ordinal scale:

Notice the right shift of the Y axis to accommodate label text strings.

X axis is ordinal scale & Y axis is ordinal scale (utilizing Integers as strings):

Notice that the "0" value, which is a character and not an integer, doesn't line up with the vertical and horizonal line join point.

Let's use paths to throw in some grid lines:

Now, let's transition the points (a.k.a. bubbles) onto the chart with delays between them: