Graflume · Alpha
Vector field · 기본 구현 · 공통 기능
각 좌표에서 방향과 크기를 화살표의 각도와 길이로 표현합니다. 필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다. 기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요.
차트 계열 · 전문 차트 계열
Vector field
각 좌표에서 방향과 크기를 화살표의 각도와 길이로 표현합니다.
- Quick API
vectorField()- 브라우저 스냅샷
graflume/complete- mark
vector- 프리셋
- 2
기본 구현
가장 단순한 차트
필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다.
기본 예제
각 좌표에서 방향과 크기를 화살표의 각도와 길이로 표현합니다.
상태불러오는 중
minimal-implementation
불러오는 중
핵심 개념
기본 예제 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}공통 기능
모든 차트에서 사용하는 기능
기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요. 데이터 표식 위에 마우스를 올리세요. 지원하는 차트에서는 축을 따라 커서를 움직이면 가장 가까운 값을 볼 수 있습니다. 모든 정확한 값은 아래 표에서 확인할 수 있습니다.
헤더
차트 안에 제목과 보조 설명을 넣어 무엇을 보여주는지 먼저 밝힙니다.
상태불러오는 중
header
불러오는 중
핵심 개념
헤더 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"title": {
"subtitle": "Vector field chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: direction and magnitude arrows · magnitude size and width.",
"text": "Vector field"
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"title": {
"subtitle": "Vector field chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: direction and magnitude arrows · magnitude size and width.",
"text": "Vector field"
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}도구 설명
마크 또는 축을 가리키면 정확한 값을 보여줍니다. 날짜·시간은 locale, 형식과 시간대를 사용자가 선언형 옵션으로 정할 수 있습니다.
상태불러오는 중
tooltip
불러오는 중
핵심 개념
도구 설명 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"interaction": {
"hover": true,
"tooltip": {
"fields": [
{
"field": "x",
"format": "number",
"label": "X"
},
{
"field": "y",
"format": "number",
"label": "Y"
},
{
"field": "direction",
"format": "number",
"fractionDigits": 0,
"label": "방향",
"suffix": "°"
},
{
"field": "magnitude",
"format": "number",
"label": "크기"
}
],
"title": "Vector field · 도구 설명",
"trigger": "mark"
}
},
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#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"
},
{
"field": "direction",
"format": "number",
"fractionDigits": 0,
"label": "방향",
"suffix": "°"
},
{
"field": "magnitude",
"format": "number",
"label": "크기"
}
],
"title": "Vector field · 도구 설명",
"trigger": "mark"
}
},
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}테마
상단 선택기의 현재 내장 테마를 옵션에 적용하고 모든 활성 예제를 함께 갱신합니다.
상태불러오는 중
theme
불러오는 중
핵심 개념
테마 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"theme": "graflume-light",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"theme": "graflume-light",
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}범례
계열, 범주 또는 연속 값의 시각적 의미를 차트와 함께 설명합니다.
상태불러오는 중
legend
- 범례:
legend · explicit · 1 channels
불러오는 중
핵심 개념
범례 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"legend": {
"interactive": false,
"items": [
{
"id": "semantic-0",
"label": "Magnitude · length"
}
],
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "layers",
"orientation": "horizontal",
"position": "bottom",
"title": "Vector field · 범례",
"visible": true
},
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"legend": {
"interactive": false,
"items": [
{
"id": "semantic-0",
"label": "Magnitude · length"
}
],
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "layers",
"orientation": "horizontal",
"position": "bottom",
"title": "Vector field · 범례",
"visible": true
},
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}강조
대표 데이터나 공간 위치를 시각적으로 강조해 읽을 지점을 안내합니다.
상태불러오는 중
highlight
- 포인트·범위 하이라이트:
highlights[] · datum · direction
불러오는 중
핵심 개념
강조 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "direction",
"type": "datum",
"value": 325.853
}
}
],
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "direction",
"type": "datum",
"value": 325.853
}
}
],
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}말풍선
자동 충돌 회피와 다국어 줄바꿈을 사용하는 설명 말풍선을 표시합니다.
상태불러오는 중
callout
- 설명 말풍선:
annotations[] · datum · direction · callout · placement:auto
불러오는 중
핵심 개념
말풍선 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "direction",
"type": "datum",
"value": 325.853
},
"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",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "direction",
"type": "datum",
"value": 325.853
},
"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",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}선택
데이터를 선택하고 토글하며 배경이나 Esc 키로 안전하게 해제합니다.
상태불러오는 중
selection
- 대화형 선택:
selection · multiple · toggle
불러오는 중
핵심 개념
선택 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "대화형 선택",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"key": "direction",
"mode": "multiple",
"toggle": true
}
},
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"height": 620,
"interaction": {
"selection": {
"ariaLabel": "대화형 선택",
"clearOnBackground": true,
"clearOnEscape": true,
"highlight": {
"padding": 5
},
"key": "direction",
"mode": "multiple",
"toggle": true
}
},
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}화면 제어
확대, 이동, 초기화, 투영, 전체 화면과 PNG 내보내기 메뉴를 각각 표시하거나 숨깁니다. controls: false이면 제어 막대 전체를 제거합니다.
상태불러오는 중
controls
불러오는 중
핵심 개념
화면 제어 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
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",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#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",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"padding": {
"top": 52
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}접근성
ARIA 설명, 키보드 안내와 의미 있는 데이터 표를 함께 제공합니다.
상태불러오는 중
accessibility
불러오는 중
핵심 개념
접근성 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
xquantitative | yquantitative | directionquantitative | magnitudequantitative |
|---|---|---|---|
| -4 | -3 | 310.267 | 2.228 |
| -3 | -3 | 322.357 | 1.998 |
| -2 | -3 | 335.932 | 1.815 |
| -1 | -3 | 350.937 | 1.651 |
| 0 | -3 | 8.269000000000005 | 1.53 |
| 1 | -3 | 27.187000000000012 | 1.532 |
| 2 | -3 | 43.389999999999986 | 1.718 |
| 3 | -3 | 53.60000000000002 | 2.062 |
| 4 | -3 | 58.69999999999999 | 2.504 |
| -4 | -2 | 298.909 | 1.986 |
| -3 | -2 | 311.202 | 1.673 |
| -2 | -2 | 326.516 | 1.411 |
| -1 | -2 | 345.451 | 1.188 |
| 0 | -2 | 9.963000000000022 | 1.05 |
| 1 | -2 | 36.84699999999998 | 1.103 |
| 2 | -2 | 56.06 | 1.376 |
| 3 | -2 | 65.358 | 1.784 |
| 4 | -2 | 68.65899999999999 | 2.256 |
| -4 | -1 | 284.619 | 1.902 |
| -3 | -1 | 294.563 | 1.496 |
| -2 | -1 | 308.364 | 1.123 |
| -1 | -1 | 329.141 | 0.78 |
| 0 | -1 | 8.192999999999984 | 0.559 |
| 1 | -1 | 54.25799999999998 | 0.69 |
| 2 | -1 | 74.50400000000002 | 1.079 |
| 3 | -1 | 80.14999999999998 | 1.542 |
| 4 | -1 | 80.31900000000002 | 2.029 |
| -4 | 0 | 270 | 1.97 |
| -3 | 0 | 275.434 | 1.497 |
| -2 | 0 | 282.115 | 1.033 |
| -1 | 0 | 289.714 | 0.563 |
| 0 | 0 | 325.853 | 0.089 |
| 1 | 0 | 100.17399999999998 | 0.437 |
| 2 | 0 | 101.899 | 0.93 |
| 3 | 0 | 98.83800000000002 | 1.407 |
| 4 | 0 | 94.24700000000001 | 1.875 |
| -4 | 1 | 257.019 | 2.137 |
| -3 | 1 | 258.078 | 1.638 |
| -2 | 1 | 256.801 | 1.153 |
| -1 | 1 | 245.691 | 0.705 |
| 0 | 1 | 201.766 | 0.437 |
| 1 | 1 | 150.30200000000002 | 0.641 |
| 2 | 1 | 130.098 | 1.043 |
| 3 | 1 | 118.582 | 1.455 |
| 4 | 1 | 109.39600000000002 | 1.864 |
| -4 | 2 | 245.817 | 2.343 |
| -3 | 2 | 243.73 | 1.849 |
| -2 | 2 | 237.748 | 1.393 |
| -1 | 2 | 222.18 | 1.039 |
| 0 | 2 | 193.806 | 0.913 |
| 1 | 2 | 165.813 | 1.07 |
| 2 | 2 | 147.202 | 1.37 |
| 3 | 2 | 133.89999999999998 | 1.696 |
| 4 | 2 | 122.84500000000003 | 2.026 |
| -4 | 3 | 235.78 | 2.561 |
| -3 | 3 | 231.588 | 2.09 |
| -2 | 3 | 223.414 | 1.684 |
| -1 | 3 | 208.448 | 1.422 |
| 0 | 3 | 188.216 | 1.38 |
| 1 | 3 | 169.44399999999996 | 1.543 |
| 2 | 3 | 154.94799999999998 | 1.801 |
| 3 | 3 | 143.11700000000002 | 2.071 |
| 4 | 3 | 132.505 | 2.337 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.vector()
const data = [
{
"direction": 310.267,
"high": -1.7,
"magnitude": 2.228,
"value": 1.44,
"x": -4,
"y": -3
},
{
"direction": 322.357,
"high": -1.22,
"magnitude": 1.998,
"value": 1.582,
"x": -3,
"y": -3
},
{
"direction": 335.932,
"high": -0.74,
"magnitude": 1.815,
"value": 1.657,
"x": -2,
"y": -3
},
{
"direction": 350.937,
"high": -0.26,
"magnitude": 1.651,
"value": 1.63,
"x": -1,
"y": -3
},
{
"direction": 8.269000000000005,
"high": 0.22,
"magnitude": 1.53,
"value": 1.514,
"x": 0,
"y": -3
},
{
"direction": 27.187000000000012,
"high": 0.7,
"magnitude": 1.532,
"value": 1.363,
"x": 1,
"y": -3
},
{
"direction": 43.389999999999986,
"high": 1.18,
"magnitude": 1.718,
"value": 1.248,
"x": 2,
"y": -3
},
{
"direction": 53.60000000000002,
"high": 1.66,
"magnitude": 2.062,
"value": 1.224,
"x": 3,
"y": -3
},
{
"direction": 58.69999999999999,
"high": 2.14,
"magnitude": 2.504,
"value": 1.301,
"x": 4,
"y": -3
},
{
"direction": 298.909,
"high": -1.738,
"magnitude": 1.986,
"value": 0.96,
"x": -4,
"y": -2
},
{
"direction": 311.202,
"high": -1.258,
"magnitude": 1.673,
"value": 1.102,
"x": -3,
"y": -2
},
{
"direction": 326.516,
"high": -0.778,
"magnitude": 1.411,
"value": 1.177,
"x": -2,
"y": -2
},
{
"direction": 345.451,
"high": -0.298,
"magnitude": 1.188,
"value": 1.15,
"x": -1,
"y": -2
},
{
"direction": 9.963000000000022,
"high": 0.182,
"magnitude": 1.05,
"value": 1.034,
"x": 0,
"y": -2
},
{
"direction": 36.84699999999998,
"high": 0.662,
"magnitude": 1.103,
"value": 0.883,
"x": 1,
"y": -2
},
{
"direction": 56.06,
"high": 1.142,
"magnitude": 1.376,
"value": 0.768,
"x": 2,
"y": -2
},
{
"direction": 65.358,
"high": 1.622,
"magnitude": 1.784,
"value": 0.744,
"x": 3,
"y": -2
},
{
"direction": 68.65899999999999,
"high": 2.102,
"magnitude": 2.256,
"value": 0.821,
"x": 4,
"y": -2
},
{
"direction": 284.619,
"high": -1.84,
"magnitude": 1.902,
"value": 0.48,
"x": -4,
"y": -1
},
{
"direction": 294.563,
"high": -1.36,
"magnitude": 1.496,
"value": 0.622,
"x": -3,
"y": -1
},
{
"direction": 308.364,
"high": -0.88,
"magnitude": 1.123,
"value": 0.697,
"x": -2,
"y": -1
},
{
"direction": 329.141,
"high": -0.4,
"magnitude": 0.78,
"value": 0.67,
"x": -1,
"y": -1
},
{
"direction": 8.192999999999984,
"high": 0.08,
"magnitude": 0.559,
"value": 0.554,
"x": 0,
"y": -1
},
{
"direction": 54.25799999999998,
"high": 0.56,
"magnitude": 0.69,
"value": 0.403,
"x": 1,
"y": -1
},
{
"direction": 74.50400000000002,
"high": 1.04,
"magnitude": 1.079,
"value": 0.288,
"x": 2,
"y": -1
},
{
"direction": 80.14999999999998,
"high": 1.52,
"magnitude": 1.542,
"value": 0.264,
"x": 3,
"y": -1
},
{
"direction": 80.31900000000002,
"high": 2,
"magnitude": 2.029,
"value": 0.341,
"x": 4,
"y": -1
},
{
"direction": 270,
"high": -1.97,
"magnitude": 1.97,
"value": 0,
"x": -4,
"y": 0
},
{
"direction": 275.434,
"high": -1.49,
"magnitude": 1.497,
"value": 0.142,
"x": -3,
"y": 0
},
{
"direction": 282.115,
"high": -1.01,
"magnitude": 1.033,
"value": 0.217,
"x": -2,
"y": 0
},
{
"direction": 289.714,
"high": -0.53,
"magnitude": 0.563,
"value": 0.19,
"x": -1,
"y": 0
},
{
"direction": 325.853,
"high": -0.05,
"magnitude": 0.089,
"value": 0.074,
"x": 0,
"y": 0
},
{
"direction": 100.17399999999998,
"high": 0.43,
"magnitude": 0.437,
"value": -0.077,
"x": 1,
"y": 0
},
{
"direction": 101.899,
"high": 0.91,
"magnitude": 0.93,
"value": -0.192,
"x": 2,
"y": 0
},
{
"direction": 98.83800000000002,
"high": 1.39,
"magnitude": 1.407,
"value": -0.216,
"x": 3,
"y": 0
},
{
"direction": 94.24700000000001,
"high": 1.87,
"magnitude": 1.875,
"value": -0.139,
"x": 4,
"y": 0
},
{
"direction": 257.019,
"high": -2.082,
"magnitude": 2.137,
"value": -0.48,
"x": -4,
"y": 1
},
{
"direction": 258.078,
"high": -1.602,
"magnitude": 1.638,
"value": -0.338,
"x": -3,
"y": 1
},
{
"direction": 256.801,
"high": -1.122,
"magnitude": 1.153,
"value": -0.263,
"x": -2,
"y": 1
},
{
"direction": 245.691,
"high": -0.642,
"magnitude": 0.705,
"value": -0.29,
"x": -1,
"y": 1
},
{
"direction": 201.766,
"high": -0.162,
"magnitude": 0.437,
"value": -0.406,
"x": 0,
"y": 1
},
{
"direction": 150.30200000000002,
"high": 0.318,
"magnitude": 0.641,
"value": -0.557,
"x": 1,
"y": 1
},
{
"direction": 130.098,
"high": 0.798,
"magnitude": 1.043,
"value": -0.672,
"x": 2,
"y": 1
},
{
"direction": 118.582,
"high": 1.278,
"magnitude": 1.455,
"value": -0.696,
"x": 3,
"y": 1
},
{
"direction": 109.39600000000002,
"high": 1.758,
"magnitude": 1.864,
"value": -0.619,
"x": 4,
"y": 1
},
{
"direction": 245.817,
"high": -2.138,
"magnitude": 2.343,
"value": -0.96,
"x": -4,
"y": 2
},
{
"direction": 243.73,
"high": -1.658,
"magnitude": 1.849,
"value": -0.818,
"x": -3,
"y": 2
},
{
"direction": 237.748,
"high": -1.178,
"magnitude": 1.393,
"value": -0.743,
"x": -2,
"y": 2
},
{
"direction": 222.18,
"high": -0.698,
"magnitude": 1.039,
"value": -0.77,
"x": -1,
"y": 2
},
{
"direction": 193.806,
"high": -0.218,
"magnitude": 0.913,
"value": -0.886,
"x": 0,
"y": 2
},
{
"direction": 165.813,
"high": 0.262,
"magnitude": 1.07,
"value": -1.037,
"x": 1,
"y": 2
},
{
"direction": 147.202,
"high": 0.742,
"magnitude": 1.37,
"value": -1.152,
"x": 2,
"y": 2
},
{
"direction": 133.89999999999998,
"high": 1.222,
"magnitude": 1.696,
"value": -1.176,
"x": 3,
"y": 2
},
{
"direction": 122.84500000000003,
"high": 1.702,
"magnitude": 2.026,
"value": -1.099,
"x": 4,
"y": 2
},
{
"direction": 235.78,
"high": -2.117,
"magnitude": 2.561,
"value": -1.44,
"x": -4,
"y": 3
},
{
"direction": 231.588,
"high": -1.637,
"magnitude": 2.09,
"value": -1.298,
"x": -3,
"y": 3
},
{
"direction": 223.414,
"high": -1.157,
"magnitude": 1.684,
"value": -1.223,
"x": -2,
"y": 3
},
{
"direction": 208.448,
"high": -0.677,
"magnitude": 1.422,
"value": -1.25,
"x": -1,
"y": 3
},
{
"direction": 188.216,
"high": -0.197,
"magnitude": 1.38,
"value": -1.366,
"x": 0,
"y": 3
},
{
"direction": 169.44399999999996,
"high": 0.283,
"magnitude": 1.543,
"value": -1.517,
"x": 1,
"y": 3
},
{
"direction": 154.94799999999998,
"high": 0.763,
"magnitude": 1.801,
"value": -1.632,
"x": 2,
"y": 3
},
{
"direction": 143.11700000000002,
"high": 1.243,
"magnitude": 2.071,
"value": -1.656,
"x": 3,
"y": 3
},
{
"direction": 132.505,
"high": 1.723,
"magnitude": 2.337,
"value": -1.579,
"x": 4,
"y": 3
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Vector field · 접근성 example"
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
};
Graflume.vector('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Vector field · 접근성 example"
},
"height": 620,
"locale": "ko",
"mark": {
"fields": {
"direction": "direction",
"magnitude": "magnitude"
}
},
"width": "container",
"x": {
"field": "x",
"title": "Horizontal position",
"type": "quantitative"
},
"y": {
"field": "y",
"title": "Vertical position",
"type": "quantitative"
}
}