Graflume · Alpha
Heatmap · Basic implementation · Common features
Encode intensity for two categorical dimensions as a nearly continuous color matrix. Start with only the required data and family encoding. Expand the code to run the same example. Use the tabs to compare header, tooltip, theme, legend, highlight, callout, selection, view controls, and accessibility one feature at a time.
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
Basic implementation
The smallest runnable chart
Start with only the required data and family encoding. Expand the code to run the same example.
Basic example
Encode intensity for two categorical dimensions as a nearly continuous color matrix.
StatusLoading
minimal-implementation
Loading
Core concepts
Basic example · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"locale": "en",
"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
{
"height": 620,
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Common features
Features shared by every chart
Use the tabs to compare header, tooltip, theme, legend, highlight, callout, selection, view controls, and accessibility one feature at a time. Hover over a data mark. On supported charts, move the pointer along the axis to see the nearest value. All exact values are available in the table below.
Header
Add a chart title and supporting description inside the visualization.
StatusLoading
header
Loading
Core concepts
Header · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"locale": "en",
"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
{
"height": 620,
"locale": "en",
"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"
}
}Tooltip
Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.
StatusLoading
tooltip
Loading
Core concepts
Tooltip · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"interaction": {
"hover": true,
"tooltip": {
"fields": [
{
"field": "x",
"format": "number",
"label": "X"
},
{
"field": "y",
"format": "number",
"label": "Y"
}
],
"title": "Heatmap · Tooltip",
"trigger": "mark"
}
},
"locale": "en",
"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
{
"height": 620,
"interaction": {
"hover": true,
"tooltip": {
"fields": [
{
"field": "x",
"format": "number",
"label": "X"
},
{
"field": "y",
"format": "number",
"label": "Y"
}
],
"title": "Heatmap · Tooltip",
"trigger": "mark"
}
},
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Theme
Apply the current built-in theme from the selector and update every active example together.
StatusLoading
theme
Loading
Core concepts
Theme · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"locale": "en",
"theme": "graflume-light",
"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
{
"height": 620,
"locale": "en",
"theme": "graflume-light",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Legend
Explain the visual meaning of layers, categories, or continuous values.
StatusLoading
legend
- Legend:
legend · continuous · value
Loading
Core concepts
Legend · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"legend": {
"field": "value",
"interactive": false,
"labels": {
"hide": "Hide",
"show": "Show"
},
"maxItems": 8,
"mode": "continuous",
"orientation": "horizontal",
"position": "bottom",
"title": "Value",
"visible": true
},
"locale": "en",
"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
{
"height": 620,
"legend": {
"field": "value",
"interactive": false,
"labels": {
"hide": "Hide",
"show": "Show"
},
"maxItems": 8,
"mode": "continuous",
"orientation": "horizontal",
"position": "bottom",
"title": "Value",
"visible": true
},
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Highlight
Emphasize a representative datum or spatial position to guide inspection.
StatusLoading
highlight
- Point and range highlights:
highlights[] · datum · rowIndex
Loading
Core concepts
Highlight · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"rowIndex": 48,
"type": "datum"
}
}
],
"locale": "en",
"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
{
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"rowIndex": 48,
"type": "datum"
}
}
],
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Callout
Show an explanatory callout with automatic collision avoidance and multilingual wrapping.
StatusLoading
callout
- Custom callouts:
annotations[] · datum · rowIndex · callout · placement:auto
Loading
Core concepts
Callout · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"annotations": [
{
"connector": {
"visible": true
},
"detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"rowIndex": 48,
"type": "datum"
},
"text": "Point and range highlights · 0"
}
],
"height": 620,
"interaction": {
"controls": {
"annotations": true,
"labels": {
"controls": "Chart controls",
"enterFullscreen": "Enter fullscreen",
"exitFullscreen": "Exit fullscreen",
"exportPng": "Download PNG",
"hideAnnotations": "Hide callouts",
"loop": "Loop playback",
"nextFrame": "Next frame",
"pause": "Pause",
"play": "Play",
"previousFrame": "Previous frame",
"reset": "Reset view",
"seek": "Playback position",
"showAnnotations": "Show callouts",
"speed": "Playback speed",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out"
}
}
},
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"annotations": [
{
"connector": {
"visible": true
},
"detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"rowIndex": 48,
"type": "datum"
},
"text": "Point and range highlights · 0"
}
],
"height": 620,
"interaction": {
"controls": {
"annotations": true,
"labels": {
"controls": "Chart controls",
"enterFullscreen": "Enter fullscreen",
"exitFullscreen": "Exit fullscreen",
"exportPng": "Download PNG",
"hideAnnotations": "Hide callouts",
"loop": "Loop playback",
"nextFrame": "Next frame",
"pause": "Pause",
"play": "Play",
"previousFrame": "Previous frame",
"reset": "Reset view",
"seek": "Playback position",
"showAnnotations": "Show callouts",
"speed": "Playback speed",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out"
}
}
},
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Selection
Select and toggle data, then clear it from the background or Escape key.
StatusLoading
selection
- Interactive selection:
selection · multiple · toggle
Loading
Core concepts
Selection · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "Interactive selection",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"mode": "multiple",
"toggle": true
}
},
"locale": "en",
"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
{
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "Interactive selection",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"mode": "multiple",
"toggle": true
}
},
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}View controls
Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.
StatusLoading
controls
Loading
Core concepts
View controls · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 = {
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "Chart controls",
"enterFullscreen": "Enter fullscreen",
"exitFullscreen": "Exit fullscreen",
"exportPng": "Download PNG",
"hideAnnotations": "Hide callouts",
"loop": "Loop playback",
"nextFrame": "Next frame",
"pause": "Pause",
"play": "Play",
"previousFrame": "Previous frame",
"reset": "Reset view",
"seek": "Playback position",
"showAnnotations": "Show callouts",
"speed": "Playback speed",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out"
},
"playback": false,
"reset": true,
"zoom": true
},
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
}
},
"locale": "en",
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "Chart controls",
"enterFullscreen": "Enter fullscreen",
"exitFullscreen": "Exit fullscreen",
"exportPng": "Download PNG",
"hideAnnotations": "Hide callouts",
"loop": "Loop playback",
"nextFrame": "Next frame",
"pause": "Pause",
"play": "Play",
"previousFrame": "Previous frame",
"reset": "Reset view",
"seek": "Playback position",
"showAnnotations": "Show callouts",
"speed": "Playback speed",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out"
},
"playback": false,
"reset": true,
"zoom": true
},
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
}
},
"locale": "en",
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}Accessibility
Pair ARIA descriptions and keyboard guidance with a semantic data table.
StatusLoading
accessibility
Loading
Core concepts
Accessibility · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative |
|---|---|
| 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 · Accessibility example"
},
"height": 620,
"locale": "en",
"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 · Accessibility example"
},
"height": 620,
"locale": "en",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}