Visualize.Axis (Visualize v0.2.35)

Axis generator for creating reference marks and labels.

Creates element groups containing tick marks, labels, and axis lines. Colours, font and size come from a Visualize.Theme (theme/2, default Visualize.Theme.default/0), resolved as CSS references for SVG and as literals for a canvas (spec/05 §1.4, D-55).

Examples

x_scale = Visualize.Scale.linear()
  |> Visualize.Scale.domain([0, 100])
  |> Visualize.Scale.range([0, 500])

x_axis = Visualize.Axis.bottom(x_scale)
  |> Visualize.Axis.ticks(5)
  |> Visualize.Axis.tick_format(fn v -> "#{v}%" end)

element = Visualize.Axis.generate(x_axis)

Summary

Types

orientation()

t()

Functions

bottom(scale)

Creates a bottom-oriented axis

generate(axis, opts \\ [])

Generates the axis as an IR Element tree.

left(scale)

Creates a left-oriented axis

offset(axis, offset)

Sets the pixel offset for crisp edges

render(axis, opts \\ [])

Renders the axis to a string using the specified backend.

right(scale)

Creates a right-oriented axis

theme(axis, theme)

Sets the theme the axis's colours, font and size resolve from

tick_format(axis, formatter)

Sets the tick format function

tick_padding(axis, padding)

Sets the padding between tick and label

tick_size(axis, size)

Sets both inner and outer tick sizes

tick_size_inner(axis, size)

Sets the inner tick size (length of tick lines)

tick_size_outer(axis, size)

Sets the outer tick size (length of domain line extensions)

tick_values(axis, values)

Sets explicit tick values

ticks(axis, count)

Sets the approximate number of ticks

top(scale)

Creates a top-oriented axis

Types

orientation()

@type orientation() :: :top | :right | :bottom | :left

t()

@type t() :: %Visualize.Axis{
  offset: number(),
  orient: orientation(),
  scale: struct(),
  theme: Visualize.Theme.t() | nil,
  tick_format: (any() -> String.t()) | nil,
  tick_padding: number(),
  tick_size_inner: number(),
  tick_size_outer: number(),
  tick_values: [any()] | nil,
  ticks: integer() | nil
}

Functions

bottom(scale)

@spec bottom(struct()) :: t()

Creates a bottom-oriented axis

generate(axis, opts \\ [])

@spec generate(t(), keyword()) :: Visualize.IR.Element.t()

Generates the axis as an IR Element tree.

Returns a group element containing the domain line and tick groups.

Options

:resolve - how the theme's slots render: :css (default) for references a stylesheet can override, :literal for the plain values a canvas needs

left(scale)

@spec left(struct()) :: t()

Creates a left-oriented axis

offset(axis, offset)

@spec offset(t(), number()) :: t()

Sets the pixel offset for crisp edges

render(axis, opts \\ [])

@spec render(t(), keyword()) :: String.t()

Renders the axis to a string using the specified backend.

Options

:backend - The backend to use (:svg, :canvas, or a module). Defaults to :svg.
:resolve - the theme mode of generate/2; defaults to Visualize.Theme.mode/1 of the backend, so an SVG axis carries CSS references and a canvas axis literals

right(scale)

@spec right(struct()) :: t()

Creates a right-oriented axis

theme(axis, theme)

@spec theme(t(), Visualize.Theme.t()) :: t()

Sets the theme the axis's colours, font and size resolve from

tick_format(axis, formatter)

@spec tick_format(t(), (any() -> String.t())) :: t()

Sets the tick format function

tick_padding(axis, padding)

@spec tick_padding(t(), number()) :: t()

Sets the padding between tick and label

tick_size(axis, size)

@spec tick_size(t(), number()) :: t()

Sets both inner and outer tick sizes

tick_size_inner(axis, size)

@spec tick_size_inner(t(), number()) :: t()

Sets the inner tick size (length of tick lines)

tick_size_outer(axis, size)

@spec tick_size_outer(t(), number()) :: t()

Sets the outer tick size (length of domain line extensions)

tick_values(axis, values)

@spec tick_values(t(), [any()]) :: t()

Sets explicit tick values

ticks(axis, count)

@spec ticks(t(), integer()) :: t()

Sets the approximate number of ticks

top(scale)

@spec top(struct()) :: t()

Creates a top-oriented axis