TernaryPlot.com

PricingFAQDocsLogin

Scales

Scales allow you to map data values from your "value" column to visual properties like size, color, and symbol shape. This powerful feature helps you encode additional dimensions of data in your ternary plots, turning simple scatter plots into rich, multi-dimensional visualizations.

Click the Scales button in the table toolbar to open the scales configuration dialog.

Scales create a mathematical mapping from your data values to visual properties. Think of them as translation functions:

Data Value → Scale Function → Visual Property

Example with a linear size scale:

  • Input: Temperature 25°C → Output: Point size 50 pixels
  • Input: Temperature 75°C → Output: Point size 150 pixels

The scale automatically interpolates between your minimum and maximum values, ensuring smooth transitions.

Deep Dive into D3 Scales

TernaryPlot.com uses D3.js scale functions under the hood. Want to learn more about how scales work?

When you open the Scales dialog, the system automatically analyzes your "value" column and displays summary information.

The dialog shows:

  • Total values: Number of data points
  • Range: Minimum and maximum values
  • Mean: Average value
  • Median: Middle value

Example display:

Detected: 50 values (numeric)
Range: 10.25 → 95.78
Mean: 52.34   Median: 51.22

The dialog shows:

  • Total values: Number of data points
  • Unique values: Number of distinct categories
  • Values: List of all categories (if 5 or fewer) or a sample of 5 categories

Example display:

Detected: 50 values (5 unique categorical)
Values: Red, Green, Blue, Yellow, Purple

Choose which visual property to map your data to:

Maps numeric values to point sizes. Larger values produce larger circles, smaller values produce smaller circles.

Note: The Size option is disabled for categorical data. Use Color or Symbol for categorical values.

Important: Use Square Root Scale for Symbol Sizes

For circle symbols, Square Root scale is the correct choice in almost all cases. Here's why:

Since circle area = π × r², if you want the area (what your eye perceives) to be proportional to your data values, then the radius (what you specify) must be proportional to the square root of your data.

Example: If value B is 4× larger than value A:

  • ✅ With Square Root scale: radius is 2× larger → area is 4× larger (correct!)
  • ❌ With Linear scale: radius is 4× larger → area is 16× larger (visually misleading!)

Linear and other scales will make larger values appear disproportionately bigger than they actually are.

Available scale types:

  • Square Root (Recommended) - Makes circle area proportional to data values. This is the perceptually correct choice for circle symbols. If value B is 4× larger than value A, the circle appears 4× larger.

  • Linear - Makes circle radius proportional to data values. Warning: This makes larger values appear much bigger than they should (4× larger value looks 16× bigger). Only use if you specifically want to encode data in radius rather than area.

  • Logarithmic - Compresses large values, expands small values. Useful for data spanning multiple orders of magnitude (e.g., 1 to 10,000), but still makes area non-proportional to data.

  • Power - Expands the upper range and compresses lower values. Makes the visual distortion even worse than linear scale. Rarely appropriate for symbol sizes.

  • Min Size: Smallest point size in pixels (default: 10)
  • Max Size: Largest point size in pixels (default: 100)

The dialog shows a live preview with:

  • Visual representation of the smallest and largest circles
  • The data value for each
  • The resulting size in pixels after the scale is applied

The preview updates in real-time as you change the scale type or size range.

Note on sizes: Point sizes represent area in square pixels, not radius. A size of 100 creates a circle with radius of approximately 5.64 pixels (calculated as √(100/π)).

Maps values to point colors using color schemes.

Color Mapping Modes

For numeric data, you can choose between two mapping approaches:

  • Continuous - Creates smooth color gradients where each data value maps to a unique color. Best for showing fine-grained variations in your data.

  • Quantize (Discrete Bins) - Divides your data range into equal-width bins and assigns a distinct color to each bin. Best for creating choropleth-style maps with clear color classes.

When you select Quantize, you can configure:

  • Number of Bins: Choose 3-9 discrete color classes (default: 5)
  • The data range is automatically divided into equal-width intervals
When to Use Quantize vs Continuous

Use Continuous when:

  • You want to show smooth gradations in your data
  • Your data has many distinct values
  • You need maximum precision in color encoding

Use Quantize when:

  • You want clear, distinct color classes that are easy to identify
  • You're creating a choropleth-style visualization
  • You want simplified legends that show value ranges (e.g., "0-20", "20-40")
  • You have readers who find continuous gradients harder to interpret

Quantize scales use equal-interval binning based on D3's scaleQuantize. Learn more about quantize, quantile, and threshold scales.

Choose from Sequential or Diverging color schemes:

Sequential Schemes

Sequential schemes work best for data that goes from low to high values without a meaningful center point.

Viridis - Perceptually uniform, colorblind-friendly

Plasma - Perceptually uniform, colorblind-friendly

Inferno - Perceptually uniform, colorblind-friendly

Magma - Perceptually uniform, colorblind-friendly

Warm - Temperature-based gradient

Cool - Temperature-based gradient

Turbo - Rainbow-like gradient

Diverging Schemes

Diverging schemes work best when your data has a meaningful center point (e.g., temperature anomalies around 0°C, profit/loss data).

Red-Yellow-Blue
Red-Yellow-Green
Spectral
Pink-Yellow-Green

Choose from 9 categorical color schemes. Each scheme provides distinct colors for different categories in your data.

Category 10 - D3's default categorical colors

Tableau 10 - Tableau's categorical palette

Observable 10 - Observable's categorical palette

Accent - ColorBrewer palette

Paired - ColorBrewer palette with paired colors

Dark 2 - ColorBrewer palette

Set 1 - ColorBrewer palette

Set 2 - ColorBrewer palette

Set 3 - ColorBrewer palette

Note: When you open the Scales dialog, each color scheme will display only the number of colors needed for your unique values. If you have more than 10 unique categorical values, colors will cycle/repeat for additional values beyond the scheme's range.

Maps categorical values to different symbol shapes.

Note: Symbol mapping only works with categorical data.

Filled symbols (7):

  • circle, square, diamond, triangle, cross, star, wye

Stroked symbols (7):

  • circle-stroke, plus, x, triangle-stroke, asterisk, square-stroke, diamond-stroke

See the Points documentation for visual examples of each symbol type.

For each unique value in your data, you can select a symbol from a grid:

  • Preview of the currently selected symbol
  • Value name
  • 7×2 grid showing all 14 available symbols
  • Click any symbol to assign it to that value

Scenario: You have temperature measurements ranging from 15°C to 35°C and want to show higher temperatures with larger points.

Steps:

  1. Add your temperature values to the "value" column in your points table
  2. Click the Scales button in the table toolbar
  3. The dialog detects numeric data and shows: Range: 15 → 35, Mean: 25, Median: 24
  4. Select Size as the output property
  5. Choose Linear scale type
  6. Set Min Size: 20, Max Size: 80
  7. The preview shows a small circle (15°C → size 20) and large circle (35°C → size 80)
  8. Click Apply Scale

Result: Your plot now shows temperature variation through point size - cooler samples appear smaller, warmer samples appear larger, with smooth gradation in between.

Scenario: You have rocks classified as "Igneous", "Sedimentary", and "Metamorphic" and want each type to have a distinct color.

Steps:

  1. Add your rock types to the "value" column (text values)
  2. Click the Scales button
  3. The dialog detects: 3 unique categorical values
  4. Select Color as the output property
  5. Browse the categorical color schemes - try Tableau 10 or Set 1
  6. The preview shows exactly 3 color swatches for your 3 rock types
  7. Click Apply Scale

Result: Each rock type now has its own distinct color, making it easy to identify different types across your ternary composition space.

Scenario: You have samples from three regions: "North", "South", "East" and want to distinguish them by shape.

Steps:

  1. Add your region names to the "value" column
  2. Click the Scales button
  3. The dialog detects: 3 unique categorical values
  4. Select Symbol as the output property
  5. Assign symbols to each region:
    • North → triangle
    • South → square
    • East → diamond
  6. Click Apply Scale

Result: Each region's samples display with their assigned symbol shape, making regional patterns immediately visible even without color.

Scenario: You have pollution measurements from 0.1 to 1000 ppm - a very wide range spanning 4 orders of magnitude.

Steps:

  1. Add your concentration values to the "value" column
  2. Click the Scales button
  3. The dialog shows: Range: 0.1 → 1000
  4. Select Size as the output property
  5. Try Linear first - notice most points cluster at the small end
  6. Switch to Logarithmic scale type
  7. Set Min Size: 15, Max Size: 100
  8. The preview shows better distribution of sizes across the range
  9. Click Apply Scale

Result: The logarithmic transformation prevents extreme values from dominating. Low concentrations (0.1-10 ppm) are more visible, while high concentrations (100-1000 ppm) remain distinct without overwhelming the plot.

Scenario: You have temperature anomalies ranging from -5°C to +5°C relative to a baseline, and want to show cooling (negative) vs warming (positive) with contrasting colors.

Steps:

  1. Add your anomaly values to the "value" column
  2. Click the Scales button
  3. Select Color as the output property
  4. Choose a diverging scheme like Red-Yellow-Blue
  5. The scheme automatically centers at the midpoint of your range (0°C)
  6. Cold anomalies (-5°C) map to blue, warm anomalies (+5°C) map to red, neutral (0°C) maps to yellow
  7. Click Apply Scale

Result: Your plot clearly distinguishes cooling trends (blue points) from warming trends (red points), with the center color representing no change.

Scenario: You have soil pH measurements ranging from 4.5 to 8.5 and want to create a choropleth-style visualization with distinct color classes representing acidity levels.

Steps:

  1. Add your pH values to the "value" column
  2. Click the Scales button
  3. The dialog shows: Range: 4.5 → 8.5, Mean: 6.3, Median: 6.5
  4. Select Color as the output property
  5. Choose Quantize (Discrete Bins) mode
  6. Set Number of Bins to 5 (creates 5 pH classes)
  7. Select a sequential color scheme like Viridis or RdYlGn
  8. The preview shows 5 discrete color swatches with boundaries:
    • 4.5-5.3 → Dark purple (very acidic)
    • 5.3-6.1 → Medium purple (acidic)
    • 6.1-6.9 → Green-yellow (slightly acidic to neutral)
    • 6.9-7.7 → Yellow-green (slightly alkaline)
    • 7.7-8.5 → Bright yellow (alkaline)
  9. Click Apply Scale
  10. Download the legend SVG for your publication

Result: Your plot shows clear pH zones with distinct colors, making it easy to identify acidic, neutral, and alkaline regions at a glance. The discrete bins are easier for readers to interpret than a continuous gradient, and the downloadable legend clearly shows which colors correspond to which pH ranges.

For Size Scales:

  • Always use Square Root scale unless you have a specific reason not to - it makes circle area proportional to your data values
  • Only use Logarithmic if you need to compress extreme values (data spanning 3+ orders of magnitude like 1 to 10,000)
  • Avoid Linear and Power scales - they create visual distortion where larger values appear much bigger than they should
  • Keep size ranges manageable: 10-100 pixels works well for most cases
  • Avoid sizes smaller than 5 pixels as they become hard to see
  • The preview updates immediately so you can see the effect of different scale types

For Color Scales:

  • Choose Continuous mode for smooth gradients and precise color encoding
  • Choose Quantize mode for choropleth-style maps with clear color classes
  • Use 3-5 bins for quantize if you want broad categories, 6-9 bins for finer divisions
  • Use Sequential schemes (Viridis, Plasma, etc.) for data going from low to high
  • Use Diverging schemes (Red-Yellow-Blue, etc.) when you have a meaningful midpoint like 0
  • Use Categorical schemes for discrete categories, not continuous data
  • The Viridis family (Viridis, Plasma, Inferno, Magma) are colorblind-friendly
  • Preview swatches show exactly what colors will be applied to your data
  • Quantize bins use equal intervals, so extreme outliers may dominate a single bin

For Symbol Scales:

  • Use distinct, easy-to-differentiate symbols for maximum clarity
  • Limit to 5-7 unique categories for best readability

Colorblind-Friendly Palettes

The Viridis family of color schemes (Viridis, Plasma, Inferno, Magma) are specifically designed to be:

  • Perceptually uniform (equal data steps = equal perceived color changes)
  • Readable by people with common forms of color blindness
  • Distinguishable when printed in grayscale

For categorical data, test your chosen palette or consider using symbol encoding alongside color.

Shows two circles side-by-side:

  • Smallest: Circle for minimum data value with actual size
  • Largest: Circle for maximum data value with actual size

Each preview displays:

  • Visual representation at actual size
  • Data value
  • Resulting size in pixels

The circles resize in real-time as you adjust scale type or size range.

Each color scheme shows a swatch with:

  • Actual colors from the scheme
  • For categorical data: only the number of colors you need
  • Hover to see scheme name
  • Two-column grid for sequential/diverging comparison

For quantize mode, the preview shows:

  • Discrete color swatches (one for each bin)
  • Bin boundary labels below each swatch
  • Exact value ranges for each color class

Each value shows:

  • Current symbol selection
  • Grid of all 14 symbols to choose from
  • Click any symbol to assign it
  • Visual update when selection changes

The Scales dialog automatically generates downloadable legend graphics for size and color scales. These legends help readers interpret your plots by showing the mapping between data values and visual properties.

When configuring a size scale for numeric data, a "Legend Preview" section appears below the size preview. This shows:

  • Graduated circles: 2-4 representative circles from smallest to largest
  • Value labels: Data values corresponding to each circle size
  • Title: "Point size" (customizable in the SVG)
  • Download button: Exports as standalone SVG

The legend automatically calculates appropriate representative values across your data range, showing how different data values map to different circle sizes.

Use cases:

  • Include in publications alongside your ternary plot
  • Add to presentations to explain size encoding
  • Combine with your plot in vector graphics software like Adobe Illustrator or Inkscape

When configuring a continuous color scale for numeric data (sequential or diverging schemes), a "Legend Preview" section appears below the color scheme selection. This shows:

  • Color gradient: Smooth 256-step gradient from minimum to maximum
  • Axis with ticks: Value labels at regular intervals
  • Title: "Value" (customizable in the SVG)
  • Download button: Exports as standalone SVG

The legend uses the same color interpolation as your data, ensuring an exact match between the legend and your plot.

Use cases:

  • Essential for interpreting continuous color scales in publications
  • Show readers how to decode color-encoded data values
  • Professional-looking color bars for scientific figures

When configuring a quantize color scale for numeric data, a discrete bin legend appears below the color scheme selection. This shows:

  • Discrete color swatches: One swatch for each bin, arranged horizontally
  • Bin boundaries: Value labels at each boundary showing the exact ranges
  • Title: "Value" (customizable in the SVG)
  • Download button: Exports as standalone SVG

The legend displays the exact bin thresholds calculated by D3's quantize scale, making it easy for readers to identify which color corresponds to which value range.

Use cases:

  • Choropleth-style visualizations with distinct color classes
  • Publications where readers need to identify specific value ranges
  • Scientific figures requiring clear categorical color coding of continuous data

Both legend types download as standalone SVG files so they are editable in Inkscape, Adobe Illustrator, Figma, or any SVG editor.

Workflow:

  1. Configure your scale in the dialog
  2. Review the legend preview
  3. Click "Download SVG"
  4. Open the SVG in your graphics software
  5. Customize labels, colors, or positioning as needed
  6. Place alongside your ternary plot

Note: Legends are generated on-demand from your current data and scale settings. You can regenerate them anytime by reopening the Scales dialog with the same data.

Applying a scale creates a checkpoint in your undo history:

  • Press Cmd+Z (Mac) or Ctrl+Z (Windows) to undo
  • Press Cmd+Shift+Z or Ctrl+Shift+Z to redo

This lets you experiment with different scale configurations and easily revert changes.

D3 symbol sizes represent area in square pixels, not radius. For circles:

  • Area = π × r²
  • Radius from size: r = √(size / π)

Example: A size of 100 creates a circle with radius ≈5.64 pixels.

Color schemes use perceptually uniform color spaces where possible:

  • Equal data steps = equal perceived color differences
  • Colorblind-friendly (especially Viridis family)
  • Maintains distinction in grayscale

Scales modify your data table directly:

  • Values are written to the size/fill/symbol columns
  • Changes persist in local storage or cloud sync
  • Undo/redo uses checkpoints for rollback

"No values detected in the 'value' column"

Your data table needs a column named "value" with data in it. Check that:

  • The column exists
  • It contains non-empty values
  • Values aren't all null

"Size scales require numeric values"

The Size output property only works with numeric data. The Size radio button will be disabled for categorical data. Use Color or Symbol for categorical values instead.

Warning: "You have X unique values. Most categorical schemes have 8-12 colors..."

You have more categories than colors in most schemes. Options:

  • Colors will cycle/repeat for additional values
  • Group similar categories together to reduce count
  • Use a different visual encoding (size, symbol)

Preview doesn't match the plot

The preview shows exact sizes and colors as they'll appear. If different:

  • Click "Apply Scale" to update the plot
  • Check if you're viewing the correct table
  • Try refreshing the page

Scale isn't updating

Scales only apply when you click "Apply Scale":

  • The preview updates in real-time
  • The plot updates after clicking Apply
  • Check that you clicked the Apply button