벡터장 차트

화살표의 방향과 길이로 바람이나 흐름의 변화를 살펴보세요.

벡터장 차트

가장 단순한 차트

차트를 살펴보고, 표에서 원본 데이터를 확인하세요. 아래에서 같은 예제의 코드를 펼칠 수 있습니다.

기본 예제

불러오는 중

조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

코드와 설정 보기

브라우저 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"
  }
}
Quick API
vectorField()
브라우저 스냅샷
graflume/complete
mark
vector
프리셋
2
  • minimal-implementation

공통 기능

모든 차트에서 사용하는 기능

기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요. 데이터 표식 위에 마우스를 올리세요. 지원하는 차트에서는 축을 따라 커서를 움직이면 가장 가까운 값을 볼 수 있습니다. 모든 정확한 값은 아래 표에서 확인할 수 있습니다.

헤더

차트 안에 제목과 보조 설명을 넣어 무엇을 보여주는지 먼저 밝힙니다.

불러오는 중

조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

코드와 설정 보기

브라우저 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": "벡터장 차트"
  },
  "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": "벡터장 차트"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal position",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical position",
    "type": "quantitative"
  }
}
  • header

차트 고유 기능

이 차트만의 고유한 실행 기능

Graflume 공개 카탈로그에 등록된 이 계열의 모든 실행 모드입니다. 각 탭은 독립 데이터, 옵션, Quick API와 지원 기능 근거를 가집니다.

Vector field chart

Vector field chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: direction and magnitude arrows · magnitude size and width.

불러오는 중

조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

코드와 설정 보기

브라우저 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": "벡터장 차트 example"
  },
  "axes": {
    "x": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "East–west distance"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "North–south distance"
      }
    }
  },
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "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": "벡터장 차트",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "fields": {
      "direction": "direction",
      "magnitude": "magnitude"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Vector field chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: direction and magnitude arrows · magnitude size and width.",
    "text": "벡터장 차트"
  },
  "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": "벡터장 차트 example"
  },
  "axes": {
    "x": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "East–west distance"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "North–south distance"
      }
    }
  },
  "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "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": "벡터장 차트",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "fields": {
      "direction": "direction",
      "magnitude": "magnitude"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Vector field chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: direction and magnitude arrows · magnitude size and width.",
    "text": "벡터장 차트"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal position",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical position",
    "type": "quantitative"
  }
}
  • vector
  • direction and magnitude arrows
  • magnitude size and width
  • normalization and sampled grid

극단 사례

값의 범위·불규칙 구조·대용량 입력

성공할 수 있는 유효 데이터 안에서 수치 범위, 희소 구조와 대용량 입력을 검증합니다. 각 탭은 필요할 때만 데이터를 만들며 잘못된 값은 조용히 보정하지 않습니다.

큰 값·작은 값

0과 매우 작은 유한값부터 매우 큰 유한값까지 함께 넣어 자동 도메인, 정밀도와 기하가 무너지지 않는지 확인합니다. NaN과 Infinity는 의도적으로 거부됩니다. 유한값과 축 도메인을 보존하는 데이터 무결성 규칙 2개를 적용합니다.

불러오는 중

조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

코드와 설정 보기

브라우저 API

Graflume.vectorField()

const data = [
  {
    "direction": -360,
    "high": -1e-9,
    "magnitude": 1e-9,
    "value": -1000000000000,
    "x": -4,
    "y": -3
  },
  {
    "direction": 0,
    "high": 0,
    "magnitude": 0,
    "value": -1e-9,
    "x": -3,
    "y": -3
  },
  {
    "direction": 360,
    "high": 1000000000000,
    "magnitude": 1000000000000,
    "value": 0,
    "x": -2,
    "y": -3
  },
  {
    "direction": 720,
    "high": 1e-9,
    "magnitude": 1,
    "value": 1000000000000,
    "x": -1,
    "y": -3
  },
  {
    "direction": 90,
    "high": 1000000,
    "magnitude": 1000000,
    "value": 1e-9,
    "x": 0,
    "y": -3
  },
  {
    "direction": 270,
    "high": -1000000000000,
    "magnitude": 0.000001,
    "value": 1000000,
    "x": 1,
    "y": -3
  }
];

const options = {
  "accessibility": {
    "description": "A balanced vortex keeps direction, magnitude, and the calm center visible. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "벡터장 차트"
  },
  "height": 620,
  "locale": "ko",
  "mark": {
    "fields": {
      "direction": "direction",
      "magnitude": "magnitude"
    }
  },
  "title": {
    "subtitle": "edge case · range",
    "text": "벡터장 차트"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal position",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical position",
    "type": "quantitative"
  }
};

Graflume.vectorField('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "A balanced vortex keeps direction, magnitude, and the calm center visible. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "벡터장 차트"
  },
  "height": 620,
  "locale": "ko",
  "mark": {
    "fields": {
      "direction": "direction",
      "magnitude": "magnitude"
    }
  },
  "title": {
    "subtitle": "edge case · range",
    "text": "벡터장 차트"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal position",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical position",
    "type": "quantitative"
  }
}
  • extreme-range
  • extreme-small
  • extreme-large
  • zero
  • mixed-sign
  • budget:marks<=6

극단 환경

디바이스·입력·표시 능력에 맞춘 재구성

기기 이름을 추측하지 않고 컨테이너 크기, 입력 방식, 표시 능력과 사용자 선호를 조합합니다. 모바일·워치·전자종이·흑백·도트 화면과 표준 기반 극단 환경을 같은 차트에서 비교하세요.

반응형 화면

컨테이너 폭과 높이에 따라 축, 범례, 설명과 조작부를 자동 재배치합니다.

960×540 · adaptive.profiles=responsive-fluid
  • zoom-reflow
  • shape-rectangle
  • display-color
  • input-fine
  • motion-full
  • renderer-canvas-spatial

극단 환경 미리보기

위 프로필 탭을 선택하면 같은 데이터와 ChartSpec을 유지한 채 화면 크기, 입력 방식, 표시 능력과 사용자 선호에 맞춰 차트를 다시 구성합니다.

불러오는 중

조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

코드와 설정 보기

브라우저 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": "A balanced vortex keeps direction, magnitude, and the calm center visible. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Vector field chart: A balanced vortex keeps direction, magnitude, and the calm center visible"
  },
  "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"
    }
  ],
  "axes": {
    "x": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "East–west distance"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "North–south distance"
      }
    }
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "direction",
        "type": "datum",
        "value": 325.853
      }
    }
  ],
  "interaction": {
    "controls": {
      "annotations": true,
      "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "direction",
      "mode": "multiple",
      "toggle": 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": "벡터장 차트",
      "trigger": "mark"
    }
  },
  "legend": {
    "interactive": false,
    "items": [
      {
        "id": "semantic-0",
        "label": "Magnitude · length"
      }
    ],
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "벡터장 차트",
    "visible": true
  },
  "locale": "ko",
  "mark": {
    "fields": {
      "direction": "direction",
      "magnitude": "magnitude"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "A balanced vortex keeps direction, magnitude, and the calm center visible",
    "text": "Vector field chart"
  },
  "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": "A balanced vortex keeps direction, magnitude, and the calm center visible. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Vector field chart: A balanced vortex keeps direction, magnitude, and the calm center visible"
  },
  "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"
    }
  ],
  "axes": {
    "x": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "East–west distance"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 0,
        "suffix": " km",
        "type": "number"
      },
      "ticks": {
        "count": 5
      },
      "title": {
        "text": "North–south distance"
      }
    }
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "direction",
        "type": "datum",
        "value": 325.853
      }
    }
  ],
  "interaction": {
    "controls": {
      "annotations": true,
      "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
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "direction",
      "mode": "multiple",
      "toggle": 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": "벡터장 차트",
      "trigger": "mark"
    }
  },
  "legend": {
    "interactive": false,
    "items": [
      {
        "id": "semantic-0",
        "label": "Magnitude · length"
      }
    ],
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "벡터장 차트",
    "visible": true
  },
  "locale": "ko",
  "mark": {
    "fields": {
      "direction": "direction",
      "magnitude": "magnitude"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "A balanced vortex keeps direction, magnitude, and the calm center visible",
    "text": "Vector field chart"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Horizontal position",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Vertical position",
    "type": "quantitative"
  }
}
  • adaptive
  • capability-driven
  • no-user-agent-branching
  • 범례: legend · explicit · 1 channels
  • 포인트·범위 하이라이트: highlights[] · datum · direction
  • 설명 말풍선: annotations[] · datum · direction · callout · placement:auto
  • 대화형 선택: selection · multiple · toggle

차트 카탈로그

실행 모드와 호환 이름

실행 가능한 모드와 이전 이름의 대응 관계를 확인하세요.

모드: 2 · 호환 이름: 2

벡터장 차트 · 지원 모드 · 대표 모드 vector
ID이름Quick APImodemark렌더러
vector벡터장 차트 · vectorvector()vectorvectorcanvas
wind-barb벡터장 차트 · wind-barbwindBarb()wind-barbwind-barbcanvas
벡터장 차트 · 호환 이름
식별자기준 모드 ID
vectorvector
windbarbwind-barb

매뉴얼

통합 체크리스트

ARIA · table fallback

접근성

Canvas ARIA 메타데이터에 텍스트 요약과 표 대체 표현을 함께 제공합니다.

standard · large · ultra

성능

standard·large·ultra 프로필은 렌더링 작업량을 제한합니다.

차트 카탈로그