Tick mark

TIP

The tick mark is one of two marks in Plot for drawing horizontal or vertical lines; it should be used when the secondary position dimension, if any, is ordinal. When it is quantitative, use a rule.

The tick mark comes in two orientations: tickY draws a horizontal↔︎ line with a given y value, while tickX draws a vertical↕︎ line with a given x value. Ticks have an optional secondary position dimension (x for tickY and y for tickX); this second dimension is ordinal, unlike a rule, and requires a corresponding band scale.

Ticks are often used to show one-dimensional distributions, as in the “barcode” plot below showing the proportion of the population in each age bracket across U.S. states.

Fork

Plot.plot({
  x: {
    grid: true,
    label: "Population (%)",
    percent: true
  },
  y: {
    domain: stateage.ages, // in age order
    reverse: true,
    label: "Age (years)",
    labelAnchor: "top"
  },
  marks: [
    Plot.ruleX([0]),
    Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age"}))
  ]
})

Both ticks and bars have an ordinal secondary position dimension; a tick is therefore convenient for stroking the upper bound of a bar for emphasis, as in the bar chart below. A separate rule is also used to denote y = 0.

Fork

Plot.plot({
  x: {label: null},
  y: {percent: true},
  marks: [
    Plot.barY(alphabet, {x: "letter", y: "frequency", fillOpacity: 0.2}),
    Plot.tickY(alphabet, {x: "letter", y: "frequency"}),
    Plot.ruleY([0])
  ]
})

When there is no secondary position dimension, a tick behaves identically to a rule. While a one-dimensional rule and tick are equivalent, a one-dimensional rule is generally preferred, if only because the name “rule” is more descriptive. But as an example below, a random normal distribution is plotted below with ticks.

Fork

Plot.plot({
  x: {domain: [-4, 4]},
  marks: [
    Plot.tickX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2})
  ]
})

TIP

Reducing opacity allows better perception of density when ticks overlap.

Ticks are also used by the box mark to denote the median value for each group.

Tick options

For the required channels, see tickX and tickY. The tick mark supports the standard mark options, including insets, and marker options to add a marker (such as a dot or an arrowhead) to the start or end of the rule. The stroke defaults to currentColor.

tickX(data, options)

Plot.tickX(stateage, {x: "population", y: "age"})

Returns a new vertical↕︎ tick with the given data and options. The following channels are required:

• x - the horizontal position; bound to the x scale

The following optional channels are supported:

• y - the vertical position; bound to the y scale, which must be band

If the y channel is not specified, the tick will span the full vertical extent of the frame.

tickY(data, options)

Plot.tickY(stateage, {y: "population", x: "age"})

Returns a new horizontal↔︎ tick with the given data and options. The following channels are required:

• y - the vertical position; bound to the y scale

The following optional channels are supported:

• x - the horizontal position; bound to the x scale, which must be band

If the x channel is not specified, the tick will span the full vertical extent of the frame.