Graflume · Alpha
Heatmap · 기본 구현 · 공통 기능
두 범주 차원의 조합마다 수치 강도를 거의 연속된 색상 행렬로 표시합니다. 필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다. 기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요.
차트 계열 · 고급 차트 계열
Heatmap
두 범주 차원의 조합마다 수치 강도를 거의 연속된 색상 행렬로 표시합니다.
- Quick API
heatmap()- 브라우저 스냅샷
graflume/complete- mark
heatmap- 프리셋
- 2
기본 구현
가장 단순한 차트
필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다.
기본 예제
두 범주 차원의 조합마다 수치 강도를 거의 연속된 색상 행렬로 표시합니다.
상태불러오는 중
minimal-implementation
불러오는 중
핵심 개념
기본 예제 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}공통 기능
모든 차트에서 사용하는 기능
기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요. 데이터 표식 위에 마우스를 올리세요. 지원하는 차트에서는 축을 따라 커서를 움직이면 가장 가까운 값을 볼 수 있습니다. 모든 정확한 값은 아래 표에서 확인할 수 있습니다.
헤더
차트 안에 제목과 보조 설명을 넣어 무엇을 보여주는지 먼저 밝힙니다.
상태불러오는 중
header
불러오는 중
핵심 개념
헤더 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "ko",
"title": {
"subtitle": "Heatmap 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: 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);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"locale": "ko",
"title": {
"subtitle": "Heatmap 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: 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"
}
}도구 설명
마크 또는 축을 가리키면 정확한 값을 보여줍니다. 날짜·시간은 locale, 형식과 시간대를 사용자가 선언형 옵션으로 정할 수 있습니다.
상태불러오는 중
tooltip
불러오는 중
핵심 개념
도구 설명 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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 · 도구 설명",
"trigger": "mark"
}
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
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 · 도구 설명",
"trigger": "mark"
}
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}테마
상단 선택기의 현재 내장 테마를 옵션에 적용하고 모든 활성 예제를 함께 갱신합니다.
상태불러오는 중
theme
불러오는 중
핵심 개념
테마 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "ko",
"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);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"locale": "ko",
"theme": "graflume-light",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}범례
계열, 범주 또는 연속 값의 시각적 의미를 차트와 함께 설명합니다.
상태불러오는 중
legend
- 범례:
legend · continuous · value
불러오는 중
핵심 개념
범례 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "continuous",
"orientation": "horizontal",
"position": "bottom",
"title": "값",
"visible": true
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"legend": {
"field": "value",
"interactive": false,
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "continuous",
"orientation": "horizontal",
"position": "bottom",
"title": "값",
"visible": true
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}강조
대표 데이터나 공간 위치를 시각적으로 강조해 읽을 지점을 안내합니다.
상태불러오는 중
highlight
- 포인트·범위 하이라이트:
highlights[] · datum · rowIndex
불러오는 중
핵심 개념
강조 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"rowIndex": 48,
"type": "datum"
}
}
],
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}말풍선
자동 충돌 회피와 다국어 줄바꿈을 사용하는 설명 말풍선을 표시합니다.
상태불러오는 중
callout
- 설명 말풍선:
annotations[] · datum · rowIndex · callout · placement:auto
불러오는 중
핵심 개념
말풍선 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"rowIndex": 48,
"type": "datum"
},
"text": "포인트·범위 하이라이트 · 0"
}
],
"height": 620,
"interaction": {
"controls": {
"annotations": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
}
}
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"rowIndex": 48,
"type": "datum"
},
"text": "포인트·범위 하이라이트 · 0"
}
],
"height": 620,
"interaction": {
"controls": {
"annotations": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
}
}
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}선택
데이터를 선택하고 토글하며 배경이나 Esc 키로 안전하게 해제합니다.
상태불러오는 중
selection
- 대화형 선택:
selection · multiple · toggle
불러오는 중
핵심 개념
선택 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "대화형 선택",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"mode": "multiple",
"toggle": true
}
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "대화형 선택",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"mode": "multiple",
"toggle": true
}
},
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}화면 제어
확대, 이동, 초기화, 투영, 전체 화면과 PNG 내보내기 메뉴를 각각 표시하거나 숨깁니다. controls: false이면 제어 막대 전체를 제거합니다.
상태불러오는 중
controls
불러오는 중
핵심 개념
화면 제어 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
}
},
"locale": "ko",
"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);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}접근성
ARIA 설명, 키보드 안내와 의미 있는 데이터 표를 함께 제공합니다.
상태불러오는 중
accessibility
불러오는 중
핵심 개념
접근성 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
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 |
브라우저 API · 이식 가능한 스키마
브라우저 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": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Heatmap · 접근성 example"
},
"height": 620,
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
};
Graflume.heatmap('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Heatmap · 접근성 example"
},
"height": 620,
"locale": "ko",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal bin",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical bin",
"type": "quantitative"
}
}