DataGlass

Appearance

Auto Mark Examples ​

The auto mark automatically selects the most appropriate visualization based on data dimensions using smart heuristics. This is perfect for fast exploratory data analysis and quick prototyping.

Note: The auto mark was introduced in Observable Plot v0.6.3 and is designed for exploration. Its behavior may evolve with new Plot features. For production visualizations requiring stability, use explicit mark types.

Basic Two-Dimensional Scatterplot ​

When you provide two quantitative dimensions (x and y), the auto mark creates a scatterplot.

View Source
data:
    source: [
      {"mass": 3000, "flipper": 181, "species": "Adelie"},
      {"mass": 3750, "flipper": 191, "species": "Adelie"},
      {"mass": 3250, "flipper": 195, "species": "Adelie"},
      {"mass": 4500, "flipper": 213, "species": "Gentoo"},
      {"mass": 5200, "flipper": 220, "species": "Gentoo"},
      {"mass": 5400, "flipper": 228, "species": "Gentoo"},
      {"mass": 4750, "flipper": 197, "species": "Chinstrap"},
      {"mass": 3950, "flipper": 192, "species": "Chinstrap"},
      {"mass": 3800, "flipper": 193, "species": "Chinstrap"}
    ]
engine: plot
title: Penguin Body Mass vs. Flipper Length (Auto-detected Scatterplot)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: mass
      y: flipper

Scatterplot with Color Encoding ​

The auto mark supports all standard Plot encoding options like color.

View Source
data:
    source: [
      {"mass": 3000, "flipper": 181, "species": "Adelie"},
      {"mass": 3750, "flipper": 191, "species": "Adelie"},
      {"mass": 3250, "flipper": 195, "species": "Adelie"},
      {"mass": 4500, "flipper": 213, "species": "Gentoo"},
      {"mass": 5200, "flipper": 220, "species": "Gentoo"},
      {"mass": 5400, "flipper": 228, "species": "Gentoo"},
      {"mass": 4750, "flipper": 197, "species": "Chinstrap"},
      {"mass": 3950, "flipper": 192, "species": "Chinstrap"},
      {"mass": 3800, "flipper": 193, "species": "Chinstrap"}
    ]
engine: plot
title: Penguin Species Comparison (Color-Encoded)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: mass
      y: flipper
      fill: species

Single Dimension Histogram ​

When only one dimension is provided, the auto mark creates a histogram.

View Source
data:
    source: [
      {"weight": 65}, {"weight": 72}, {"weight": 68}, {"weight": 85},
      {"weight": 75}, {"weight": 70}, {"weight": 80}, {"weight": 78},
      {"weight": 71}, {"weight": 76}, {"weight": 82}, {"weight": 67},
      {"weight": 73}, {"weight": 79}, {"weight": 69}, {"weight": 74},
      {"weight": 77}, {"weight": 81}, {"weight": 66}, {"weight": 83}
    ]
engine: plot
title: Weight Distribution (Auto-detected Histogram)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: weight

Temporal Line Chart ​

For temporal data with a monotonic sequence, the auto mark creates a line chart.

View Source
data:
    source: [
      {"date": "2024-01-01", "value": 100},
      {"date": "2024-01-02", "value": 110},
      {"date": "2024-01-03", "value": 105},
      {"date": "2024-01-04", "value": 120},
      {"date": "2024-01-05", "value": 115},
      {"date": "2024-01-06", "value": 125},
      {"date": "2024-01-07", "value": 118}
    ]

engine: plot
title: Time Series Data (Auto-detected Line Chart)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: date
      y: value

Categorical Bar Chart ​

Categorical x-axis with quantitative y-axis produces a bar chart.

View Source
data:
    source: [
      {"category": "Apple", "value": 45},
      {"category": "Banana", "value": 30},
      {"category": "Orange", "value": 60},
      {"category": "Grape", "value": 25},
      {"category": "Mango", "value": 38}
    ]
engine: plot
title: Fruit Sales (Auto-detected Bar Chart)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: category
      y: value

Disabling Grouping with reducer: null ​

Use reducer: null to explicitly disable data grouping and show individual data points.

View Source
data:
    source: [
      {"weight": 65}, {"weight": 72}, {"weight": 68}, {"weight": 85},
      {"weight": 75}, {"weight": 70}, {"weight": 80}, {"weight": 78},
      {"weight": 71}, {"weight": 76}, {"weight": 82}, {"weight": 67}
    ]
engine: plot
title: Individual Weight Points (No Grouping)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: weight
      reducer: null

Forcing Specific Mark Type ​

You can override the auto mark's choice by specifying a mark type explicitly.

View Source
data:
    source: [
      {"x": 1, "y": 10}, {"x": 2, "y": 20}, {"x": 3, "y": 15},
      {"x": 4, "y": 25}, {"x": 5, "y": 18}, {"x": 6, "y": 22},
      {"x": 7, "y": 10}, {"x": 8, "y": 20}, {"x": 9, "y": 15},
      {"x": 10, "y": 25}, {"x": 11, "y": 18}, {"x": 12, "y": 22},
    ]

engine: plot
title: Forced Line Chart (Using mark option)
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: x
      y: y
      mark: line
      stroke: steelblue
      strokeWidth: 2

Size Encoding with Radius ​

Use radius (r) to encode a third dimension as point size.

View Source
data:
    source: [
      {"x": 10, "y": 20, "size": 5, "category": "A"},
      {"x": 15, "y": 25, "size": 10, "category": "B"},
      {"x": 20, "y": 15, "size": 8, "category": "A"},
      {"x": 25, "y": 30, "size": 12, "category": "C"},
      {"x": 30, "y": 22, "size": 7, "category": "B"},
      {"x": 35, "y": 28, "size": 15, "category": "C"}
    ]
engine: plot
title: Scatterplot with Size Encoding
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: x
      y: y
      r: size
      fill: category

Faceted Visualization ​

Use faceting (fx/fy) to create small multiples for different categories.

View Source
data:
    source: [
      {"x": 1, "y": 10, "species": "Adelie"},
      {"x": 2, "y": 20, "species": "Adelie"},
      {"x": 3, "y": 15, "species": "Adelie"},
      {"x": 1, "y": 12, "species": "Gentoo"},
      {"x": 2, "y": 22, "species": "Gentoo"},
      {"x": 3, "y": 18, "species": "Gentoo"},
      {"x": 1, "y": 8, "species": "Chinstrap"},
      {"x": 2, "y": 18, "species": "Chinstrap"},
      {"x": 3, "y": 13, "species": "Chinstrap"}
    ]
engine: plot
title: Faceted by Species
width: 600
height: 400
margin:
  top: 60
marks:
  - type: auto
    configuration:
      x: x
      y: y
      fx: species
      fill: species

Multi-Series Temporal Data ​

The auto mark handles multiple series automatically when color encoding is provided.

View Source
data:
    source: [
      {"date": "2024-01", "value": 100, "series": "A"},
      {"date": "2024-02", "value": 110, "series": "A"},
      {"date": "2024-03", "value": 105, "series": "A"},
      {"date": "2024-01", "value": 80, "series": "B"},
      {"date": "2024-02", "value": 95, "series": "B"},
      {"date": "2024-03", "value": 90, "series": "B"},
      {"date": "2024-01", "value": 120, "series": "C"},
      {"date": "2024-02", "value": 125, "series": "C"},
      {"date": "2024-03", "value": 130, "series": "C"}
    ]
engine: plot
title: Multiple Time Series
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: date
      y: value
      stroke: series

Key Features ​

Automatic Mark Selection ​

The auto mark uses heuristics to select the best mark type:

  • Two quantitative dimensions (x, y) → Scatterplot (dot mark)
  • One quantitative + monotonic temporal → Line chart
  • Single quantitative dimension → Histogram (rect/bar with binning)
  • Categorical + quantitative → Bar chart

Supported Configuration Options ​

All standard Plot mark options are supported:

Position Channels ​

  • x, y - Primary position encoding
  • fx, fy - Faceting for small multiples

Visual Encoding ​

  • fill, stroke - Color encoding (constant or field name)
  • r - Radius/size encoding (constant or field name)
  • opacity, fillOpacity, strokeOpacity - Transparency
  • strokeWidth, strokeDasharray - Stroke styling

Auto-Specific Options ​

  • reducer - Control aggregation (e.g., "sum", "count", "mean", or null to disable)
  • mark - Force a specific mark type (e.g., "line", "dot", "bar")

Interaction ​

  • tip - Enable tooltips (defaults to true for exploratory nature)
  • title - Custom tooltip content
  • href - Make marks clickable links

Use Cases ​

  1. Exploratory Data Analysis: Quickly visualize data without choosing mark types
  2. Rapid Prototyping: Get a useful plot instantly during development
  3. Teaching: Help beginners learn visualization without overwhelming decisions
  4. Adaptive Dashboards: Create visualizations that adapt to data characteristics
  5. Data Quality Checks: Fast visual inspection of data distributions

Important Notes ​

  • The auto mark's heuristics may evolve with new Observable Plot versions
  • For production visualizations requiring stability, use explicit mark types
  • The auto mark prioritizes getting something useful quickly over perfect control
  • Always validate that the auto mark's choice matches your intent

When to Use Explicit Marks ​

Consider using explicit mark types when:

  • You need precise control over the visualization
  • The visualization must remain stable across Plot versions
  • Performance is critical (explicit marks avoid heuristic overhead)
  • The data characteristics don't match typical patterns

See Also ​

Released under the MIT License. Built by Boundary Lab.

Copyright © 2024-2025 DataGlass