Graflume · Alpha

Heatmap · Chart-specific features

Encode intensity for two categorical dimensions as a nearly continuous color matrix. These tabs come from Graflume's public catalog. Every mode owns runnable data, options, a Quick API, and source-backed feature claims.

Chart family · Advanced families

Heatmap

Encode intensity for two categorical dimensions as a nearly continuous color matrix.

Quick API: heatmap()
Browser snapshot: graflume/complete
mark: heatmap
Presets: 2

Chart-specific features

Every executable mode in this family

These tabs come from Graflume's public catalog. Every mode owns runnable data, options, a Quick API, and source-backed feature claims.

Heatmap

Heatmap uses runnable data and options to demonstrate long-form rectangular cells; continuous palette and legend.

StatusLoading

heatmap
long-form rectangular cells
continuous palette and legend
tile-map shapes
irregular extents
diverging/log/symlog/quantile color

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

Heatmap uses runnable data and options to demonstrate long-form rectangular cells; continuous palette and legend.

Heatmap · Row data
`x`quantitative	`y`quantitative
0	0
1	0
2	0
3	0
4	0
5	0
6	0
7	0
8	0
9	0
10	0
11	0
0	1
1	1
2	1
3	1
4	1
5	1
6	1
7	1
8	1
9	1
10	1
11	1
0	2
1	2
2	2
3	2
4	2
5	2
6	2
7	2
8	2
9	2
10	2
11	2
0	3
1	3
2	3
3	3
4	3
5	3
6	3
7	3
8	3
9	3
10	3
11	3
0	4
1	4
2	4
3	4
4	4
5	4
6	4
7	4
8	4
9	4
10	4
11	4
0	5
1	5
2	5
3	5
4	5
5	5
6	5
7	5
8	5
9	5
10	5
11	5
0	6
1	6
2	6
3	6
4	6
5	6
6	6
7	6
8	6
9	6
10	6
11	6
0	7
1	7
2	7
3	7
4	7
5	7
6	7
7	7
8	7
9	7
10	7
11	7

Browser API · Portable schema

Browser API

Graflume.heatmap()

const data = [
  {
    "value": 19.342,
    "x": 0,
    "y": 0
  },
  {
    "value": 23.692,
    "x": 1,
    "y": 0
  },
  {
    "value": 30.375,
    "x": 2,
    "y": 0
  },
  {
    "value": 35.875,
    "x": 3,
    "y": 0
  },
  {
    "value": 35.843,
    "x": 4,
    "y": 0
  },
  {
    "value": 29.381,
    "x": 5,
    "y": 0
  },
  {
    "value": 19.872,
    "x": 6,
    "y": 0
  },
  {
    "value": 11.62,
    "x": 7,
    "y": 0
  },
  {
    "value": 6.6,
    "x": 8,
    "y": 0
  },
  {
    "value": 4.304,
    "x": 9,
    "y": 0
  },
  {
    "value": 3.445,
    "x": 10,
    "y": 0
  },
  {
    "value": 3.145,
    "x": 11,
    "y": 0
  },
  {
    "value": 26.5,
    "x": 0,
    "y": 1
  },
  {
    "value": 39.914,
    "x": 1,
    "y": 1
  },
  {
    "value": 53.905,
    "x": 2,
    "y": 1
  },
  {
    "value": 62.722,
    "x": 3,
    "y": 1
  },
  {
    "value": 60.939,
    "x": 4,
    "y": 1
  },
  {
    "value": 48.629,
    "x": 5,
    "y": 1
  },
  {
    "value": 32.011,
    "x": 6,
    "y": 1
  },
  {
    "value": 18.177,
    "x": 7,
    "y": 1
  },
  {
    "value": 10.033,
    "x": 8,
    "y": 1
  },
  {
    "value": 6.276,
    "x": 9,
    "y": 1
  },
  {
    "value": 4.575,
    "x": 10,
    "y": 1
  },
  {
    "value": 3.674,
    "x": 11,
    "y": 1
  },
  {
    "value": 23.721,
    "x": 0,
    "y": 2
  },
  {
    "value": 44.273,
    "x": 1,
    "y": 2
  },
  {
    "value": 68.463,
    "x": 2,
    "y": 2
  },
  {
    "value": 85.571,
    "x": 3,
    "y": 2
  },
  {
    "value": 85.778,
    "x": 4,
    "y": 2
  },
  {
    "value": 69.134,
    "x": 5,
    "y": 2
  },
  {
    "value": 45.848,
    "x": 6,
    "y": 2
  },
  {
    "value": 27.125,
    "x": 7,
    "y": 2
  },
  {
    "value": 16.847,
    "x": 8,
    "y": 2
  },
  {
    "value": 11.918,
    "x": 9,
    "y": 2
  },
  {
    "value": 8.491,
    "x": 10,
    "y": 2
  },
  {
    "value": 5.65,
    "x": 11,
    "y": 2
  },
  {
    "value": 20.436,
    "x": 0,
    "y": 3
  },
  {
    "value": 39.635,
    "x": 1,
    "y": 3
  },
  {
    "value": 64.15,
    "x": 2,
    "y": 3
  },
  {
    "value": 84.275,
    "x": 3,
    "y": 3
  },
  {
    "value": 89.407,
    "x": 4,
    "y": 3
  },
  {
    "value": 77.438,
    "x": 5,
    "y": 3
  },
  {
    "value": 57.334,
    "x": 6,
    "y": 3
  },
  {
    "value": 40.924,
    "x": 7,
    "y": 3
  },
  {
    "value": 32.23,
    "x": 8,
    "y": 3
  },
  {
    "value": 26.345,
    "x": 9,
    "y": 3
  },
  {
    "value": 18.692,
    "x": 10,
    "y": 3
  },
  {
    "value": 10.778,
    "x": 11,
    "y": 3
  },
  {
    "value": 16.946,
    "x": 0,
    "y": 4
  },
  {
    "value": 31.996,
    "x": 1,
    "y": 4
  },
  {
    "value": 50.804,
    "x": 2,
    "y": 4
  },
  {
    "value": 65.794,
    "x": 3,
    "y": 4
  },
  {
    "value": 69.629,
    "x": 4,
    "y": 4
  },
  {
    "value": 62.612,
    "x": 5,
    "y": 4
  },
  {
    "value": 53.611,
    "x": 6,
    "y": 4
  },
  {
    "value": 51.41,
    "x": 7,
    "y": 4
  },
  {
    "value": 54.19,
    "x": 8,
    "y": 4
  },
  {
    "value": 51.132,
    "x": 9,
    "y": 4
  },
  {
    "value": 37.392,
    "x": 10,
    "y": 4
  },
  {
    "value": 20.559,
    "x": 11,
    "y": 4
  },
  {
    "value": 12.113,
    "x": 0,
    "y": 5
  },
  {
    "value": 21.902,
    "x": 1,
    "y": 5
  },
  {
    "value": 34.001,
    "x": 2,
    "y": 5
  },
  {
    "value": 43.3,
    "x": 3,
    "y": 5
  },
  {
    "value": 45.061,
    "x": 4,
    "y": 5
  },
  {
    "value": 40.583,
    "x": 5,
    "y": 5
  },
  {
    "value": 38.468,
    "x": 6,
    "y": 5
  },
  {
    "value": 46.908,
    "x": 7,
    "y": 5
  },
  {
    "value": 61.621,
    "x": 8,
    "y": 5
  },
  {
    "value": 66.662,
    "x": 9,
    "y": 5
  },
  {
    "value": 53.82,
    "x": 10,
    "y": 5
  },
  {
    "value": 32.705,
    "x": 11,
    "y": 5
  },
  {
    "value": 7.715,
    "x": 0,
    "y": 6
  },
  {
    "value": 12.779,
    "x": 1,
    "y": 6
  },
  {
    "value": 19.035,
    "x": 2,
    "y": 6
  },
  {
    "value": 23.839,
    "x": 3,
    "y": 6
  },
  {
    "value": 24.834,
    "x": 4,
    "y": 6
  },
  {
    "value": 23.214,
    "x": 5,
    "y": 6
  },
  {
    "value": 24.759,
    "x": 6,
    "y": 6
  },
  {
    "value": 34.859,
    "x": 7,
    "y": 6
  },
  {
    "value": 49.474,
    "x": 8,
    "y": 6
  },
  {
    "value": 55.699,
    "x": 9,
    "y": 6
  },
  {
    "value": 47.461,
    "x": 10,
    "y": 6
  },
  {
    "value": 32.902,
    "x": 11,
    "y": 6
  },
  {
    "value": 4.928,
    "x": 0,
    "y": 7
  },
  {
    "value": 7,
    "x": 1,
    "y": 7
  },
  {
    "value": 9.559,
    "x": 2,
    "y": 7
  },
  {
    "value": 11.538,
    "x": 3,
    "y": 7
  },
  {
    "value": 12.049,
    "x": 4,
    "y": 7
  },
  {
    "value": 11.892,
    "x": 5,
    "y": 7
  },
  {
    "value": 14.112,
    "x": 6,
    "y": 7
  },
  {
    "value": 21.319,
    "x": 7,
    "y": 7
  },
  {
    "value": 30.492,
    "x": 8,
    "y": 7
  },
  {
    "value": 33.608,
    "x": 9,
    "y": 7
  },
  {
    "value": 27.669,
    "x": 10,
    "y": 7
  },
  {
    "value": 19.134,
    "x": 11,
    "y": 7
  }
];

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": "Heatmap example"
  },
  "axes": {
    "x": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    },
    "y": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    }
  },
  "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": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        }
      ],
      "title": "Heatmap",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Heatmap uses runnable data and options to demonstrate long-form rectangular cells; continuous palette and legend.",
    "text": "Heatmap"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal bin",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical bin",
    "type": "quantitative"
  }
};

Graflume.heatmap('#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": "Heatmap example"
  },
  "axes": {
    "x": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    },
    "y": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    }
  },
  "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": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        }
      ],
      "title": "Heatmap",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Heatmap uses runnable data and options to demonstrate long-form rectangular cells; continuous palette and legend.",
    "text": "Heatmap"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal bin",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical bin",
    "type": "quantitative"
  }
}

Tile map

Tile map uses runnable data and options to demonstrate band and numeric positions; automatic value labels.

StatusLoading

tile-map
band and numeric positions
automatic value labels
pivot/matrix input
explicit missing-value pattern
brush

Graflume.tileMap() Canvas 2D

Control help

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.

Tile map · Row data
`x`quantitative	`y`quantitative	`value`quantitative
0	0	19.342
1	0	23.692
2	0	30.375
3	0	35.875
4	0	35.843
5	0	29.381
6	0	19.872
7	0	11.62
8	0	6.6
9	0	4.304
10	0	3.445
11	0	3.145
0	1	26.5
1	1	39.914
2	1	53.905
3	1	62.722
4	1	60.939
5	1	48.629
6	1	32.011
7	1	18.177
8	1	10.033
9	1	6.276
10	1	4.575
11	1	3.674
0	2	23.721
1	2	44.273
2	2	68.463
3	2	85.571
4	2	85.778
5	2	69.134
6	2	45.848
7	2	27.125
8	2	16.847
9	2	11.918
10	2	8.491
11	2	5.65
0	3	20.436
1	3	39.635
2	3	64.15
3	3	84.275
4	3	89.407
5	3	77.438
6	3	57.334
7	3	40.924
8	3	32.23
9	3	26.345
10	3	18.692
11	3	10.778
0	4	16.946
1	4	31.996
2	4	50.804
3	4	65.794
4	4	69.629
5	4	62.612
6	4	53.611
7	4	51.41
8	4	54.19
9	4	51.132
10	4	37.392
11	4	20.559
0	5	12.113
1	5	21.902
2	5	34.001
3	5	43.3
4	5	45.061
5	5	40.583
6	5	38.468
7	5	46.908
8	5	61.621
9	5	66.662
10	5	53.82
11	5	32.705
0	6	7.715
1	6	12.779
2	6	19.035
3	6	23.839
4	6	24.834
5	6	23.214
6	6	24.759
7	6	34.859
8	6	49.474
9	6	55.699
10	6	47.461
11	6	32.902
0	7	4.928
1	7	7
2	7	9.559
3	7	11.538
4	7	12.049
5	7	11.892
6	7	14.112
7	7	21.319
8	7	30.492
9	7	33.608
10	7	27.669
11	7	19.134

Tile map uses runnable data and options to demonstrate band and numeric positions; automatic value labels.

Browser API · Portable schema

Browser API

Graflume.tileMap()

const data = [
  {
    "value": 19.342,
    "x": 0,
    "y": 0
  },
  {
    "value": 23.692,
    "x": 1,
    "y": 0
  },
  {
    "value": 30.375,
    "x": 2,
    "y": 0
  },
  {
    "value": 35.875,
    "x": 3,
    "y": 0
  },
  {
    "value": 35.843,
    "x": 4,
    "y": 0
  },
  {
    "value": 29.381,
    "x": 5,
    "y": 0
  },
  {
    "value": 19.872,
    "x": 6,
    "y": 0
  },
  {
    "value": 11.62,
    "x": 7,
    "y": 0
  },
  {
    "value": 6.6,
    "x": 8,
    "y": 0
  },
  {
    "value": 4.304,
    "x": 9,
    "y": 0
  },
  {
    "value": 3.445,
    "x": 10,
    "y": 0
  },
  {
    "value": 3.145,
    "x": 11,
    "y": 0
  },
  {
    "value": 26.5,
    "x": 0,
    "y": 1
  },
  {
    "value": 39.914,
    "x": 1,
    "y": 1
  },
  {
    "value": 53.905,
    "x": 2,
    "y": 1
  },
  {
    "value": 62.722,
    "x": 3,
    "y": 1
  },
  {
    "value": 60.939,
    "x": 4,
    "y": 1
  },
  {
    "value": 48.629,
    "x": 5,
    "y": 1
  },
  {
    "value": 32.011,
    "x": 6,
    "y": 1
  },
  {
    "value": 18.177,
    "x": 7,
    "y": 1
  },
  {
    "value": 10.033,
    "x": 8,
    "y": 1
  },
  {
    "value": 6.276,
    "x": 9,
    "y": 1
  },
  {
    "value": 4.575,
    "x": 10,
    "y": 1
  },
  {
    "value": 3.674,
    "x": 11,
    "y": 1
  },
  {
    "value": 23.721,
    "x": 0,
    "y": 2
  },
  {
    "value": 44.273,
    "x": 1,
    "y": 2
  },
  {
    "value": 68.463,
    "x": 2,
    "y": 2
  },
  {
    "value": 85.571,
    "x": 3,
    "y": 2
  },
  {
    "value": 85.778,
    "x": 4,
    "y": 2
  },
  {
    "value": 69.134,
    "x": 5,
    "y": 2
  },
  {
    "value": 45.848,
    "x": 6,
    "y": 2
  },
  {
    "value": 27.125,
    "x": 7,
    "y": 2
  },
  {
    "value": 16.847,
    "x": 8,
    "y": 2
  },
  {
    "value": 11.918,
    "x": 9,
    "y": 2
  },
  {
    "value": 8.491,
    "x": 10,
    "y": 2
  },
  {
    "value": 5.65,
    "x": 11,
    "y": 2
  },
  {
    "value": 20.436,
    "x": 0,
    "y": 3
  },
  {
    "value": 39.635,
    "x": 1,
    "y": 3
  },
  {
    "value": 64.15,
    "x": 2,
    "y": 3
  },
  {
    "value": 84.275,
    "x": 3,
    "y": 3
  },
  {
    "value": 89.407,
    "x": 4,
    "y": 3
  },
  {
    "value": 77.438,
    "x": 5,
    "y": 3
  },
  {
    "value": 57.334,
    "x": 6,
    "y": 3
  },
  {
    "value": 40.924,
    "x": 7,
    "y": 3
  },
  {
    "value": 32.23,
    "x": 8,
    "y": 3
  },
  {
    "value": 26.345,
    "x": 9,
    "y": 3
  },
  {
    "value": 18.692,
    "x": 10,
    "y": 3
  },
  {
    "value": 10.778,
    "x": 11,
    "y": 3
  },
  {
    "value": 16.946,
    "x": 0,
    "y": 4
  },
  {
    "value": 31.996,
    "x": 1,
    "y": 4
  },
  {
    "value": 50.804,
    "x": 2,
    "y": 4
  },
  {
    "value": 65.794,
    "x": 3,
    "y": 4
  },
  {
    "value": 69.629,
    "x": 4,
    "y": 4
  },
  {
    "value": 62.612,
    "x": 5,
    "y": 4
  },
  {
    "value": 53.611,
    "x": 6,
    "y": 4
  },
  {
    "value": 51.41,
    "x": 7,
    "y": 4
  },
  {
    "value": 54.19,
    "x": 8,
    "y": 4
  },
  {
    "value": 51.132,
    "x": 9,
    "y": 4
  },
  {
    "value": 37.392,
    "x": 10,
    "y": 4
  },
  {
    "value": 20.559,
    "x": 11,
    "y": 4
  },
  {
    "value": 12.113,
    "x": 0,
    "y": 5
  },
  {
    "value": 21.902,
    "x": 1,
    "y": 5
  },
  {
    "value": 34.001,
    "x": 2,
    "y": 5
  },
  {
    "value": 43.3,
    "x": 3,
    "y": 5
  },
  {
    "value": 45.061,
    "x": 4,
    "y": 5
  },
  {
    "value": 40.583,
    "x": 5,
    "y": 5
  },
  {
    "value": 38.468,
    "x": 6,
    "y": 5
  },
  {
    "value": 46.908,
    "x": 7,
    "y": 5
  },
  {
    "value": 61.621,
    "x": 8,
    "y": 5
  },
  {
    "value": 66.662,
    "x": 9,
    "y": 5
  },
  {
    "value": 53.82,
    "x": 10,
    "y": 5
  },
  {
    "value": 32.705,
    "x": 11,
    "y": 5
  },
  {
    "value": 7.715,
    "x": 0,
    "y": 6
  },
  {
    "value": 12.779,
    "x": 1,
    "y": 6
  },
  {
    "value": 19.035,
    "x": 2,
    "y": 6
  },
  {
    "value": 23.839,
    "x": 3,
    "y": 6
  },
  {
    "value": 24.834,
    "x": 4,
    "y": 6
  },
  {
    "value": 23.214,
    "x": 5,
    "y": 6
  },
  {
    "value": 24.759,
    "x": 6,
    "y": 6
  },
  {
    "value": 34.859,
    "x": 7,
    "y": 6
  },
  {
    "value": 49.474,
    "x": 8,
    "y": 6
  },
  {
    "value": 55.699,
    "x": 9,
    "y": 6
  },
  {
    "value": 47.461,
    "x": 10,
    "y": 6
  },
  {
    "value": 32.902,
    "x": 11,
    "y": 6
  },
  {
    "value": 4.928,
    "x": 0,
    "y": 7
  },
  {
    "value": 7,
    "x": 1,
    "y": 7
  },
  {
    "value": 9.559,
    "x": 2,
    "y": 7
  },
  {
    "value": 11.538,
    "x": 3,
    "y": 7
  },
  {
    "value": 12.049,
    "x": 4,
    "y": 7
  },
  {
    "value": 11.892,
    "x": 5,
    "y": 7
  },
  {
    "value": 14.112,
    "x": 6,
    "y": 7
  },
  {
    "value": 21.319,
    "x": 7,
    "y": 7
  },
  {
    "value": 30.492,
    "x": 8,
    "y": 7
  },
  {
    "value": 33.608,
    "x": 9,
    "y": 7
  },
  {
    "value": 27.669,
    "x": 10,
    "y": 7
  },
  {
    "value": 19.134,
    "x": 11,
    "y": 7
  }
];

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": "Heatmap · Tile map example"
  },
  "axes": {
    "x": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    },
    "y": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    }
  },
  "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": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Heatmap · Tile map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tile map uses runnable data and options to demonstrate band and numeric positions; automatic value labels.",
    "text": "Heatmap · Tile map"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal bin",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical bin",
    "type": "quantitative"
  }
};

Graflume.tileMap('#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": "Heatmap · Tile map example"
  },
  "axes": {
    "x": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    },
    "y": {
      "labels": {
        "orientation": "horizontal",
        "padding": 6
      },
      "ticks": {
        "spacing": 4
      }
    }
  },
  "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": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Heatmap · Tile map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "value": "value"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tile map uses runnable data and options to demonstrate band and numeric positions; automatic value labels.",
    "text": "Heatmap · Tile map"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal bin",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical bin",
    "type": "quantitative"
  }
}

Catalog

Modes · compatibility identifiers

The source-controlled catalog maps callable modes in this family and compatibility identifiers to their canonical modes. This table contains executable entries only.

Mode / compatibility ID search

2 modes · 2 compatibility identifiers

Heatmap · supported modes · representative `heatmap`
ID	Name	Quick API	mode	mark	renderer
`heatmap`	Heatmap	`heatmap()`	`default`	`heatmap`	`canvas`
`tile-map`	Tile map	`tileMap()`	`tile-map`	`tilemap`	`canvas`

Heatmap · compatibility identifiers
Identifier	Canonical mode ID
`heatmap`	`heatmap`
`tilemap`	`tile-map`

ChartSpec · SpatialSpec

Legend and emphasis

Identify series, emphasize a datum or range, place a custom callout, and let readers select marks.

Legend: Explain the series and scale represented by each color, line, or symbol inside the chart.
Point and range highlights: Emphasize a datum, value set, axis interval, or plot region without changing source values.
Custom callouts: Attach user-authored safe text to a datum, axis range, or normalized plot position. 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.
Interactive selection: Click a mark to select it, press Escape to clear it, and consume selection state and events in the host application.

Manual

Integration checklist

ARIA · table fallback

Accessibility

Canvas ARIA metadata is paired with a text summary and table fallback.

standard · large · ultra

Performance

Standard, large, and ultra profiles bound rendering work.

Chart catalog

`x`quantitative	`y`quantitative
0	0
1	0
2	0
3	0
4	0
5	0
6	0
7	0
8	0
9	0
10	0
11	0
0	1
1	1
2	1
3	1
4	1
5	1
6	1
7	1
8	1
9	1
10	1
11	1
0	2
1	2
2	2
3	2
4	2
5	2
6	2
7	2
8	2
9	2
10	2
11	2
0	3
1	3
2	3
3	3
4	3
5	3
6	3
7	3
8	3
9	3
10	3
11	3
0	4
1	4
2	4
3	4
4	4
5	4
6	4
7	4
8	4
9	4
10	4
11	4
0	5
1	5
2	5
3	5
4	5
5	5
6	5
7	5
8	5
9	5
10	5
11	5
0	6
1	6
2	6
3	6
4	6
5	6
6	6
7	6
8	6
9	6
10	6
11	6
0	7
1	7
2	7
3	7
4	7
5	7
6	7
7	7
8	7
9	7
10	7
11	7

`x`quantitative	`y`quantitative
0	0
1	0
2	0
3	0
4	0
5	0
6	0
7	0
8	0
9	0
10	0
11	0
0	1
1	1
2	1
3	1
4	1
5	1
6	1
7	1
8	1
9	1
10	1
11	1
0	2
1	2
2	2
3	2
4	2
5	2
6	2
7	2
8	2
9	2
10	2
11	2
0	3
1	3
2	3
3	3
4	3
5	3
6	3
7	3
8	3
9	3
10	3
11	3
0	4
1	4
2	4
3	4
4	4
5	4
6	4
7	4
8	4
9	4
10	4
11	4
0	5
1	5
2	5
3	5
4	5
5	5
6	5
7	5
8	5
9	5
10	5
11	5
0	6
1	6
2	6
3	6
4	6
5	6
6	6
7	6
8	6
9	6
10	6
11	6
0	7
1	7
2	7
3	7
4	7
5	7
6	7
7	7
8	7
9	7
10	7
11	7

`x`quantitative	`y`quantitative
0	0
1	0
2	0
3	0
4	0
5	0
6	0
7	0
8	0
9	0
10	0
11	0
0	1
1	1
2	1
3	1
4	1
5	1
6	1
7	1
8	1
9	1
10	1
11	1
0	2
1	2
2	2
3	2
4	2
5	2
6	2
7	2
8	2
9	2
10	2
11	2
0	3
1	3
2	3
3	3
4	3
5	3
6	3
7	3
8	3
9	3
10	3
11	3
0	4
1	4
2	4
3	4
4	4
5	4
6	4
7	4
8	4
9	4
10	4
11	4
0	5
1	5
2	5
3	5
4	5
5	5
6	5
7	5
8	5
9	5
10	5
11	5
0	6
1	6
2	6
3	6
4	6
5	6
6	6
7	6
8	6
9	6
10	6
11	6
0	7
1	7
2	7
3	7
4	7
5	7
6	7
7	7
8	7
9	7
10	7
11	7