Scatter

Basic example · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Header

Add a chart title and supporting description inside the visualization.

StatusLoading

header

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Add a chart title and supporting description inside the visualization.

Header · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "locale": "en",
  "title": {
    "subtitle": "Scatter chart uses runnable data and options to demonstrate point mark; performance sampling.",
    "text": "Scatter"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "en",
  "title": {
    "subtitle": "Scatter chart uses runnable data and options to demonstrate point mark; performance sampling.",
    "text": "Scatter"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

StatusLoading

tooltip

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

Tooltip · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        }
      ],
      "title": "Scatter · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

{
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        }
      ],
      "title": "Scatter · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Theme

Apply the current built-in theme from the selector and update every active example together.

StatusLoading

theme

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Apply the current built-in theme from the selector and update every active example together.

Theme · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "locale": "en",
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "en",
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Legend

Explain the visual meaning of layers, categories, or continuous values.

StatusLoading

legend

Legend: legend · layers · one series

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Explain the visual meaning of layers, categories, or continuous values.

Legend · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "legend": {
    "interactive": true,
    "items": [
      {
        "id": "series",
        "label": "Scatter · Legend",
        "layerId": "layer-0"
      }
    ],
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Scatter · Legend",
    "visible": true
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "legend": {
    "interactive": true,
    "items": [
      {
        "id": "series",
        "label": "Scatter · Legend",
        "layerId": "layer-0"
      }
    ],
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Scatter · Legend",
    "visible": true
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Highlight

Emphasize a representative datum or spatial position to guide inspection.

StatusLoading

highlight

Point and range highlights: highlights[] · datum · x

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Emphasize a representative datum or spatial position to guide inspection.

Highlight · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "x",
        "type": "datum",
        "value": 50
      }
    }
  ],
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "x",
        "type": "datum",
        "value": 50
      }
    }
  ],
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Callout

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

StatusLoading

callout

Custom callouts: annotations[] · datum · x · callout · placement:auto

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

Callout · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "x",
        "type": "datum",
        "value": 50
      },
      "text": "Point and range highlights · 50"
    }
  ],
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      }
    }
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "x",
        "type": "datum",
        "value": 50
      },
      "text": "Point and range highlights · 50"
    }
  ],
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      }
    }
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Selection

Select and toggle data, then clear it from the background or Escape key.

StatusLoading

selection

Interactive selection: selection · multiple · toggle

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Select and toggle data, then clear it from the background or Escape key.

Selection · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "x",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "x",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

View controls

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

StatusLoading

controls

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

View controls · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Accessibility

Pair ARIA descriptions and keyboard guidance with a semantic data table.

StatusLoading

accessibility

Graflume.scatter() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Pair ARIA descriptions and keyboard guidance with a semantic data table.

Accessibility · Row data
`x`quantitative	`y`quantitative
14	38
20	45
25	41
38	57
45	63
50	55
64	72
72	79
78	70
61	88

Browser API · Portable schema

Browser API

Graflume.scatter()

const data = [
  {
    "group": "Starter",
    "name": "Atlas Lab",
    "size": 28,
    "x": 14,
    "y": 38,
    "z": 7
  },
  {
    "group": "Starter",
    "name": "Beacon Co",
    "size": 34,
    "x": 20,
    "y": 45,
    "z": 10
  },
  {
    "group": "Starter",
    "name": "Civic Data",
    "size": 31,
    "x": 25,
    "y": 41,
    "z": 12
  },
  {
    "group": "Growth",
    "name": "Delta Ops",
    "size": 64,
    "x": 38,
    "y": 57,
    "z": 15
  },
  {
    "group": "Growth",
    "name": "Ember Labs",
    "size": 78,
    "x": 45,
    "y": 63,
    "z": 18
  },
  {
    "group": "Growth",
    "name": "Foundry BI",
    "size": 70,
    "x": 50,
    "y": 55,
    "z": 21
  },
  {
    "group": "Scale",
    "name": "Harbor AI",
    "size": 112,
    "x": 64,
    "y": 72,
    "z": 25
  },
  {
    "group": "Scale",
    "name": "Lattice Co",
    "size": 128,
    "x": 72,
    "y": 79,
    "z": 28
  },
  {
    "group": "Scale",
    "name": "Meridian",
    "size": 118,
    "x": 78,
    "y": 70,
    "z": 31
  },
  {
    "group": "Opportunity",
    "name": "Northstar",
    "size": 52,
    "x": 61,
    "y": 88,
    "z": 34
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Scatter · Accessibility example"
  },
  "height": 620,
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
};

Graflume.scatter('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Scatter · Accessibility example"
  },
  "height": 620,
  "locale": "en",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Engagement score",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Satisfaction score",
    "type": "quantitative"
  }
}

Scatter · Basic implementation · Common features

The smallest runnable chart

Basic example

Graflume.scatter()

ChartSpec 0.1 · options

Features shared by every chart

Header

Graflume.scatter()

ChartSpec 0.1 · options

Tooltip

Graflume.scatter()

ChartSpec 0.1 · options

Theme

Graflume.scatter()

ChartSpec 0.1 · options

Legend

Graflume.scatter()

ChartSpec 0.1 · options

Highlight

Graflume.scatter()

ChartSpec 0.1 · options

Callout

Graflume.scatter()

ChartSpec 0.1 · options

Selection

Graflume.scatter()

ChartSpec 0.1 · options

View controls

Graflume.scatter()

ChartSpec 0.1 · options

Accessibility

Graflume.scatter()

ChartSpec 0.1 · options