Graflume · Alpha
Contour · Basic implementation · Common features
Represent a scalar grid with filled levels and deterministic contour lines. 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 · Specialized families
Contour
Represent a scalar grid with filled levels and deterministic contour lines.
- Quick API
contour()- Browser snapshot
graflume/complete- mark
contour- Presets
- 1
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
Represent a scalar grid with filled levels and deterministic contour lines.
StatusLoading
minimal-implementation
Loading
Core concepts
Basic example · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"height": 620,
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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",
"mark": {
"fields": {
"value": "value"
}
},
"title": {
"subtitle": "Contour chart uses runnable data and options to demonstrate deterministic regular-grid marching-squares isolines; explicit, linear and Type-7 quantile thresholds.",
"text": "Contour"
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"height": 620,
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"title": {
"subtitle": "Contour chart uses runnable data and options to demonstrate deterministic regular-grid marching-squares isolines; explicit, linear and Type-7 quantile thresholds.",
"text": "Contour"
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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"
},
{
"field": "value",
"format": "number",
"label": "Value"
}
],
"title": "Contour · Tooltip",
"trigger": "mark"
}
},
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#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"
},
{
"field": "value",
"format": "number",
"label": "Value"
}
],
"title": "Contour · Tooltip",
"trigger": "mark"
}
},
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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",
"mark": {
"fields": {
"value": "value"
}
},
"theme": "graflume-light",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"height": 620,
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#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",
"mark": {
"fields": {
"value": "value"
}
},
"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 · value
Loading
Core concepts
Highlight · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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": {
"field": "value",
"type": "datum",
"value": 16.946
}
}
],
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "value",
"type": "datum",
"value": 16.946
}
}
],
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"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 · value · callout · placement:auto
Loading
Core concepts
Callout · Row data
Row data and zero-copy TypedArray columns share one data contract.
xquantitative | yquantitative | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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": {
"field": "value",
"type": "datum",
"value": 16.946
},
"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",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"annotations": [
{
"connector": {
"visible": true
},
"detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "value",
"type": "datum",
"value": 16.946
},
"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",
"mark": {
"fields": {
"value": "value"
}
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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
},
"key": "value",
"mode": "multiple",
"toggle": true
}
},
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#chart', data, options);Portable schema
ChartSpec 0.1 · options
{
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "Interactive selection",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"key": "value",
"mode": "multiple",
"toggle": true
}
},
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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",
"mark": {
"fields": {
"value": "value"
}
},
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#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",
"mark": {
"fields": {
"value": "value"
}
},
"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 | valuequantitative |
|---|---|---|
| 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 |
Browser API · Portable schema
Browser API
Graflume.contour()
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": "Contour · Accessibility example"
},
"height": 620,
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.contour('#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": "Contour · Accessibility example"
},
"height": 620,
"locale": "en",
"mark": {
"fields": {
"value": "value"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}