D3 Axis/Axes Tutorial

An X axis and a Y axis that are both integer based and linear:

Both axes are generated from a numeric array [0,10], which has 11 elements.

X and Y axes are both ordinal scale:

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

Using numeric arrays with ordinal scale:

In this example, we pass in numeric arrays for both axes but use an ordinal scale to generate them.

Note the difference in tick text positions between numerics as oridinals, in this example, vs. numerics as linear, in other examples.

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 numeric scale:

Transitions Axes automatically, after a short delay:

The following example transitions axes in such a manner as to transpose X to Y and Y to X.

Note: You have to refresh your screen to see these transitions occur.

Transitions Axes (Text Only) using a button, with a short delay:

Transitions Axes using a button, with a short delay:

The following example transitions axes in such a manner as to transpose X to Y and Y to X with a button click.

Transitions Axes using a button, with a short delay:

The following example transitions axes like the previous example but also transitions the lines/paths.