Introduction

In the previous module on scales, we learned how to position SVG shapes precisely, adding meaning to the growing graph we're constructing.

Now, it's time to provide context to these shape positions. For most chart types, this is achieved using axes. Axes can be complex elements, so let's explore how to create them effectively.

Wip
4 minutes read

This module explains how to build axes like the one you can see at the bottom and on the left of this chart area.

Terminology

To effectively understand and work with axes in data visualization, it's essential to familiarize yourself with the following key terms:

Here I need a figure that helps understanding the following terms:

  • Axis
  • Tick
  • Tick Label
  • Grid Line
  • Axis Label
  • Title
  • Scale
  • Domain
  • Range
  • Orientation
  • Axis Line
  • Baseline

Margins

We need some space between the chart area and the svg area. Let's see how to build this.

← Previous

Other scale types

Next →

Margin and translation