카펫 차트
두 입력 조건이 함께 달라질 때 결과가 어떻게 변하는지 살펴보세요.
카펫 차트
가장 단순한 차트
차트를 살펴보고, 표에서 원본 데이터를 확인하세요. 아래에서 같은 예제의 코드를 펼칠 수 있습니다.
기본 예제
불러오는 중
핵심 개념
기본 예제 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}- Quick API
carpet()- 브라우저 스냅샷
graflume/complete- mark
carpet- 프리셋
- 3
minimal-implementation
공통 기능
모든 차트에서 사용하는 기능
기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요. 데이터 표식 위에 마우스를 올리세요. 지원하는 차트에서는 축을 따라 커서를 움직이면 가장 가까운 값을 볼 수 있습니다. 모든 정확한 값은 아래 표에서 확인할 수 있습니다.
헤더
차트 안에 제목과 보조 설명을 넣어 무엇을 보여주는지 먼저 밝힙니다.
불러오는 중
핵심 개념
헤더 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"title": {
"subtitle": "Carpet chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: explicit logical and projected coordinates · logical axis ticks and labels.",
"text": "카펫 차트"
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"title": {
"subtitle": "Carpet chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: explicit logical and projected coordinates · logical axis ticks and labels.",
"text": "카펫 차트"
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}header
도구 설명
마크 또는 축을 가리키면 정확한 값을 보여줍니다. 날짜·시간은 locale, 형식과 시간대를 사용자가 선언형 옵션으로 정할 수 있습니다.
불러오는 중
핵심 개념
도구 설명 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"interaction": {
"hover": true,
"tooltip": {
"fields": [
{
"field": "a",
"format": "number",
"label": "A"
},
{
"field": "b",
"format": "number",
"label": "B"
},
{
"field": "px",
"format": "number",
"label": "Px"
},
{
"field": "py",
"format": "number",
"label": "Py"
},
{
"field": "value",
"format": "number",
"label": "값"
}
],
"title": "카펫 차트 · 도구 설명",
"trigger": "mark"
}
},
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"interaction": {
"hover": true,
"tooltip": {
"fields": [
{
"field": "a",
"format": "number",
"label": "A"
},
{
"field": "b",
"format": "number",
"label": "B"
},
{
"field": "px",
"format": "number",
"label": "Px"
},
{
"field": "py",
"format": "number",
"label": "Py"
},
{
"field": "value",
"format": "number",
"label": "값"
}
],
"title": "카펫 차트 · 도구 설명",
"trigger": "mark"
}
},
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}tooltip
테마
상단 선택기의 현재 내장 테마를 옵션에 적용하고 모든 활성 예제를 함께 갱신합니다.
불러오는 중
핵심 개념
테마 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"theme": "graflume-light",
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"theme": "graflume-light",
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}theme
범례
계열, 범주 또는 연속 값의 시각적 의미를 차트와 함께 설명합니다.
불러오는 중
핵심 개념
범례 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"legend": {
"field": "value",
"interactive": false,
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "continuous",
"orientation": "horizontal",
"position": "bottom",
"title": "값",
"visible": true
},
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"legend": {
"field": "value",
"interactive": false,
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "continuous",
"orientation": "horizontal",
"position": "bottom",
"title": "값",
"visible": true
},
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}legend
- 범례:
legend · continuous · value
강조
대표 데이터나 공간 위치를 시각적으로 강조해 읽을 지점을 안내합니다.
불러오는 중
핵심 개념
강조 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "px",
"type": "datum",
"value": 4.594
}
}
],
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "px",
"type": "datum",
"value": 4.594
}
}
],
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}highlight
- 포인트·범위 하이라이트:
highlights[] · datum · px
말풍선
자동 충돌 회피와 다국어 줄바꿈을 사용하는 설명 말풍선을 표시합니다.
불러오는 중
핵심 개념
말풍선 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "px",
"type": "datum",
"value": 4.594
},
"text": "포인트·범위 하이라이트 · 4"
}
],
"axes": {
"x": false,
"y": false
},
"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",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "px",
"type": "datum",
"value": 4.594
},
"text": "포인트·범위 하이라이트 · 4"
}
],
"axes": {
"x": false,
"y": false
},
"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",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}callout
- 설명 말풍선:
annotations[] · datum · px · callout · placement:auto
선택
데이터를 선택하고 토글하며 배경이나 Esc 키로 안전하게 해제합니다.
불러오는 중
핵심 개념
선택 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "대화형 선택",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"key": "px",
"mode": "multiple",
"toggle": true
}
},
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "대화형 선택",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"key": "px",
"mode": "multiple",
"toggle": true
}
},
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}selection
- 대화형 선택:
selection · multiple · toggle
화면 제어
확대, 이동, 초기화, 투영, 전체 화면과 PNG 내보내기 메뉴를 각각 표시하거나 숨깁니다. controls: false이면 제어 막대 전체를 제거합니다.
불러오는 중
핵심 개념
화면 제어 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"axes": {
"x": false,
"y": false
},
"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",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"axes": {
"x": false,
"y": false
},
"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",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}controls
접근성
ARIA 설명, 키보드 안내와 의미 있는 데이터 표를 함께 제공합니다.
불러오는 중
핵심 개념
접근성 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
aquantitative | bquantitative | pxquantitative | pyquantitative | valuequantitative |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 18.454 |
| 1 | 0 | 1 | 0.161 | 25.566 |
| 2 | 0 | 2 | 0.279 | 33.429 |
| 3 | 0 | 3 | 0.333 | 37.437 |
| 4 | 0 | 4 | 0.334 | 34.696 |
| 5 | 0 | 5 | 0.317 | 27.231 |
| 6 | 0 | 6 | 0.33 | 19.709 |
| 7 | 0 | 7 | 0.402 | 14.966 |
| 8 | 0 | 8 | 0.535 | 12.882 |
| 0 | 1 | 0.237 | 1 | 23.107 |
| 1 | 1 | 1.237 | 1.161 | 35.347 |
| 2 | 1 | 2.237 | 1.279 | 48.878 |
| 3 | 1 | 3.237 | 1.333 | 55.784 |
| 4 | 1 | 4.237 | 1.334 | 51.103 |
| 5 | 1 | 5.237 | 1.317 | 38.364 |
| 6 | 1 | 6.237 | 1.33 | 25.59 |
| 7 | 1 | 7.237 | 1.402 | 17.544 |
| 8 | 1 | 8.237 | 1.535 | 13.904 |
| 0 | 2 | 0.44 | 2 | 26.364 |
| 1 | 2 | 1.44 | 2.161 | 42.193 |
| 2 | 2 | 2.44 | 2.279 | 59.698 |
| 3 | 2 | 3.44 | 2.333 | 68.668 |
| 4 | 2 | 4.44 | 2.334 | 62.805 |
| 5 | 2 | 5.44 | 2.317 | 46.879 |
| 6 | 2 | 6.44 | 2.33 | 31.246 |
| 7 | 2 | 7.44 | 2.402 | 21.451 |
| 8 | 2 | 8.44 | 2.535 | 16.459 |
| 0 | 3 | 0.594 | 3 | 25.96 |
| 1 | 3 | 1.594 | 3.161 | 41.344 |
| 2 | 3 | 2.594 | 3.279 | 58.373 |
| 3 | 3 | 3.594 | 3.333 | 67.222 |
| 4 | 3 | 4.594 | 3.334 | 62.151 |
| 5 | 3 | 5.594 | 3.317 | 48.474 |
| 6 | 3 | 6.594 | 3.33 | 36.19 |
| 7 | 3 | 7.594 | 3.402 | 28.674 |
| 8 | 3 | 8.594 | 3.535 | 22.887 |
| 0 | 4 | 0.715 | 4 | 22.195 |
| 1 | 4 | 1.715 | 4.161 | 33.433 |
| 2 | 4 | 2.715 | 4.279 | 45.905 |
| 3 | 4 | 3.715 | 4.333 | 52.641 |
| 4 | 4 | 4.715 | 4.334 | 50.238 |
| 5 | 4 | 5.715 | 4.317 | 43.99 |
| 6 | 4 | 6.715 | 4.33 | 41.06 |
| 7 | 4 | 7.715 | 4.402 | 39.729 |
| 8 | 4 | 8.715 | 4.535 | 33.562 |
| 0 | 5 | 0.839 | 5 | 17.595 |
| 1 | 5 | 1.839 | 5.161 | 23.767 |
| 2 | 5 | 2.839 | 5.279 | 30.658 |
| 3 | 5 | 3.839 | 5.333 | 34.711 |
| 4 | 5 | 4.839 | 5.334 | 35.092 |
| 5 | 5 | 5.839 | 5.317 | 36.552 |
| 6 | 5 | 6.839 | 5.33 | 42.841 |
| 7 | 5 | 7.839 | 5.402 | 47.546 |
| 8 | 5 | 8.839 | 5.535 | 41.624 |
| 0 | 6 | 1 | 6 | 14.308 |
| 1 | 6 | 2 | 6.161 | 16.856 |
| 2 | 6 | 3 | 6.279 | 19.736 |
| 3 | 6 | 4 | 6.333 | 21.699 |
| 4 | 6 | 5 | 6.334 | 23.244 |
| 5 | 6 | 6 | 6.317 | 27.839 |
| 6 | 6 | 7 | 6.33 | 36.881 |
| 7 | 6 | 8 | 6.402 | 43.259 |
| 8 | 6 | 9 | 6.535 | 38.745 |
코드와 설정 보기
브라우저 API
Graflume.carpet()
const data = [
{
"a": 0,
"b": 0,
"px": 0,
"py": 0,
"value": 18.454
},
{
"a": 1,
"b": 0,
"px": 1,
"py": 0.161,
"value": 25.566
},
{
"a": 2,
"b": 0,
"px": 2,
"py": 0.279,
"value": 33.429
},
{
"a": 3,
"b": 0,
"px": 3,
"py": 0.333,
"value": 37.437
},
{
"a": 4,
"b": 0,
"px": 4,
"py": 0.334,
"value": 34.696
},
{
"a": 5,
"b": 0,
"px": 5,
"py": 0.317,
"value": 27.231
},
{
"a": 6,
"b": 0,
"px": 6,
"py": 0.33,
"value": 19.709
},
{
"a": 7,
"b": 0,
"px": 7,
"py": 0.402,
"value": 14.966
},
{
"a": 8,
"b": 0,
"px": 8,
"py": 0.535,
"value": 12.882
},
{
"a": 0,
"b": 1,
"px": 0.237,
"py": 1,
"value": 23.107
},
{
"a": 1,
"b": 1,
"px": 1.237,
"py": 1.161,
"value": 35.347
},
{
"a": 2,
"b": 1,
"px": 2.237,
"py": 1.279,
"value": 48.878
},
{
"a": 3,
"b": 1,
"px": 3.237,
"py": 1.333,
"value": 55.784
},
{
"a": 4,
"b": 1,
"px": 4.237,
"py": 1.334,
"value": 51.103
},
{
"a": 5,
"b": 1,
"px": 5.237,
"py": 1.317,
"value": 38.364
},
{
"a": 6,
"b": 1,
"px": 6.237,
"py": 1.33,
"value": 25.59
},
{
"a": 7,
"b": 1,
"px": 7.237,
"py": 1.402,
"value": 17.544
},
{
"a": 8,
"b": 1,
"px": 8.237,
"py": 1.535,
"value": 13.904
},
{
"a": 0,
"b": 2,
"px": 0.44,
"py": 2,
"value": 26.364
},
{
"a": 1,
"b": 2,
"px": 1.44,
"py": 2.161,
"value": 42.193
},
{
"a": 2,
"b": 2,
"px": 2.44,
"py": 2.279,
"value": 59.698
},
{
"a": 3,
"b": 2,
"px": 3.44,
"py": 2.333,
"value": 68.668
},
{
"a": 4,
"b": 2,
"px": 4.44,
"py": 2.334,
"value": 62.805
},
{
"a": 5,
"b": 2,
"px": 5.44,
"py": 2.317,
"value": 46.879
},
{
"a": 6,
"b": 2,
"px": 6.44,
"py": 2.33,
"value": 31.246
},
{
"a": 7,
"b": 2,
"px": 7.44,
"py": 2.402,
"value": 21.451
},
{
"a": 8,
"b": 2,
"px": 8.44,
"py": 2.535,
"value": 16.459
},
{
"a": 0,
"b": 3,
"px": 0.594,
"py": 3,
"value": 25.96
},
{
"a": 1,
"b": 3,
"px": 1.594,
"py": 3.161,
"value": 41.344
},
{
"a": 2,
"b": 3,
"px": 2.594,
"py": 3.279,
"value": 58.373
},
{
"a": 3,
"b": 3,
"px": 3.594,
"py": 3.333,
"value": 67.222
},
{
"a": 4,
"b": 3,
"px": 4.594,
"py": 3.334,
"value": 62.151
},
{
"a": 5,
"b": 3,
"px": 5.594,
"py": 3.317,
"value": 48.474
},
{
"a": 6,
"b": 3,
"px": 6.594,
"py": 3.33,
"value": 36.19
},
{
"a": 7,
"b": 3,
"px": 7.594,
"py": 3.402,
"value": 28.674
},
{
"a": 8,
"b": 3,
"px": 8.594,
"py": 3.535,
"value": 22.887
},
{
"a": 0,
"b": 4,
"px": 0.715,
"py": 4,
"value": 22.195
},
{
"a": 1,
"b": 4,
"px": 1.715,
"py": 4.161,
"value": 33.433
},
{
"a": 2,
"b": 4,
"px": 2.715,
"py": 4.279,
"value": 45.905
},
{
"a": 3,
"b": 4,
"px": 3.715,
"py": 4.333,
"value": 52.641
},
{
"a": 4,
"b": 4,
"px": 4.715,
"py": 4.334,
"value": 50.238
},
{
"a": 5,
"b": 4,
"px": 5.715,
"py": 4.317,
"value": 43.99
},
{
"a": 6,
"b": 4,
"px": 6.715,
"py": 4.33,
"value": 41.06
},
{
"a": 7,
"b": 4,
"px": 7.715,
"py": 4.402,
"value": 39.729
},
{
"a": 8,
"b": 4,
"px": 8.715,
"py": 4.535,
"value": 33.562
},
{
"a": 0,
"b": 5,
"px": 0.839,
"py": 5,
"value": 17.595
},
{
"a": 1,
"b": 5,
"px": 1.839,
"py": 5.161,
"value": 23.767
},
{
"a": 2,
"b": 5,
"px": 2.839,
"py": 5.279,
"value": 30.658
},
{
"a": 3,
"b": 5,
"px": 3.839,
"py": 5.333,
"value": 34.711
},
{
"a": 4,
"b": 5,
"px": 4.839,
"py": 5.334,
"value": 35.092
},
{
"a": 5,
"b": 5,
"px": 5.839,
"py": 5.317,
"value": 36.552
},
{
"a": 6,
"b": 5,
"px": 6.839,
"py": 5.33,
"value": 42.841
},
{
"a": 7,
"b": 5,
"px": 7.839,
"py": 5.402,
"value": 47.546
},
{
"a": 8,
"b": 5,
"px": 8.839,
"py": 5.535,
"value": 41.624
},
{
"a": 0,
"b": 6,
"px": 1,
"py": 6,
"value": 14.308
},
{
"a": 1,
"b": 6,
"px": 2,
"py": 6.161,
"value": 16.856
},
{
"a": 2,
"b": 6,
"px": 3,
"py": 6.279,
"value": 19.736
},
{
"a": 3,
"b": 6,
"px": 4,
"py": 6.333,
"value": 21.699
},
{
"a": 4,
"b": 6,
"px": 5,
"py": 6.334,
"value": 23.244
},
{
"a": 5,
"b": 6,
"px": 6,
"py": 6.317,
"value": 27.839
},
{
"a": 6,
"b": 6,
"px": 7,
"py": 6.33,
"value": 36.881
},
{
"a": 7,
"b": 6,
"px": 8,
"py": 6.402,
"value": 43.259
},
{
"a": 8,
"b": 6,
"px": 9,
"py": 6.535,
"value": 38.745
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "카펫 차트 · 접근성 example"
},
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
};
Graflume.carpet('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "카펫 차트 · 접근성 example"
},
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"value": "value",
"x": "px",
"y": "py"
},
"options": {
"levels": 4,
"mode": "grid"
}
},
"width": "container",
"x": {
"field": "a",
"title": "Carpet axis A",
"type": "quantitative"
},
"y": {
"field": "b",
"title": "Carpet axis B",
"type": "quantitative"
}
}accessibility