Graflume · Alpha
Word cloud · 극단 사례 적용
단어 가중치를 글자 크기로 바꾸고 결정적인 나선 배치에 놓습니다. 성공할 수 있는 유효 데이터 안에서 수치 범위, 희소 구조와 대용량 입력을 검증합니다. 각 탭은 필요할 때만 데이터를 만들며 잘못된 값은 조용히 보정하지 않습니다.
차트 계열 · 전문 차트 계열
Word cloud
단어 가중치를 글자 크기로 바꾸고 결정적인 나선 배치에 놓습니다.
- Quick API
wordCloud()- 브라우저 스냅샷
graflume/complete- mark
word-cloud- 프리셋
- 1
극단 사례
값의 범위·불규칙 구조·대용량 입력
성공할 수 있는 유효 데이터 안에서 수치 범위, 희소 구조와 대용량 입력을 검증합니다. 각 탭은 필요할 때만 데이터를 만들며 잘못된 값은 조용히 보정하지 않습니다.
큰 값·작은 값
0과 매우 작은 유한값부터 매우 큰 유한값까지 함께 넣어 자동 도메인, 정밀도와 기하가 무너지지 않는지 확인합니다. NaN과 Infinity는 의도적으로 거부됩니다. 유한값과 축 도메인을 보존하는 데이터 무결성 규칙 2개를 적용합니다.
상태불러오는 중
extreme-rangeextreme-smallextreme-largezerobudget:marks<=6
불러오는 중
큰 값·작은 값 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
wordordinal | weightquantitative |
|---|---|
| Visualization | 1e-09 |
| Statistics | 0 |
| Interaction | 1e+12 |
| Accessibility | 1 |
| Canvas | 1e+06 |
| Spatial | 1e-06 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.wordCloud()
const data = [
{
"weight": 1e-9,
"word": "Visualization"
},
{
"weight": 0,
"word": "Statistics"
},
{
"weight": 1000000000000,
"word": "Interaction"
},
{
"weight": 1,
"word": "Accessibility"
},
{
"weight": 1000000,
"word": "Canvas"
},
{
"weight": 0.000001,
"word": "Spatial"
}
];
const options = {
"accessibility": {
"description": "Visualization topics are ranked with stable, meaningful vocabulary. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
"label": "Word cloud"
},
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"title": {
"subtitle": "edge case · range",
"text": "Word cloud"
},
"width": "container",
"x": {
"field": "word",
"title": "Topic",
"type": "ordinal"
},
"y": {
"field": "weight",
"title": "Mentions",
"type": "quantitative"
}
};
Graflume.wordCloud('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"accessibility": {
"description": "Visualization topics are ranked with stable, meaningful vocabulary. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
"label": "Word cloud"
},
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"title": {
"subtitle": "edge case · range",
"text": "Word cloud"
},
"width": "container",
"x": {
"field": "word",
"title": "Topic",
"type": "ordinal"
},
"y": {
"field": "weight",
"title": "Mentions",
"type": "quantitative"
}
}희소·불규칙 구조
중복, 결측, 희소성, 순서 뒤바뀜 중 이 계열에서 의미가 정의된 구조만 실행합니다. 잘못된 참조나 깨진 튜플을 성공 예제로 위장하지 않습니다. 결측·중복·순서의 의미를 보존하는 구조 규칙 3개를 적용합니다.
상태불러오는 중
irregular-structureduplicate-keynulllong-labelmultilingualbudget:marks<=7
불러오는 중
희소·불규칙 구조 · 행 데이터
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
wordordinal | weightquantitative |
|---|---|
| Visualization | 100 |
| Statistics | — |
| Visualization | 100 |
| Interaction | 81 |
| Accessibility | 76 |
| Canvas | 70 |
| Spatial | 65 |
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.wordCloud()
const data = [
{
"weight": 100,
"word": "Visualization"
},
{
"weight": null,
"word": "Statistics"
},
{
"weight": 100,
"word": "Visualization"
},
{
"weight": 81,
"word": "Interaction"
},
{
"weight": 76,
"word": "Accessibility"
},
{
"weight": 70,
"word": "Canvas"
},
{
"weight": 65,
"word": "Spatial"
}
];
const options = {
"accessibility": {
"description": "Visualization topics are ranked with stable, meaningful vocabulary. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
"label": "Word cloud · 희소·불규칙 구조"
},
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"title": {
"subtitle": "edge case · structure",
"text": "Word cloud · 희소·불규칙 구조"
},
"width": "container",
"x": {
"field": "word",
"title": "Topic",
"type": "ordinal"
},
"y": {
"field": "weight",
"title": "Mentions",
"type": "quantitative"
}
};
Graflume.wordCloud('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"accessibility": {
"description": "Visualization topics are ranked with stable, meaningful vocabulary. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
"label": "Word cloud · 희소·불규칙 구조"
},
"axes": {
"x": false,
"y": false
},
"height": 620,
"locale": "ko",
"title": {
"subtitle": "edge case · structure",
"text": "Word cloud · 희소·불규칙 구조"
},
"width": "container",
"x": {
"field": "word",
"title": "Topic",
"type": "ordinal"
},
"y": {
"field": "weight",
"title": "Mentions",
"type": "quantitative"
}
}대용량 데이터
결정적인 압축 레시피를 탭을 열 때만 생성합니다. Graflume의 성능 프로필이 입력량에 맞춰 표식 수, 적중 검사와 애니메이션 비용을 제한합니다. 결정적 생성과 출력 제한을 보장하는 대용량 규칙 6개를 적용합니다. 이 계열은 논리 입력 60,000 이벤트를 생성하고 막대 표식 출력을 최대 5,000개로 제한합니다.
상태불러오는 중
high-row-cardinalityall-input-rows-generatedall-input-rows-processeddeterministic-generationbounded-renderinginput:60000zoom-pan-resetbudget:bar-marks<=5000
- 범례:
legend · categories · word - 포인트·범위 하이라이트:
highlights[] · datum · word - 설명 말풍선:
annotations[] · datum · word · callout · placement:auto
불러오는 중
브라우저 API · 이식 가능한 스키마
브라우저 API
Graflume.wordCloud()
const recipe = {
"cardinality": {
"axes": {},
"sourceRows": 60000,
"unit": "events"
},
"expectedInvariants": [
"finite-json",
"word-weight-nonnegative"
],
"id": "text-corpus",
"initialView": {
"kind": "domain",
"zoom": 1
},
"outputBudget": {
"maximum": 5000,
"resource": "bar-marks"
},
"parameters": {
"explicitPerformance": true,
"family": "word-cloud",
"nullableFields": [
"weight"
],
"positiveFields": [],
"scenario": "volume",
"valueFields": [
"weight"
],
"valuePolicy": "nonnegative"
},
"preview": {
"maximumRows": 12,
"method": "top-groups"
},
"reduction": {
"method": "term-frequency-top-k",
"stage": "pre-aggregate"
},
"seed": 2264225547,
"shape": "rows",
"version": 2
};
const { data, previewRows, plan } = Graflume.materializeDemoRecipe(recipe);
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Word cloud · 대용량 데이터"
},
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "word",
"type": "datum",
"value": "insight"
},
"text": "포인트·범위 하이라이트 · insight"
}
],
"axes": {
"x": false,
"y": false
},
"create": {
"adaptive": {
"environment": {
"rowCount": 60000
},
"largeDataNavigation": true,
"profiles": "auto"
}
},
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "word",
"type": "datum",
"value": "insight"
}
}
],
"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": "word",
"format": "auto",
"label": "단어"
},
{
"field": "weight",
"format": "number",
"label": "가중치"
}
],
"title": "Word cloud · 대용량 데이터",
"trigger": "mark"
}
},
"legend": {
"field": "word",
"interactive": true,
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "categories",
"orientation": "horizontal",
"position": "bottom",
"title": "단어",
"visible": true
},
"locale": "ko",
"padding": {
"top": 52
},
"performance": "ultra",
"theme": "graflume-light",
"title": {
"subtitle": "Visualization topics are ranked with stable, meaningful vocabulary · 60,000 logical rows, screen-aware detail",
"text": "Word cloud · 대용량 데이터"
},
"width": "container",
"x": {
"field": "word",
"title": "Topic",
"type": "ordinal"
},
"y": {
"field": "weight",
"title": "Mentions",
"type": "quantitative"
}
};
Graflume.wordCloud('#chart', data, options);이식 가능한 스키마
ChartSpec 0.1 · options
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Word cloud · 대용량 데이터"
},
"annotations": [
{
"connector": {
"visible": true
},
"detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
"id": "manual-callout",
"placement": "auto",
"style": {
"maxWidth": 220,
"padding": 8
},
"target": {
"field": "word",
"type": "datum",
"value": "insight"
},
"text": "포인트·범위 하이라이트 · insight"
}
],
"axes": {
"x": false,
"y": false
},
"create": {
"adaptive": {
"environment": {
"rowCount": 60000
},
"largeDataNavigation": true,
"profiles": "auto"
}
},
"height": 620,
"highlights": [
{
"id": "manual-focus",
"padding": 7,
"target": {
"field": "word",
"type": "datum",
"value": "insight"
}
}
],
"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": "word",
"format": "auto",
"label": "단어"
},
{
"field": "weight",
"format": "number",
"label": "가중치"
}
],
"title": "Word cloud · 대용량 데이터",
"trigger": "mark"
}
},
"legend": {
"field": "word",
"interactive": true,
"labels": {
"hide": "숨기기",
"show": "표시"
},
"maxItems": 8,
"mode": "categories",
"orientation": "horizontal",
"position": "bottom",
"title": "단어",
"visible": true
},
"locale": "ko",
"padding": {
"top": 52
},
"performance": "ultra",
"theme": "graflume-light",
"title": {
"subtitle": "Visualization topics are ranked with stable, meaningful vocabulary · 60,000 logical rows, screen-aware detail",
"text": "Word cloud · 대용량 데이터"
},
"width": "container",
"x": {
"field": "word",
"title": "Topic",
"type": "ordinal"
},
"y": {
"field": "weight",
"title": "Mentions",
"type": "quantitative"
}
}