Graflume · Alpha

Item chart

전체를 일정한 개수의 기호로 나누어 범주별 비중을 직관적으로 셉니다.

차트 계열 · 전문 차트 계열

Item chart

전체를 일정한 개수의 기호로 나누어 범주별 비중을 직관적으로 셉니다.

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

기본 구현

가장 단순한 차트

필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다.

기본 예제

전체를 일정한 개수의 기호로 나누어 범주별 비중을 직관적으로 셉니다.

상태불러오는 중

minimal-implementation

Graflume.itemChart() Canvas 2D

조작 도움말

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

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

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

불러오는 중

전체를 일정한 개수의 기호로 나누어 범주별 비중을 직관적으로 셉니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

공통 기능

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

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

헤더

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

상태불러오는 중

header

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

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

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "Item chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed waffle-like grid · proportional unit assignment.",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "Item chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed waffle-like grid · proportional unit assignment.",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

마크 또는 축을 가리키면 정확한 값을 보여줍니다. 날짜·시간은 locale, 형식과 시간대를 사용자가 선언형 옵션으로 정할 수 있습니다.

상태불러오는 중

tooltip

Graflume.itemChart() Canvas 2D

조작 도움말

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

마크 또는 축을 가리키면 정확한 값을 보여줍니다. 날짜·시간은 locale, 형식과 시간대를 사용자가 선언형 옵션으로 정할 수 있습니다.

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

브라우저 API

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart · 도구 설명",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart · 도구 설명",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

테마

상단 선택기의 현재 내장 테마를 옵션에 적용하고 모든 활성 예제를 함께 갱신합니다.

상태불러오는 중

theme

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

상단 선택기의 현재 내장 테마를 옵션에 적용하고 모든 활성 예제를 함께 갱신합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

범례

계열, 범주 또는 연속 값의 시각적 의미를 차트와 함께 설명합니다.

상태불러오는 중

legend

범례: legend · categories · category

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

계열, 범주 또는 연속 값의 시각적 의미를 차트와 함께 설명합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "legend": {
    "field": "category",
    "interactive": true,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "범주",
    "visible": true
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "legend": {
    "field": "category",
    "interactive": true,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "범주",
    "visible": true
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

강조

대표 데이터나 공간 위치를 시각적으로 강조해 읽을 지점을 안내합니다.

상태불러오는 중

highlight

포인트·범위 하이라이트: highlights[] · datum · category

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

대표 데이터나 공간 위치를 시각적으로 강조해 읽을 지점을 안내합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      }
    }
  ],
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      }
    }
  ],
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

말풍선

자동 충돌 회피와 다국어 줄바꿈을 사용하는 설명 말풍선을 표시합니다.

상태불러오는 중

callout

설명 말풍선: annotations[] · datum · category · callout · placement:auto

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

자동 충돌 회피와 다국어 줄바꿈을 사용하는 설명 말풍선을 표시합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      },
      "text": "포인트·범위 하이라이트 · Product referrals"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      }
    }
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      },
      "text": "포인트·범위 하이라이트 · Product referrals"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      }
    }
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

선택

데이터를 선택하고 토글하며 배경이나 Esc 키로 안전하게 해제합니다.

상태불러오는 중

selection

대화형 선택: selection · multiple · toggle

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

데이터를 선택하고 토글하며 배경이나 Esc 키로 안전하게 해제합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "category",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "category",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

화면 제어

확대, 이동, 초기화, 투영, 전체 화면과 PNG 내보내기 메뉴를 각각 표시하거나 숨깁니다. controls: false이면 제어 막대 전체를 제거합니다.

상태불러오는 중

controls

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

확대, 이동, 초기화, 투영, 전체 화면과 PNG 내보내기 메뉴를 각각 표시하거나 숨깁니다. controls: false이면 제어 막대 전체를 제거합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

접근성

ARIA 설명, 키보드 안내와 의미 있는 데이터 표를 함께 제공합니다.

상태불러오는 중

accessibility

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

ARIA 설명, 키보드 안내와 의미 있는 데이터 표를 함께 제공합니다.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Item chart · 접근성 example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Item chart · 접근성 example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

차트 고유 기능

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

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

Item chart

Item chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed waffle-like grid · proportional unit assignment.

상태불러오는 중

item
fixed waffle-like grid
proportional unit assignment
per-unit hit and selection
explicit waffle/isotype contract
partial units
fill direction and grouping
accessible counts

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

Item chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed waffle-like grid · proportional unit assignment.

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Item chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Item chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed waffle-like grid · proportional unit assignment.",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Item chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Item chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed waffle-like grid · proportional unit assignment.",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

극단 사례

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

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

큰 값·작은 값

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

상태불러오는 중

extreme-range
integer-boundary
extreme-large
zero
budget:marks<=5

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

큰 값·작은 값 · 행 데이터
`category`ordinal	`value`quantitative
Organic search	0
Direct	1
Product referrals	2
Community	5000
Campaigns	1e+06

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "value": 0
  },
  {
    "category": "Direct",
    "value": 1
  },
  {
    "category": "Product referrals",
    "value": 2
  },
  {
    "category": "Community",
    "value": 5000
  },
  {
    "category": "Campaigns",
    "value": 1000000
  }
];

const options = {
  "accessibility": {
    "description": "One hundred marks translate acquisition share into an immediate countable view. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Item chart"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "edge case · range",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "One hundred marks translate acquisition share into an immediate countable view. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Item chart"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "edge case · range",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

희소·불규칙 구조

중복, 결측, 희소성, 순서 뒤바뀜 중 이 계열에서 의미가 정의된 구조만 실행합니다. 잘못된 참조나 깨진 튜플을 성공 예제로 위장하지 않습니다. 결측·중복·순서의 의미를 보존하는 구조 규칙 3개를 적용합니다.

상태불러오는 중

irregular-structure
duplicate-key
null
zero-baseline
budget:marks<=6

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

희소·불규칙 구조 · 행 데이터
`category`ordinal	`value`quantitative
Organic search	38
Direct	—
Organic search	38
Product referrals	18
Community	11
Campaigns	6

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "value": 38
  },
  {
    "category": "Direct",
    "value": null
  },
  {
    "category": "Organic search",
    "value": 38
  },
  {
    "category": "Product referrals",
    "value": 18
  },
  {
    "category": "Community",
    "value": 11
  },
  {
    "category": "Campaigns",
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "One hundred marks translate acquisition share into an immediate countable view. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Item chart · 희소·불규칙 구조"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "edge case · structure",
    "text": "Item chart · 희소·불규칙 구조"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "One hundred marks translate acquisition share into an immediate countable view. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Item chart · 희소·불규칙 구조"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "edge case · structure",
    "text": "Item chart · 희소·불규칙 구조"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

대용량 데이터

결정적인 압축 레시피를 탭을 열 때만 생성합니다. Graflume의 성능 프로필이 입력량에 맞춰 표식 수, 적중 검사와 애니메이션 비용을 제한합니다. 결정적 생성과 출력 제한을 보장하는 대용량 규칙 6개를 적용합니다. 이 계열은 논리 입력 60,000 이벤트를 생성하고 막대 표식 출력을 최대 12,000개로 제한합니다.

상태불러오는 중

high-row-cardinality
all-input-rows-generated
all-input-rows-processed
deterministic-generation
bounded-rendering
input:60000
zoom-pan-reset
budget:bar-marks<=12000

범례: legend · categories · category
포인트·범위 하이라이트: highlights[] · datum · category
설명 말풍선: annotations[] · datum · category · callout · placement:auto

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

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

브라우저 API

Graflume.itemChart()

const recipe = {
  "cardinality": {
    "axes": {},
    "sourceRows": 60000,
    "unit": "events"
  },
  "expectedInvariants": [
    "finite-json",
    "item-count-nonnegative-integer"
  ],
  "id": "categorical-events",
  "initialView": {
    "kind": "domain",
    "zoom": 1
  },
  "outputBudget": {
    "maximum": 12000,
    "resource": "bar-marks"
  },
  "parameters": {
    "family": "item",
    "nullableFields": [
      "value"
    ],
    "positiveFields": [],
    "scenario": "volume",
    "valueFields": [
      "value"
    ],
    "valuePolicy": "nonnegative-integer"
  },
  "preview": {
    "maximumRows": 12,
    "method": "top-groups"
  },
  "reduction": {
    "method": "group-sum-top-k",
    "stage": "pre-aggregate"
  },
  "seed": 1632418214,
  "shape": "rows",
  "version": 2
};
const { data, previewRows, plan } = Graflume.materializeDemoRecipe(recipe);

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Item chart · 대용량 데이터"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Community"
      },
      "text": "포인트·범위 하이라이트 · Community"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "create": {
    "adaptive": {
      "environment": {
        "rowCount": 60000
      },
      "largeDataNavigation": true,
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Community"
      }
    }
  ],
  "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": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart · 대용량 데이터",
      "trigger": "mark"
    }
  },
  "legend": {
    "field": "category",
    "interactive": true,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "범주",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "performance": "auto",
  "theme": "graflume-light",
  "title": {
    "subtitle": "One hundred marks translate acquisition share into an immediate countable view · 60,000 logical rows, screen-aware detail",
    "text": "Item chart · 대용량 데이터"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Item chart · 대용량 데이터"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Community"
      },
      "text": "포인트·범위 하이라이트 · Community"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "create": {
    "adaptive": {
      "environment": {
        "rowCount": 60000
      },
      "largeDataNavigation": true,
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Community"
      }
    }
  ],
  "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": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart · 대용량 데이터",
      "trigger": "mark"
    }
  },
  "legend": {
    "field": "category",
    "interactive": true,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "범주",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "performance": "auto",
  "theme": "graflume-light",
  "title": {
    "subtitle": "One hundred marks translate acquisition share into an immediate countable view · 60,000 logical rows, screen-aware detail",
    "text": "Item chart · 대용량 데이터"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

극단 환경

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

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

반응형 화면

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

960×540 · adaptive.profiles=responsive-fluid

zoom-reflow
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

모바일

세로형 작은 화면에서 44px 터치 대상, 탭 도구 설명과 접힌 보조 정보를 우선합니다.

390×844 · adaptive.profiles=mobile-touch

zoom-reflow
coarse-touch
virtual-keyboard
shape-rectangle
display-color
input-coarse
motion-full
renderer-canvas-spatial

스마트 워치

원형 또는 매우 작은 화면에서는 핵심 표식과 값, 단계형 조작만 남기고 나머지는 아래 설명으로 재배치합니다.

184×224 · adaptive.profiles=smartwatch

zoom-reflow
reduced-effects
coarse-touch
low-resource
cutout-round
shape-round
display-color
input-coarse
motion-reduced
renderer-canvas-spatial
viewport-tiny

e북·전자종이

낮은 갱신률과 잔상 가능성을 고려해 정적 상태, 높은 명암과 데이터 표를 우선합니다.

758×1024 · adaptive.profiles=ebook-paper

print-paged
reduced-effects
low-resource
shape-paged
display-e-ink
input-keyboard
motion-static
renderer-canvas-spatial

흑백 화면

색만으로 계열을 구분하지 않고 선, 표식, 패턴, 라벨과 표를 함께 사용합니다.

640×400 · adaptive.profiles=monochrome

reduced-effects
shape-rectangle
display-monochrome
input-fine
motion-reduced
renderer-canvas-spatial

도트 화면

낮은 해상도에서는 표식 수와 장식을 줄이고 굵은 선, 정수 라벨과 단계형 확대를 사용합니다.

320×240 · adaptive.profiles=dot-matrix

zoom-reflow
reduced-effects
keyboard-switch
low-resource
shape-rectangle
display-grid
input-keyboard
motion-static
renderer-canvas-spatial
viewport-tiny

400% 확대·리플로우

320 CSS px 등가 폭에서 본문은 한 축으로 재배치하고 차트만 자체 확대·이동을 허용합니다.

320×480 · adaptive.profiles=zoom-reflow

zoom-reflow
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

폴더블·이중 화면

힌지와 화면 분할 영역을 가로지르지 않도록 차트와 설명을 독립 세그먼트로 재배치합니다.

720×640 · adaptive.profiles=foldable-dual

foldable-dual
shape-dual
display-color
input-fine
motion-full
renderer-canvas-spatial

TV·리모컨

호버가 없는 원거리 화면에서 큰 초점 표시와 방향키, Enter, Escape 조작을 제공합니다.

1920×1080 · adaptive.profiles=tv-remote

tv-remote
shape-rectangle
display-color
input-remote
motion-full
renderer-canvas-spatial

인쇄·페이지 매체

조작부 대신 정적 차트, 설명과 표를 함께 배치하고 페이지 중간 분할을 피합니다.

794×1123 · adaptive.profiles=print-paged

print-paged
shape-paged
display-color
input-fine
motion-static
renderer-canvas-spatial

강제 색상

시스템 색과 테두리를 존중하고 패턴, 표식과 텍스트를 중복 단서로 유지합니다.

640×400 · adaptive.profiles=forced-colors

forced-colors
shape-rectangle
display-high-contrast
input-fine
motion-full
renderer-canvas-spatial

동작·효과 최소화

전환을 즉시 끝내고 불투명 배경과 지연 로드를 사용해 움직임과 투명도 부담을 줄입니다.

640×400 · adaptive.profiles=reduced-effects

reduced-effects
shape-rectangle
display-color
input-fine
motion-reduced
renderer-canvas-spatial

거친 터치 입력

호버 없이 탭으로 값을 확인하고 실제 조작 대상은 44px 이상, 확대·축소는 명시 버튼으로 제공합니다.

390×844 · adaptive.profiles=coarse-touch

coarse-touch
shape-rectangle
display-color
input-coarse
motion-full
renderer-canvas-spatial

키보드·스위치 입력

드래그 전용 기능 없이 Tab, 방향키, Enter, Space, Escape로 모든 조작에 도달합니다.

640×400 · adaptive.profiles=keyboard-switch

keyboard-switch
shape-rectangle
display-color
input-keyboard
motion-full
renderer-canvas-spatial

저사양·느린 네트워크

적은 메모리와 느린 연결에서는 점진 렌더링, 샘플링, 취소 가능한 작업과 정적 대체를 우선합니다.

640×400 · adaptive.profiles=low-resource

low-resource
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

RTL 문서

본문과 탭은 RTL 논리 방향을 따르되 축, 코드와 데이터 식별자는 기술적 LTR 순서를 유지합니다.

640×400 · adaptive.profiles=rtl

rtl
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

세로쓰기

세로쓰기 설명은 재배치하되 차트와 기술 표면은 독립적인 가로 패널로 유지합니다.

640×400 · adaptive.profiles=vertical-writing

vertical-writing
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

초광폭·프로젝션

차트를 무한히 늘이지 않고 읽기 가능한 최대 폭, 패널 분할과 큰 라벨을 사용합니다.

1920×720 · adaptive.profiles=ultrawide-projection

ultrawide-projection
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

화면낭독기·점자 출력

짧고 긴 설명, 의미 있는 표와 상태를 제공해 Canvas나 색을 정보의 유일한 경로로 만들지 않습니다.

640×400 · adaptive.profiles=screenreader-braille

screenreader-braille
shape-nonvisual
display-color
input-nonvisual
motion-full
renderer-canvas-spatial

JavaScript 없음

스크립트가 꺼져도 검증된 정적 미리보기, 설명과 접힌 행 데이터 표가 핵심 정보를 보존합니다.

640×400 · adaptive.profiles=no-script

no-script
shape-nonvisual
display-color
input-fine
motion-static
renderer-static-fallback

XR·투명 디스플레이

XR 전용 API가 없어도 일반 2D 또는 WebGL 패널로 안전하게 돌아가며 깊이 단서를 텍스트와 표로 중복합니다.

640×400 · adaptive.profiles=spatial-xr

spatial-xr
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

노치·원형 화면

safe-area와 원형 경계를 피해 제목, 표식, 조작부가 잘리지 않게 안쪽으로 재배치합니다.

184×224 · adaptive.profiles=cutout-round

cutout-round
shape-round
display-color
input-fine
motion-full
renderer-canvas-spatial
viewport-tiny

가상 키보드·축소 뷰포트

가상 키보드가 화면을 줄여도 초점 조작, 차트와 현재 설명이 가려지지 않게 다시 배치합니다.

390×560 · adaptive.profiles=virtual-keyboard

virtual-keyboard
shape-rectangle
display-color
input-fine
motion-full
renderer-canvas-spatial

극단 환경 미리보기

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

상태불러오는 중

adaptive
capability-driven
no-user-agent-branching

범례: legend · categories · category
포인트·범위 하이라이트: highlights[] · datum · category
설명 말풍선: annotations[] · datum · category · callout · placement:auto
대화형 선택: selection · multiple · toggle

Graflume.itemChart() Canvas 2D

조작 도움말

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

불러오는 중

극단 환경 미리보기 · 행 데이터
`category`ordinal	`value`quantitative
Organic search	38
Direct	27
Product referrals	18
Community	11
Campaigns	6

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

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

브라우저 API

Graflume.itemChart()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "One hundred marks translate acquisition share into an immediate countable view. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Item chart: One hundred marks translate acquisition share into an immediate countable view"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      },
      "text": "포인트·범위 하이라이트 · Product referrals"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      }
    }
  ],
  "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": "category",
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart",
      "trigger": "mark"
    }
  },
  "legend": {
    "field": "category",
    "interactive": true,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "범주",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "One hundred marks translate acquisition share into an immediate countable view",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "One hundred marks translate acquisition share into an immediate countable view. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Item chart: One hundred marks translate acquisition share into an immediate countable view"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      },
      "text": "포인트·범위 하이라이트 · Product referrals"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Product referrals"
      }
    }
  ],
  "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": "category",
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "범주"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Item chart",
      "trigger": "mark"
    }
  },
  "legend": {
    "field": "category",
    "interactive": true,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "범주",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "One hundred marks translate acquisition share into an immediate countable view",
    "text": "Item chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

Catalog

Modes · compatibility identifiers

The source-controlled catalog maps callable modes in this family and compatibility identifiers to their canonical modes. This table contains executable entries only.

Mode / compatibility ID search

1 modes · 1 compatibility identifiers

Item chart · supported modes · representative `item`
ID	Name	Quick API	mode	mark	renderer
`item`	Item chart	`itemChart()`	`default`	`item`	`canvas`

Item chart · compatibility identifiers
Identifier	Canonical mode ID
`item`	`item`

ChartSpec · SpatialSpec

범례와 강조

계열을 구분하고 특정 데이터나 범위를 강조하며, 원하는 위치에 설명 말풍선을 놓고 독자가 표식을 선택하게 할 수 있습니다.

범례: 색·선·기호가 나타내는 계열과 척도를 차트 안에서 바로 설명합니다.
포인트·범위 하이라이트: 데이터 한 점, 값 집합, 축 구간 또는 차트 영역을 원본 값을 바꾸지 않고 강조합니다.
설명 말풍선: 데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다. 자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.
대화형 선택: 표식을 클릭해 선택하고 Escape로 해제하며 선택 상태와 이벤트를 애플리케이션에서 이용합니다.

매뉴얼

통합 체크리스트

ARIA · table fallback

접근성

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

standard · large · ultra

성능

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

차트 카탈로그