Map

Geographic region chart

Geographic region chart uses runnable data and options to demonstrate embedded Natural Earth basemap; general fit and clip policy.

StatusLoading

geo
embedded Natural Earth basemap
general fit and clip policy

Graflume.geo() 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

Geographic region chart uses runnable data and options to demonstrate embedded Natural Earth basemap; general fit and clip policy.

Geographic region chart · Row data
`region`ordinal	`value`quantitative
KR	92
JPN	84
SGP	79
USA	88
BRA	63
FRA	76
ZAF	58
AUS	72

Browser API · Portable schema

Browser API

Graflume.geo()

const data = [
  {
    "region": "KR",
    "value": 92
  },
  {
    "region": "JPN",
    "value": 84
  },
  {
    "region": "SGP",
    "value": 79
  },
  {
    "region": "USA",
    "value": 88
  },
  {
    "region": "BRA",
    "value": 63
  },
  {
    "region": "FRA",
    "value": 76
  },
  {
    "region": "ZAF",
    "value": 58
  },
  {
    "region": "AUS",
    "value": 72
  }
];

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": "Map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "region",
          "format": "auto",
          "label": "Region"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "choropleth"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Geographic region chart uses runnable data and options to demonstrate embedded Natural Earth basemap; general fit and clip policy.",
    "text": "Map"
  },
  "width": "container",
  "x": {
    "field": "region",
    "title": "Longitude",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.geo('#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": "Map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "region",
          "format": "auto",
          "label": "Region"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "choropleth"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Geographic region chart uses runnable data and options to demonstrate embedded Natural Earth basemap; general fit and clip policy.",
    "text": "Map"
  },
  "width": "container",
  "x": {
    "field": "region",
    "title": "Longitude",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Map uses runnable data and options to demonstrate point/region/choropleth/route/heat halo; flat geodesics.

StatusLoading

map
point/region/choropleth/route/heat halo
flat geodesics

Graflume.map() 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

Map · Row data
`longitude`quantitative	`latitude`quantitative	`value`quantitative
126.98	37.57	92
139.69	35.68	78
103.82	1.35	64
77.21	28.61	58
2.35	48.86	73
-74	40.71	88
-122.42	37.77	69
151.21	-33.87	51

Map uses runnable data and options to demonstrate point/region/choropleth/route/heat halo; flat geodesics.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "size": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map uses runnable data and options to demonstrate point/region/choropleth/route/heat halo; flat geodesics.",
    "text": "Map"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "size": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map uses runnable data and options to demonstrate point/region/choropleth/route/heat halo; flat geodesics.",
    "text": "Map"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Flow map

Flow map uses runnable data and options to demonstrate optional graticule; provider-backed tile lifecycle, cache and attribution.

StatusLoading

flow-map
optional graticule
provider-backed tile lifecycle, cache and attribution

Graflume.flowMap() 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

Flow map · Row data
`longitude`quantitative	`latitude`quantitative	`longitude2`quantitative	`latitude2`quantitative	`value`quantitative
126.98	37.57	139.69	35.68	92
139.69	35.68	103.82	1.35	78
103.82	1.35	77.21	28.61	64
77.21	28.61	2.35	48.86	58
2.35	48.86	-74	40.71	73
-74	40.71	-122.42	37.77	88
-122.42	37.77	-99.13	19.43	69
151.21	-33.87	126.98	37.57	51

Flow map uses runnable data and options to demonstrate optional graticule; provider-backed tile lifecycle, cache and attribution.

Browser API · Portable schema

Browser API

Graflume.flowMap()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map · Flow map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "longitude2",
          "format": "number",
          "label": "Longitude2"
        },
        {
          "field": "latitude2",
          "format": "number",
          "label": "Latitude2"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Flow map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "latitude2": "latitude2",
      "longitude2": "longitude2",
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Flow map uses runnable data and options to demonstrate optional graticule; provider-backed tile lifecycle, cache and attribution.",
    "text": "Map · Flow map"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.flowMap('#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": "Map · Flow map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "longitude2",
          "format": "number",
          "label": "Longitude2"
        },
        {
          "field": "latitude2",
          "format": "number",
          "label": "Latitude2"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Flow map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "latitude2": "latitude2",
      "longitude2": "longitude2",
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Flow map uses runnable data and options to demonstrate optional graticule; provider-backed tile lifecycle, cache and attribution.",
    "text": "Map · Flow map"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Geographic heatmap

Geographic heatmap uses runnable data and options to demonstrate bounded equirectangular viewport and coordinate validation; country, subdivision, and arbitrary-feature multi-selection.

StatusLoading

geo-heatmap
bounded equirectangular viewport and coordinate validation
country, subdivision, and arbitrary-feature multi-selection

Graflume.geoHeatmap() 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

Geographic heatmap · Row data
`longitude`quantitative	`latitude`quantitative	`value`quantitative
126.98	37.57	92
139.69	35.68	78
103.82	1.35	64
77.21	28.61	58
2.35	48.86	73
-74	40.71	88
-122.42	37.77	69
151.21	-33.87	51

Geographic heatmap uses runnable data and options to demonstrate bounded equirectangular viewport and coordinate validation; country, subdivision, and arbitrary-feature multi-selection.

Browser API · Portable schema

Browser API

Graflume.geoHeatmap()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map · Geographic heatmap example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Geographic heatmap",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Geographic heatmap uses runnable data and options to demonstrate bounded equirectangular viewport and coordinate validation; country, subdivision, and arbitrary-feature multi-selection.",
    "text": "Map · Geographic heatmap"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.geoHeatmap('#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": "Map · Geographic heatmap example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Geographic heatmap",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Geographic heatmap uses runnable data and options to demonstrate bounded equirectangular viewport and coordinate validation; country, subdivision, and arbitrary-feature multi-selection.",
    "text": "Map · Geographic heatmap"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Map bubble chart

Map bubble chart uses runnable data and options to demonstrate embedded Natural Earth attribution toggle; selection-aware automatic bounds and overlay clipping.

StatusLoading

map-bubble
embedded Natural Earth attribution toggle
selection-aware automatic bounds and overlay clipping

Graflume.mapBubble() 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

Map bubble chart · Row data
`longitude`quantitative	`latitude`quantitative	`value`quantitative
126.98	37.57	92
139.69	35.68	78
103.82	1.35	64
77.21	28.61	58
2.35	48.86	73
-74	40.71	88
-122.42	37.77	69
151.21	-33.87	51

Map bubble chart uses runnable data and options to demonstrate embedded Natural Earth attribution toggle; selection-aware automatic bounds and overlay clipping.

Browser API · Portable schema

Browser API

Graflume.mapBubble()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map · Map bubble chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Map bubble chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "size": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map bubble chart uses runnable data and options to demonstrate embedded Natural Earth attribution toggle; selection-aware automatic bounds and overlay clipping.",
    "text": "Map · Map bubble chart"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.mapBubble('#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": "Map · Map bubble chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Map bubble chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "size": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map bubble chart uses runnable data and options to demonstrate embedded Natural Earth attribution toggle; selection-aware automatic bounds and overlay clipping.",
    "text": "Map · Map bubble chart"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Map line chart

Map line chart uses runnable data and options to demonstrate globe great-circle routes; versioned lazy boundary packs with byte-length and SHA-256 verification.

StatusLoading

map-line
globe great-circle routes
versioned lazy boundary packs with byte-length and SHA-256 verification

Graflume.mapLine() 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

Map line chart · Row data
`longitude`quantitative	`latitude`quantitative	`longitude2`quantitative	`latitude2`quantitative	`value`quantitative
126.98	37.57	139.69	35.68	92
139.69	35.68	103.82	1.35	78
103.82	1.35	77.21	28.61	64
77.21	28.61	2.35	48.86	58
2.35	48.86	-74	40.71	73
-74	40.71	-122.42	37.77	88
-122.42	37.77	-99.13	19.43	69
151.21	-33.87	126.98	37.57	51

Map line chart uses runnable data and options to demonstrate globe great-circle routes; versioned lazy boundary packs with byte-length and SHA-256 verification.

Browser API · Portable schema

Browser API

Graflume.mapLine()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map · Map line chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "longitude2",
          "format": "number",
          "label": "Longitude2"
        },
        {
          "field": "latitude2",
          "format": "number",
          "label": "Latitude2"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Map line chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "latitude2": "latitude2",
      "longitude2": "longitude2",
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map line chart uses runnable data and options to demonstrate globe great-circle routes; versioned lazy boundary packs with byte-length and SHA-256 verification.",
    "text": "Map · Map line chart"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.mapLine('#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": "Map · Map line chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "longitude2",
          "format": "number",
          "label": "Longitude2"
        },
        {
          "field": "latitude2",
          "format": "number",
          "label": "Latitude2"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Map line chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "latitude2": "latitude2",
      "longitude2": "longitude2",
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map line chart uses runnable data and options to demonstrate globe great-circle routes; versioned lazy boundary packs with byte-length and SHA-256 verification.",
    "text": "Map · Map line chart"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Map point chart

Map point chart uses runnable data and options to demonstrate back-face occlusion and orbit; bounded coordinate-detail preparation without feature or ring sampling.

StatusLoading

map-point
back-face occlusion and orbit
bounded coordinate-detail preparation without feature or ring sampling

Graflume.mapPoint() 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

Map point chart · Row data
`longitude`quantitative	`latitude`quantitative	`value`quantitative
126.98	37.57	92
139.69	35.68	78
103.82	1.35	64
77.21	28.61	58
2.35	48.86	73
-74	40.71	88
-122.42	37.77	69
151.21	-33.87	51

Map point chart uses runnable data and options to demonstrate back-face occlusion and orbit; bounded coordinate-detail preparation without feature or ring sampling.

Browser API · Portable schema

Browser API

Graflume.mapPoint()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map · Map point chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Map point chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "size": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map point chart uses runnable data and options to demonstrate back-face occlusion and orbit; bounded coordinate-detail preparation without feature or ring sampling.",
    "text": "Map · Map point chart"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.mapPoint('#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": "Map · Map point chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Map point chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "size": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Map point chart uses runnable data and options to demonstrate back-face occlusion and orbit; bounded coordinate-detail preparation without feature or ring sampling.",
    "text": "Map · Map point chart"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Tiled map

Tiled map uses runnable data and options to demonstrate source/layer/projection lifecycle; explicit feature-to-row joins and collision-aware geographic labels.

StatusLoading

tiled-map
source/layer/projection lifecycle
explicit feature-to-row joins and collision-aware geographic labels

Graflume.tiledMap() 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

Tiled map · Row data
`longitude`quantitative	`latitude`quantitative
126.98	37.57
139.69	35.68
103.82	1.35
77.21	28.61
2.35	48.86
-74	40.71
-122.42	37.77
151.21	-33.87

Tiled map uses runnable data and options to demonstrate source/layer/projection lifecycle; explicit feature-to-row joins and collision-aware geographic labels.

Browser API · Portable schema

Browser API

Graflume.tiledMap()

const data = [
  {
    "latitude": 37.57,
    "latitude2": 35.68,
    "longitude": 126.98,
    "longitude2": 139.69,
    "name": "Seoul",
    "value": 92
  },
  {
    "latitude": 35.68,
    "latitude2": 1.35,
    "longitude": 139.69,
    "longitude2": 103.82,
    "name": "Tokyo",
    "value": 78
  },
  {
    "latitude": 1.35,
    "latitude2": 28.61,
    "longitude": 103.82,
    "longitude2": 77.21,
    "name": "Singapore",
    "value": 64
  },
  {
    "latitude": 28.61,
    "latitude2": 48.86,
    "longitude": 77.21,
    "longitude2": 2.35,
    "name": "Delhi",
    "value": 58
  },
  {
    "latitude": 48.86,
    "latitude2": 40.71,
    "longitude": 2.35,
    "longitude2": -74,
    "name": "Paris",
    "value": 73
  },
  {
    "latitude": 40.71,
    "latitude2": 37.77,
    "longitude": -74,
    "longitude2": -122.42,
    "name": "New York",
    "value": 88
  },
  {
    "latitude": 37.77,
    "latitude2": 19.43,
    "longitude": -122.42,
    "longitude2": -99.13,
    "name": "San Francisco",
    "value": 69
  },
  {
    "latitude": -33.87,
    "latitude2": 37.57,
    "longitude": 151.21,
    "longitude2": 126.98,
    "name": "Sydney",
    "value": 51
  }
];

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": "Map · Tiled map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        }
      ],
      "title": "Map · Tiled map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "graticule": true
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tiled map uses runnable data and options to demonstrate source/layer/projection lifecycle; explicit feature-to-row joins and collision-aware geographic labels.",
    "text": "Map · Tiled map"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
};

Graflume.tiledMap('#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": "Map · Tiled map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "longitude",
          "format": "number",
          "label": "Longitude"
        },
        {
          "field": "latitude",
          "format": "number",
          "label": "Latitude"
        }
      ],
      "title": "Map · Tiled map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "graticule": true
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tiled map uses runnable data and options to demonstrate source/layer/projection lifecycle; explicit feature-to-row joins and collision-aware geographic labels.",
    "text": "Map · Tiled map"
  },
  "width": "container",
  "x": {
    "field": "longitude",
    "title": "Longitude",
    "type": "quantitative"
  },
  "y": {
    "field": "latitude",
    "title": "Latitude",
    "type": "quantitative"
  }
}

Natural Earth land and borders on a sphere with optional points and routes.

Natural Earth land and borders on a sphere with optional points and routes. uses runnable data and options to demonstrate GeoJSON and TopoJSON.

StatusLoading

globe
GeoJSON and TopoJSON

GraflumeSpatial.globe() WebGL

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

Natural Earth land and borders on a sphere with optional points and routes. · Row data
`kind`ordinal	`longitude`quantitative	`latitude`quantitative	`label`ordinal	`value`quantitative	`size`quantitative	`fromLongitude`quantitative	`fromLatitude`quantitative	`toLongitude`quantitative	`toLatitude`quantitative
point	126.978	37.5665	Seoul	96	10	—	—	—	—
point	-74.006	40.7128	New York	88	9	—	—	—	—
point	151.2093	-33.8688	Sydney	74	8	—	—	—	—
point	2.3522	48.8566	Paris	82	8	—	—	—	—
point	18.4241	-33.9249	Cape Town	69	7	—	—	—	—
point	-46.6333	-23.5505	São Paulo	77	8	—	—	—	—
route	—	—	Seoul–New York	—	—	126.978	37.5665	-74.006	40.7128
route	—	—	Seoul–Sydney	—	—	126.978	37.5665	151.2093	-33.8688
route	—	—	New York–Paris	—	—	-74.006	40.7128	2.3522	48.8566
route	—	—	Paris–Cape Town	—	—	2.3522	48.8566	18.4241	-33.9249
route	—	—	São Paulo–Cape Town	—	—	-46.6333	-23.5505	18.4241	-33.9249

Natural Earth land and borders on a sphere with optional points and routes. uses runnable data and options to demonstrate GeoJSON and TopoJSON.

Browser API · Portable schema

Browser API

GraflumeSpatial.globe()

const data = {
  "points": [
    {
      "label": "Seoul",
      "latitude": 37.5665,
      "longitude": 126.978,
      "size": 10,
      "value": 96
    },
    {
      "label": "New York",
      "latitude": 40.7128,
      "longitude": -74.006,
      "size": 9,
      "value": 88
    },
    {
      "label": "Sydney",
      "latitude": -33.8688,
      "longitude": 151.2093,
      "size": 8,
      "value": 74
    },
    {
      "label": "Paris",
      "latitude": 48.8566,
      "longitude": 2.3522,
      "size": 8,
      "value": 82
    },
    {
      "label": "Cape Town",
      "latitude": -33.9249,
      "longitude": 18.4241,
      "size": 7,
      "value": 69
    },
    {
      "label": "São Paulo",
      "latitude": -23.5505,
      "longitude": -46.6333,
      "size": 8,
      "value": 77
    }
  ],
  "routes": [
    {
      "from": [
        126.978,
        37.5665
      ],
      "label": "Seoul–New York",
      "to": [
        -74.006,
        40.7128
      ]
    },
    {
      "from": [
        126.978,
        37.5665
      ],
      "label": "Seoul–Sydney",
      "to": [
        151.2093,
        -33.8688
      ]
    },
    {
      "from": [
        -74.006,
        40.7128
      ],
      "label": "New York–Paris",
      "to": [
        2.3522,
        48.8566
      ]
    },
    {
      "from": [
        2.3522,
        48.8566
      ],
      "label": "Paris–Cape Town",
      "to": [
        18.4241,
        -33.9249
      ]
    },
    {
      "from": [
        -46.6333,
        -23.5505
      ],
      "label": "São Paulo–Cape Town",
      "to": [
        18.4241,
        -33.9249
      ]
    }
  ]
};

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.",
    "maxRows": 100,
    "table": true
  },
  "ariaLabel": "Map · Natural Earth land and borders on a sphere with optional points and routes. · Chart family",
  "basemap": "natural-earth",
  "borderColor": "#d7e3d5",
  "camera": {
    "distance": 4.8,
    "fov": 40,
    "pitch": 0.38,
    "yaw": 0.35
  },
  "create": {
    "autoResize": true,
    "height": 420
  },
  "graticule": false,
  "id": "manual-map-globe",
  "interaction": {
    "controls": true,
    "labels": {
      "chart": "Map · Natural Earth land and borders on a sphere with optional points and routes. · Chart family",
      "contextLost": "The WebGL context was lost. Try again to restore the chart.",
      "exportPng": "Download PNG",
      "fullscreen": "Enter fullscreen / Exit fullscreen",
      "hideAnnotations": "Hide callouts",
      "instructions": "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.",
      "orbit": "Chart controls · 3D ⟳",
      "pan": "Chart controls · 3D ↔",
      "projection": "Chart controls · 3D ◇",
      "reset": "Reset view",
      "showAnnotations": "Show callouts",
      "toolbar": "Chart controls",
      "unavailable": "WebGL is unavailable in this environment, so the 3D chart cannot be displayed.",
      "zoomIn": "Zoom in",
      "zoomOut": "Zoom out"
    },
    "orbit": true,
    "pan": true,
    "picking": true,
    "tooltip": {
      "fields": [
        "kind",
        "longitude",
        "latitude",
        "label",
        "value",
        "size",
        "fromLongitude",
        "fromLatitude",
        "toLongitude",
        "toLatitude"
      ],
      "title": "Map · Natural Earth land and borders on a sphere with optional points and routes."
    },
    "wheel": "modifier",
    "zoom": true
  },
  "landColor": "#79a78d",
  "lighting": {
    "ambient": 0.48,
    "diffuse": 0.86,
    "direction": [
      -0.45,
      0.82,
      0.62
    ]
  },
  "oceanColor": "#0b2a4a",
  "pointColor": "#fb7185",
  "routeColor": "#fbbf24",
  "theme": "graflume-light",
  "title": "Map · Natural Earth land and borders on a sphere with optional points and routes."
};

GraflumeSpatial.globe('#chart', data, options);

Portable schema

SpatialSpec 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.",
    "maxRows": 100,
    "table": true
  },
  "ariaLabel": "Map · Natural Earth land and borders on a sphere with optional points and routes. · Chart family",
  "basemap": "natural-earth",
  "borderColor": "#d7e3d5",
  "camera": {
    "distance": 4.8,
    "fov": 40,
    "pitch": 0.38,
    "yaw": 0.35
  },
  "create": {
    "autoResize": true,
    "height": 420
  },
  "graticule": false,
  "id": "manual-map-globe",
  "interaction": {
    "controls": true,
    "labels": {
      "chart": "Map · Natural Earth land and borders on a sphere with optional points and routes. · Chart family",
      "contextLost": "The WebGL context was lost. Try again to restore the chart.",
      "exportPng": "Download PNG",
      "fullscreen": "Enter fullscreen / Exit fullscreen",
      "hideAnnotations": "Hide callouts",
      "instructions": "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.",
      "orbit": "Chart controls · 3D ⟳",
      "pan": "Chart controls · 3D ↔",
      "projection": "Chart controls · 3D ◇",
      "reset": "Reset view",
      "showAnnotations": "Show callouts",
      "toolbar": "Chart controls",
      "unavailable": "WebGL is unavailable in this environment, so the 3D chart cannot be displayed.",
      "zoomIn": "Zoom in",
      "zoomOut": "Zoom out"
    },
    "orbit": true,
    "pan": true,
    "picking": true,
    "tooltip": {
      "fields": [
        "kind",
        "longitude",
        "latitude",
        "label",
        "value",
        "size",
        "fromLongitude",
        "fromLatitude",
        "toLongitude",
        "toLatitude"
      ],
      "title": "Map · Natural Earth land and borders on a sphere with optional points and routes."
    },
    "wheel": "modifier",
    "zoom": true
  },
  "landColor": "#79a78d",
  "lighting": {
    "ambient": 0.48,
    "diffuse": 0.86,
    "direction": [
      -0.45,
      0.82,
      0.62
    ]
  },
  "oceanColor": "#0b2a4a",
  "pointColor": "#fb7185",
  "routeColor": "#fbbf24",
  "theme": "graflume-light",
  "title": "Map · Natural Earth land and borders on a sphere with optional points and routes."
}

Single-country focus

Select one country by ISO alpha-2 or a source alias and fit its detailed 1:10m boundary to the viewport.

StatusLoading

country-focus

Graflume.map() 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.

Select one country by ISO alpha-2 or a source alias and fit its detailed 1:10m boundary to the viewport.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "KR",
    "name": "South Korea",
    "value": 92
  }
];

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": "Map · Single-country focus example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Single-country focus",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "countryCode",
      "featureKey": "countryCode"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "high",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "country",
        "property": "countryCode",
        "unmatched": "error",
        "values": [
          "KR"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Select one country by ISO alpha-2 or a source alias and fit its detailed 1:10m boundary to the viewport.",
    "text": "Map · Single-country focus"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Single-country focus example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Single-country focus",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "countryCode",
      "featureKey": "countryCode"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "high",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "country",
        "property": "countryCode",
        "unmatched": "error",
        "values": [
          "KR"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Select one country by ISO alpha-2 or a source alias and fit its detailed 1:10m boundary to the viewport.",
    "text": "Map · Single-country focus"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

Multi-country selection

Select two or more disjoint countries within the 50,000-value bound and automatically fit the combined extent.

StatusLoading

multi-country

Graflume.map() 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.

Multi-country selection · Row data
`countryCode`ordinal	`name`nominal	`value`quantitative
KR	South Korea	92
JP	Japan	86
US	United States	81
CA	Canada	74
BR	Brazil	77
ZA	South Africa	69
FR	France	83
AU	Australia	79

Select two or more disjoint countries within the 50,000-value bound and automatically fit the combined extent.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "KR",
    "name": "South Korea",
    "value": 92
  },
  {
    "countryCode": "JP",
    "name": "Japan",
    "value": 86
  },
  {
    "countryCode": "US",
    "name": "United States",
    "value": 81
  },
  {
    "countryCode": "CA",
    "name": "Canada",
    "value": 74
  },
  {
    "countryCode": "BR",
    "name": "Brazil",
    "value": 77
  },
  {
    "countryCode": "ZA",
    "name": "South Africa",
    "value": 69
  },
  {
    "countryCode": "FR",
    "name": "France",
    "value": 83
  },
  {
    "countryCode": "AU",
    "name": "Australia",
    "value": 79
  }
];

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": "Map · Multi-country selection example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Multi-country selection",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "countryCode",
      "featureKey": "countryCode"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "country",
        "property": "countryCode",
        "unmatched": "error",
        "values": [
          "KR",
          "JP",
          "US",
          "CA",
          "BR",
          "ZA",
          "FR",
          "AU"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Select two or more disjoint countries within the 50,000-value bound and automatically fit the combined extent.",
    "text": "Map · Multi-country selection"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Multi-country selection example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Multi-country selection",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "countryCode",
      "featureKey": "countryCode"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "country",
        "property": "countryCode",
        "unmatched": "error",
        "values": [
          "KR",
          "JP",
          "US",
          "CA",
          "BR",
          "ZA",
          "FR",
          "AU"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Select two or more disjoint countries within the 50,000-value bound and automatically fit the combined extent.",
    "text": "Map · Multi-country selection"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

Principal regions in one country

Choose a country, search its Natural Earth Admin-1 principal regions, and join subdivision codes to statistical values exactly.

StatusLoading

principal-region

Graflume.map() 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.

Principal regions in one country · Row data
`regionCode`ordinal	`countryCode`ordinal	`name`nominal	`value`quantitative
KR-11	KR	Seoul	96
KR-26	KR	Busan	82
KR-27	KR	Daegu	71
KR-28	KR	Incheon	78
KR-29	KR	Gwangju	66
KR-30	KR	Daejeon	74
KR-31	KR	Ulsan	68
KR-41	KR	Gyeonggi	89

Choose a country, search its Natural Earth Admin-1 principal regions, and join subdivision codes to statistical values exactly.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Selected regions Search regions

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "KR",
    "name": "Seoul",
    "regionCode": "KR-11",
    "value": 96
  },
  {
    "countryCode": "KR",
    "name": "Busan",
    "regionCode": "KR-26",
    "value": 82
  },
  {
    "countryCode": "KR",
    "name": "Daegu",
    "regionCode": "KR-27",
    "value": 71
  },
  {
    "countryCode": "KR",
    "name": "Incheon",
    "regionCode": "KR-28",
    "value": 78
  },
  {
    "countryCode": "KR",
    "name": "Gwangju",
    "regionCode": "KR-29",
    "value": 66
  },
  {
    "countryCode": "KR",
    "name": "Daejeon",
    "regionCode": "KR-30",
    "value": 74
  },
  {
    "countryCode": "KR",
    "name": "Ulsan",
    "regionCode": "KR-31",
    "value": 68
  },
  {
    "countryCode": "KR",
    "name": "Gyeonggi",
    "regionCode": "KR-41",
    "value": 89
  }
];

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": "Map · Principal regions in one country example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Principal regions in one country",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "high",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "region",
        "parentProperty": "countryCode",
        "parentValues": [
          "KR"
        ],
        "property": "$id",
        "unmatched": "error",
        "values": [
          "KR-11",
          "KR-26",
          "KR-27",
          "KR-28",
          "KR-29",
          "KR-30",
          "KR-31",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Choose a country, search its Natural Earth Admin-1 principal regions, and join subdivision codes to statistical values exactly.",
    "text": "Map · Principal regions in one country"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Principal regions in one country example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Principal regions in one country",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "high",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "region",
        "parentProperty": "countryCode",
        "parentValues": [
          "KR"
        ],
        "property": "$id",
        "unmatched": "error",
        "values": [
          "KR-11",
          "KR-26",
          "KR-27",
          "KR-28",
          "KR-29",
          "KR-30",
          "KR-31",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Choose a country, search its Natural Earth Admin-1 principal regions, and join subdivision codes to statistical values exactly.",
    "text": "Map · Principal regions in one country"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

Multi-region selection

Select two or more regions from one or several countries and compare them in one fitted view and color scale.

StatusLoading

multi-region

Graflume.map() 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.

Multi-region selection · Row data
`regionCode`ordinal	`countryCode`ordinal	`name`nominal	`value`quantitative
KR-11	KR	Seoul	96
KR-26	KR	Busan	82
KR-27	KR	Daegu	71
KR-28	KR	Incheon	78
KR-29	KR	Gwangju	66
KR-30	KR	Daejeon	74
KR-31	KR	Ulsan	68
KR-41	KR	Gyeonggi	89

Select two or more regions from one or several countries and compare them in one fitted view and color scale.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Selected regions Search regions

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "KR",
    "name": "Seoul",
    "regionCode": "KR-11",
    "value": 96
  },
  {
    "countryCode": "KR",
    "name": "Busan",
    "regionCode": "KR-26",
    "value": 82
  },
  {
    "countryCode": "KR",
    "name": "Daegu",
    "regionCode": "KR-27",
    "value": 71
  },
  {
    "countryCode": "KR",
    "name": "Incheon",
    "regionCode": "KR-28",
    "value": 78
  },
  {
    "countryCode": "KR",
    "name": "Gwangju",
    "regionCode": "KR-29",
    "value": 66
  },
  {
    "countryCode": "KR",
    "name": "Daejeon",
    "regionCode": "KR-30",
    "value": 74
  },
  {
    "countryCode": "KR",
    "name": "Ulsan",
    "regionCode": "KR-31",
    "value": 68
  },
  {
    "countryCode": "KR",
    "name": "Gyeonggi",
    "regionCode": "KR-41",
    "value": 89
  }
];

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": "Map · Multi-region selection example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Multi-region selection",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "region",
        "parentProperty": "countryCode",
        "parentValues": [
          "KR"
        ],
        "property": "$id",
        "unmatched": "error",
        "values": [
          "KR-11",
          "KR-26",
          "KR-28",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Select two or more regions from one or several countries and compare them in one fitted view and color scale.",
    "text": "Map · Multi-region selection"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Multi-region selection example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Multi-region selection",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "region",
        "parentProperty": "countryCode",
        "parentValues": [
          "KR"
        ],
        "property": "$id",
        "unmatched": "error",
        "values": [
          "KR-11",
          "KR-26",
          "KR-28",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Select two or more regions from one or several countries and compare them in one fitted view and color scale.",
    "text": "Map · Multi-region selection"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

Mixed country and region selection

Combine complete country boundaries and selected detailed regions into one collection for cross-level comparison.

StatusLoading

mixed-selection

Graflume.map() 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.

Mixed country and region selection · Row data
`regionCode`ordinal	`countryCode`ordinal	`name`nominal	`value`quantitative
JP	JP	Japan	86
AU	AU	Australia	79
KR-11	KR	Seoul	96
KR-26	KR	Busan	82
KR-41	KR	Gyeonggi	89

Combine complete country boundaries and selected detailed regions into one collection for cross-level comparison.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Selected regions Search regions

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "JP",
    "name": "Japan",
    "regionCode": "JP",
    "value": 86
  },
  {
    "countryCode": "AU",
    "name": "Australia",
    "regionCode": "AU",
    "value": 79
  },
  {
    "countryCode": "KR",
    "name": "Seoul",
    "regionCode": "KR-11",
    "value": 96
  },
  {
    "countryCode": "KR",
    "name": "Busan",
    "regionCode": "KR-26",
    "value": 82
  },
  {
    "countryCode": "KR",
    "name": "Gyeonggi",
    "regionCode": "KR-41",
    "value": 89
  }
];

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": "Map · Mixed country and region selection example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Mixed country and region selection",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "feature",
        "property": "$id",
        "unmatched": "error",
        "values": [
          "JP",
          "AU",
          "KR-11",
          "KR-26",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Combine complete country boundaries and selected detailed regions into one collection for cross-level comparison.",
    "text": "Map · Mixed country and region selection"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Mixed country and region selection example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Mixed country and region selection",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "feature",
        "property": "$id",
        "unmatched": "error",
        "values": [
          "JP",
          "AU",
          "KR-11",
          "KR-26",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Combine complete country boundaries and selected detailed regions into one collection for cross-level comparison.",
    "text": "Map · Mixed country and region selection"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

Detailed world catalog and provenance

Inspect the pinned Natural Earth revision covering 249 ISO 3166-1 entities, XK, source additions, and every source Admin-1 feature indexed by this catalog.

StatusLoading

world-catalog

Graflume.map() 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.

Detailed world catalog and provenance · Row data
`countryCode`ordinal	`name`nominal	`value`quantitative
KR	South Korea	92
JP	Japan	86
US	United States	81
CA	Canada	74

Inspect the pinned Natural Earth revision covering 249 ISO 3166-1 entities, XK, source additions, and every source Admin-1 feature indexed by this catalog.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Pinned catalog coverage: 263 entities · 4596 source Admin-1 → 4501 unique principal-region geometries
ISO 3166-1: 249 + XK 1 + source 13
Pinned source revision: f1890d9f152c896d250a77557a5751a93d494776
Maximum selected values: 50000

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Selected regions Search regions

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "KR",
    "name": "South Korea",
    "value": 92
  },
  {
    "countryCode": "JP",
    "name": "Japan",
    "value": 86
  },
  {
    "countryCode": "US",
    "name": "United States",
    "value": 81
  },
  {
    "countryCode": "CA",
    "name": "Canada",
    "value": 74
  }
];

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": "Map · Detailed world catalog and provenance example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Detailed world catalog and provenance",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "countryCode",
      "featureKey": "countryCode"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "mapScope": {
        "empty": "error",
        "level": "country",
        "property": "countryCode",
        "unmatched": "error",
        "values": [
          "KR",
          "JP",
          "US",
          "BR"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Inspect the pinned Natural Earth revision covering 249 ISO 3166-1 entities, XK, source additions, and every source Admin-1 feature indexed by this catalog.",
    "text": "Map · Detailed world catalog and provenance"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Detailed world catalog and provenance example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Detailed world catalog and provenance",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "countryCode",
      "featureKey": "countryCode"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "mapScope": {
        "empty": "error",
        "level": "country",
        "property": "countryCode",
        "unmatched": "error",
        "values": [
          "KR",
          "JP",
          "US",
          "BR"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Inspect the pinned Natural Earth revision covering 249 ISO 3166-1 entities, XK, source additions, and every source Admin-1 feature indexed by this catalog.",
    "text": "Map · Detailed world catalog and provenance"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

Automatic fit, detail, and labels

Fit center and zoom to the selection, adapt detail to the geometry budget, and hide colliding labels deterministically.

StatusLoading

fit-detail-labels

Graflume.map() 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.

Automatic fit, detail, and labels · Row data
`regionCode`ordinal	`countryCode`ordinal	`name`nominal	`value`quantitative
KR-11	KR	Seoul	96
KR-26	KR	Busan	82
KR-27	KR	Daegu	71
KR-28	KR	Incheon	78

Fit center and zoom to the selection, adapt detail to the geometry budget, and hide colliding labels deterministically.

Map · boundary scope

World country and region selector

Search and select multiple countries and their principal administrative regions, then lazy-load only the required boundary shards into one map.

natural-earth-admin-0-admin-1-10m · 1:10m

Pinned catalog coverage: 263 entities · 4596 source Admin-1 → 4501 unique principal-region geometries
ISO 3166-1: 249 + XK 1 + source 13
Pinned source revision: f1890d9f152c896d250a77557a5751a93d494776
Maximum selected values: 50000

Boundary display policy This statistical reference map follows Natural Earth's de facto boundary policy; it is not legal authority and does not imply universal agreement on political claims.

Selected countries Search countries

Preparing the boundary catalog.

Selected regions Search regions

Preparing the boundary catalog.

Browser API · Portable schema

Browser API

Graflume.map()

const data = [
  {
    "countryCode": "KR",
    "name": "Seoul",
    "regionCode": "KR-11",
    "value": 96
  },
  {
    "countryCode": "KR",
    "name": "Busan",
    "regionCode": "KR-26",
    "value": 82
  },
  {
    "countryCode": "KR",
    "name": "Daegu",
    "regionCode": "KR-27",
    "value": 71
  },
  {
    "countryCode": "KR",
    "name": "Incheon",
    "regionCode": "KR-28",
    "value": 78
  }
];

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": "Map · Automatic fit, detail, and labels example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Automatic fit, detail, and labels",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "region",
        "parentProperty": "countryCode",
        "parentValues": [
          "KR"
        ],
        "property": "$id",
        "unmatched": "error",
        "values": [
          "KR-11",
          "KR-26",
          "KR-28",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Fit center and zoom to the selection, adapt detail to the geometry budget, and hide colliding labels deterministically.",
    "text": "Map · Automatic fit, detail, and labels"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
};

Graflume.map('#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": "Map · Automatic fit, detail, and labels example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "basemap": "natural-earth",
  "graticule": false,
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "regionCode",
          "format": "auto",
          "label": "RegionCode"
        },
        {
          "field": "countryCode",
          "format": "auto",
          "label": "CountryCode"
        },
        {
          "field": "name",
          "format": "auto",
          "label": "Name"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Map · Automatic fit, detail, and labels",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "color": "value",
      "dataKey": "regionCode",
      "featureKey": "$id"
    },
    "options": {
      "basemap": "natural-earth",
      "fit": true,
      "fitPadding": 28,
      "geometryBudget": 240000,
      "geometryDetail": "auto",
      "graticule": false,
      "joinDuplicate": "error",
      "joinUnmatched": "show",
      "labels": {
        "collision": "hide",
        "field": "name",
        "fontSize": 10,
        "latitudeField": "labelLatitude",
        "longitudeField": "labelLongitude",
        "maximum": 120,
        "padding": 3
      },
      "mapScope": {
        "empty": "error",
        "level": "region",
        "parentProperty": "countryCode",
        "parentValues": [
          "KR"
        ],
        "property": "$id",
        "unmatched": "error",
        "values": [
          "KR-11",
          "KR-26",
          "KR-28",
          "KR-41"
        ]
      },
      "maximumFeatures": 50000
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Fit center and zoom to the selection, adapt detail to the geometry budget, and hide colliding labels deterministically.",
    "text": "Map · Automatic fit, detail, and labels"
  },
  "width": "container",
  "x": {
    "field": "countryCode",
    "title": "countryCode",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "value",
    "type": "quantitative"
  }
}

ID	Name	Quick API	mode	mark	renderer
`geo`	Geographic region chart	`geo()`	`region`	`geo`	`canvas`
`map`	Map	`map()`	`default`	`map`	`canvas`
`flow-map`	Flow map	`flowMap()`	`flow-map`	`geo-flow`	`canvas`
`geo-heatmap`	Geographic heatmap	`geoHeatmap()`	`geo-heatmap`	`geo-heatmap`	`canvas`
`map-bubble`	Map bubble chart	`mapBubble()`	`map-bubble`	`map`	`canvas`
`map-line`	Map line chart	`mapLine()`	`map-line`	`geo-line`	`canvas`
`map-point`	Map point chart	`mapPoint()`	`map-point`	`map`	`canvas`
`tiled-map` deprecated → `map`	Tiled map	`tiledMap()`	`tiled-map`	`tiled-map`	`canvas`
`globe`	Natural Earth land and borders on a sphere with optional points and routes.	`globe()`	`globe`	`globe`	`webgl`

Identifier	Canonical mode ID
`flowmap`	`flow-map`
`geoheatmap`	`geo-heatmap`
`map`	`map`
`mapbubble`	`map-bubble`
`mapline`	`map-line`
`mappoint`	`map-point`
`tiledwebmap`	`tiled-map`

Map · Chart-specific features

Map

Every executable mode in this family

Geographic region chart

Graflume.geo()

ChartSpec 0.1 · options

Map

Graflume.map()

ChartSpec 0.1 · options

Flow map

Graflume.flowMap()

ChartSpec 0.1 · options

Geographic heatmap

Graflume.geoHeatmap()

ChartSpec 0.1 · options

Map bubble chart

Graflume.mapBubble()

ChartSpec 0.1 · options

Map line chart

Graflume.mapLine()

ChartSpec 0.1 · options

Map point chart

Graflume.mapPoint()

ChartSpec 0.1 · options

Tiled map

Graflume.tiledMap()

ChartSpec 0.1 · options

Natural Earth land and borders on a sphere with optional points and routes.

GraflumeSpatial.globe()

SpatialSpec 0.1 · options

Single-country focus

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Multi-country selection

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Principal regions in one country

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Multi-region selection

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Mixed country and region selection

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Detailed world catalog and provenance

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Automatic fit, detail, and labels

World country and region selector

Graflume.map()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance