Scales Reference

Configure axis, color, and other scales for your charts.

---

What are Scales?

Scales map data values to visual properties:

• Position scales (x, y) map data to coordinates
• Color scales map data to colors
• Size scales (r) map data to dot radius

scales:
  x:
    type: time
  y:
    domain: [0, 100]
  color:
    scheme: "tableau10"

---

Scale Types

Quantitative (numbers)

Type	Description
linear	Linear interpolation (default for numbers)
log	Logarithmic scale
sqrt	Square root scale
pow	Power scale
symlog	Symmetric log (handles negative values)

Temporal (dates)

Type	Description
time	Local time
utc	UTC time

Categorical (discrete values)

Type	Description
band	Equal-width bands (default for bar charts)
point	Points at band centers
ordinal	Categorical mapping

Classification

Type	Description
quantile	Equal-count bins
quantize	Equal-range bins
threshold	Custom threshold bins

---

Common Options

domain

Set the input range:

scales:
  y:
    domain: [0, 100]      # Fixed range

  color:
    domain: ["A", "B", "C"]  # Explicit categories

range

Set the output range:

scales:
  y:
    range: [400, 0]       # Inverted (SVG coordinates)

  color:
    range: ["red", "blue", "green"]  # Custom colors

nice

Round domain to nice values:

scales:
  y:
    nice: true           # Auto-round to nice numbers
    nice: 5              # Round to 5 ticks

zero

Force zero in domain:

scales:
  y:
    zero: true           # Always start at 0

reverse

Reverse the scale direction:

scales:
  y:
    reverse: true

---

Position Scales (x, y)

Linear Scale

scales:
  y:
    type: linear
    domain: [0, 100]
    nice: true

Log Scale

scales:
  y:
    type: log
    domain: [1, 1000000]

Time Scale

scales:
  x:
    type: time
    domain: ["2024-01-01", "2024-12-31"]

Band Scale (categorical)

scales:
  x:
    type: band
    padding: 0.2         # Space between bars

---

Color Scales

Color Schemes

Use built-in color schemes:

scales:
  color:
    scheme: "tableau10"

Categorical schemes:

Scheme	Colors	Description
category10	10	D3 default
paired	12	Paired colors
set1	9	ColorBrewer
set2	8	ColorBrewer
set3	12	ColorBrewer
tableau10	10	Tableau default
observable10	10	Observable default

Sequential schemes:

Scheme	Description
blues	Light to dark blue
greens	Light to dark green
reds	Light to dark red
purples	Light to dark purple
oranges	Light to dark orange
greys	Light to dark grey
viridis	Perceptually uniform
plasma	Perceptually uniform
warm	Warm colors
cool	Cool colors

Diverging schemes:

Scheme	Description
rdbu	Red to blue
rdylgn	Red-yellow-green
brbg	Brown-blue-green
piyg	Pink-yellow-green
prgn	Purple-green
puor	Purple-orange
spectral	Rainbow

Custom Colors

Map specific values to colors:

scales:
  color:
    domain: ["Success", "Warning", "Error"]
    range: ["#22c55e", "#f59e0b", "#ef4444"]

Sequential Color

For continuous data:

scales:
  color:
    type: linear
    scheme: "blues"
    domain: [0, 100]

---

Radius Scale (r)

For bubble charts:

scales:
  r:
    type: sqrt          # Area proportional to value
    domain: [0, 1000]
    range: [2, 40]      # Min and max radius

---

Opacity Scale

scales:
  opacity:
    type: linear
    domain: [0, 100]
    range: [0.2, 1]

---

Facet Scales (fx, fy)

For faceted charts:

facet:
  x: category
scales:
  fx:
    padding: 0.1

---

Axis Configuration

Configure axis appearance within scales:

scales:
  x:
    label: "Date"
    ticks: 6
    tickFormat: "%b %Y"

  y:
    label: "Revenue ($)"
    tickFormat: ",.0f"
    percent: true        # Format as percentage

Tick Format Specifiers

Format	Example	Output
.0f	1234	"1234"
,.0f	1234	"1,234"
.2f	3.14159	"3.14"
.1%	0.45	"45.0%"
$,.0f	1234	"$1,234"
%b %Y	Date	"Jan 2024"
%Y-%m-%d	Date	"2024-01-15"

---

Complete Example

type: scatter
data:
  file: data/companies.csv
x: revenue
y: profit
r: employees
color: industry
scales:
  x:
    type: log
    label: "Revenue ($M)"
    tickFormat: "$,.0f"
    nice: true
  y:
    type: linear
    label: "Profit Margin (%)"
    domain: [-20, 40]
    tickFormat: ".0%"
  r:
    type: sqrt
    range: [3, 30]
  color:
    scheme: "tableau10"
title: "Company Performance"

---

Tips

Auto-detection: DataGlass usually detects the right scale type automatically. Only configure when you need specific behavior.

Nice values: Use nice: true to get clean axis tick values like 0, 25, 50, 75, 100 instead of 0, 23, 46, 69, 92.

Log scales: Log scales can't handle zero or negative values. Filter your data or use symlog.

Color accessibility: Use tableau10 or observable10 for colorblind-friendly palettes.

---

See Also

• YAML Schema - Complete configuration
• Marks Reference - Visual elements
• Chart Gallery - Examples with scales