Graflume · Alpha

Raster image · 극단 환경 적용

명시적인 셀 좌표와 RGB 값을 데이터 행으로 받아 상호작용 가능한 래스터를 만듭니다. 기기 이름을 추측하지 않고 컨테이너 크기, 입력 방식, 표시 능력과 사용자 선호를 조합합니다. 모바일·워치·전자종이·흑백·도트 화면과 표준 기반 극단 환경을 같은 차트에서 비교하세요.

차트 계열 · 고급 차트 계열

Raster image

명시적인 셀 좌표와 RGB 값을 데이터 행으로 받아 상호작용 가능한 래스터를 만듭니다.

Quick API
image()
브라우저 스냅샷
graflume/complete
mark
image
프리셋
1

극단 환경

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

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

반응형 화면

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

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

극단 환경 미리보기

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

상태불러오는 중

  • adaptive
  • capability-driven
  • no-user-agent-branching
  • 범례: legend · explicit · 3 channels
  • 포인트·범위 하이라이트: highlights[] · datum · rowIndex
  • 설명 말풍선: annotations[] · datum · rowIndex · callout · placement:auto
  • 대화형 선택: selection · multiple · toggle
Graflume.image() Canvas 2D
조작 도움말

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

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

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

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "accessibility": {
    "description": "A smooth calibration raster demonstrates color and pixel inspection. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Raster image: A smooth calibration raster demonstrates color and pixel inspection"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "rowIndex": 48,
        "type": "datum"
      },
      "text": "포인트·범위 하이라이트 · 0"
    }
  ],
  "axes": {
    "x": {
      "format": {
        "type": "integer"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "ticks": {
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "ticks": {
        "spacing": 8
      }
    }
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "rowIndex": 48,
        "type": "datum"
      }
    }
  ],
  "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
      },
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "fields": [
        {
          "field": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        },
        {
          "field": "red",
          "format": "number",
          "label": "Red"
        },
        {
          "field": "green",
          "format": "number",
          "label": "Green"
        },
        {
          "field": "blue",
          "format": "number",
          "label": "Blue"
        }
      ],
      "title": "Raster image",
      "trigger": "mark"
    }
  },
  "legend": {
    "interactive": false,
    "items": [
      {
        "id": "semantic-0",
        "label": "Red"
      },
      {
        "id": "semantic-1",
        "label": "Green"
      },
      {
        "id": "semantic-2",
        "label": "Blue"
      }
    ],
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Raster image",
    "visible": true
  },
  "locale": "ko",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "A smooth calibration raster demonstrates color and pixel inspection",
    "text": "Raster image"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "A smooth calibration raster demonstrates color and pixel inspection. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Raster image: A smooth calibration raster demonstrates color and pixel inspection"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "rowIndex": 48,
        "type": "datum"
      },
      "text": "포인트·범위 하이라이트 · 0"
    }
  ],
  "axes": {
    "x": {
      "format": {
        "type": "integer"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "ticks": {
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "ticks": {
        "spacing": 8
      }
    }
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "rowIndex": 48,
        "type": "datum"
      }
    }
  ],
  "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
      },
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "fields": [
        {
          "field": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        },
        {
          "field": "red",
          "format": "number",
          "label": "Red"
        },
        {
          "field": "green",
          "format": "number",
          "label": "Green"
        },
        {
          "field": "blue",
          "format": "number",
          "label": "Blue"
        }
      ],
      "title": "Raster image",
      "trigger": "mark"
    }
  },
  "legend": {
    "interactive": false,
    "items": [
      {
        "id": "semantic-0",
        "label": "Red"
      },
      {
        "id": "semantic-1",
        "label": "Green"
      },
      {
        "id": "semantic-2",
        "label": "Blue"
      }
    ],
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Raster image",
    "visible": true
  },
  "locale": "ko",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "A smooth calibration raster demonstrates color and pixel inspection",
    "text": "Raster image"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}
차트 카탈로그