Funnel

Funnel chart

Funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: length funnel · neck configuration.

상태불러오는 중

funnel
length funnel
neck configuration

Graflume.funnel() Canvas 2D

조작 도움말

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

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

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

불러오는 중

Funnel chart · 행 데이터
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: length funnel · neck configuration.

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

브라우저 API

Graflume.funnel()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel 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": "Funnel",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "mode": "default"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: length funnel · neck configuration.",
    "text": "Funnel"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel 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": "Funnel",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "mode": "default"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: length funnel · neck configuration.",
    "text": "Funnel"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Funnel area chart

Funnel area chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: area-proportional funnel · outside label solver.

상태불러오는 중

funnel-area
area-proportional funnel
outside label solver

Graflume.funnelArea() Canvas 2D

조작 도움말

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

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

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

불러오는 중

Funnel area chart · 행 데이터
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Funnel area chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: area-proportional funnel · outside label solver.

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

브라우저 API

Graflume.funnelArea()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Funnel area 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": "Funnel · Funnel area chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "mode": "area"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel area chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: area-proportional funnel · outside label solver.",
    "text": "Funnel · Funnel area chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Funnel area 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": "Funnel · Funnel area chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "mode": "area"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel area chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: area-proportional funnel · outside label solver.",
    "text": "Funnel · Funnel area chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Depth funnel chart

Depth funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: pyramid and depth-styled variants.

상태불러오는 중

funnel-3d
pyramid and depth-styled variants

Graflume.funnel3d() Canvas 2D

조작 도움말

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

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

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

불러오는 중

Depth funnel chart · 행 데이터
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Depth funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: pyramid and depth-styled variants.

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

브라우저 API

Graflume.funnel3d()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Depth funnel 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": "Funnel · Depth funnel chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "variant": "funnel-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: pyramid and depth-styled variants.",
    "text": "Funnel · Depth funnel chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Depth funnel 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": "Funnel · Depth funnel chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "variant": "funnel-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth funnel chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: pyramid and depth-styled variants.",
    "text": "Funnel · Depth funnel chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Pyramid chart

Pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: sorting and value labels.

상태불러오는 중

pyramid
sorting and value labels

Graflume.pyramid() Canvas 2D

조작 도움말

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

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

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

불러오는 중

Pyramid chart · 행 데이터
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: sorting and value labels.

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

브라우저 API

Graflume.pyramid()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Pyramid 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": "Funnel · Pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "variant": "pyramid"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: sorting and value labels.",
    "text": "Funnel · Pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Pyramid 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": "Funnel · Pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "variant": "pyramid"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: sorting and value labels.",
    "text": "Funnel · Pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Depth pyramid chart

Depth pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: conversion/dropoff/cumulative semantics.

상태불러오는 중

pyramid-3d
conversion/dropoff/cumulative semantics

Graflume.pyramid3d() Canvas 2D

조작 도움말

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

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

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

불러오는 중

Depth pyramid chart · 행 데이터
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Depth pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: conversion/dropoff/cumulative semantics.

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

브라우저 API

Graflume.pyramid3d()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Depth pyramid 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": "Funnel · Depth pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "variant": "pyramid-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: conversion/dropoff/cumulative semantics.",
    "text": "Funnel · Depth pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Funnel · Depth pyramid 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": "Funnel · Depth pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "mark": {
    "options": {
      "variant": "pyramid-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth pyramid chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: conversion/dropoff/cumulative semantics.",
    "text": "Funnel · Depth pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Funnel · 차트 고유 기능

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

Funnel chart

Funnel chart · 행 데이터

Graflume.funnel()

ChartSpec 0.1 · options

Funnel area chart

Funnel area chart · 행 데이터

Graflume.funnelArea()

ChartSpec 0.1 · options

Depth funnel chart

Depth funnel chart · 행 데이터

Graflume.funnel3d()

ChartSpec 0.1 · options

Pyramid chart

Pyramid chart · 행 데이터

Graflume.pyramid()

ChartSpec 0.1 · options

Depth pyramid chart

Depth pyramid chart · 행 데이터

Graflume.pyramid3d()

ChartSpec 0.1 · options

Modes · compatibility identifiers

통합 체크리스트

접근성

성능

ID	Name	Quick API	mode	mark	renderer
`funnel`	Funnel chart	`funnel()`	`default`	`funnel`	`canvas`
`funnel-area`	Funnel area chart	`funnelArea()`	`area`	`funnel`	`canvas`
`funnel-3d`	Depth funnel chart	`funnel3d()`	`funnel-3d`	`pyramid`	`canvas`
`pyramid`	Pyramid chart	`pyramid()`	`pyramid`	`pyramid`	`canvas`
`pyramid-3d`	Depth pyramid chart	`pyramid3d()`	`pyramid-3d`	`pyramid`	`canvas`

Identifier	Canonical mode ID
`funnel`	`funnel`
`funnel3d`	`funnel-3d`
`pyramid`	`pyramid`
`pyramid3d`	`pyramid-3d`