시각화
시각화 (Visualization)
시각 언어(visual language)는 중간 디자인 언어인 Ant Design에서 파생된 데이터 시각화 특성을 가진 일련의 디자인 지침에 기반해요. 데이터 표현을 사용자 심리에 더 부합하게 만들어, "디자이너"가 더 많은 비즈니스 특성을 가진 시각 솔루션을 구체화해 개별화된 디자인 요구를 충족하도록 돕고, 불필요한 디자인 차이와 구현 비용을 차단해 "디자이너"와 프런트엔드 R&D 리소스를 해방하며, 데이터 차트 개발 효율의 전면적 향상을 이룹니다.
출처: 문서
본문
또한 이 문서는 계속 갱신되는 디자인 문서예요. 여러분의 읽음과 피드백이 우리가 계속 나아가게 하는 원동력이에요. 여기가 우리의 GitHub 피드백 url이에요.
디자인 리소스 (Design Resources)
포괄적인 디자인 원칙·지침과 디자인 리소스 파일(Sketch), 그리고 완전한 그래픽 사용 노트를 제공해 사용자가 차트를 빠르게 이해하고 고품질의 시각화 차트를 설계하도록 도와요.
프런트엔드 구현 (Front end implementation)
네이티브 JavaScript 기반의 AntV 컴포넌트 라이브러리 세트를 캡슐화했어요. 여기에는 높은 상호작용의 기본 차트 라이브러리 G2Plot, 프로세스와 관계 분석에 초점을 맞춘 차트 라이브러리 G6, 모바일 애플리케이션용 차트 라이브러리 F2, 그리고 커뮤니티의 다른 프레임워크가 포함돼요.
- G2: Grammar of Graphics
- G2Plot: a charting library 🔥
- G6: Graph Visualization Framework
- F2: Mobile Charts
- L7: Geospatial Visualization Analysis
- React AntV
디자인하는 방법 (How to Design)
사용자 이해하기 (Understanding the users)
사용자는 누구인가? 그들은 시각화에서 어떤 정보를 얻고 싶어 하는가? 엔터프라이즈 제품에서 사용자는 회사 임원, BI 분석가, 운영, 데이터 개발자 등 서로 다른 역할일 수 있어요. 다른 역할은 다른 목적과 다른 방식으로 시각화를 사용할 수 있어요. 디자인을 시작하기 전에 사용자를 충분히 프로파일링해 데이터 스토리를 완전히 전하고 데이터 인사이트를 정확히 제시할 것을 권장해요.
디자인 원칙 (Design Principles)
- 정확성(Accuracy): 데이터를 왜곡, 오도, 누락하지 않고 데이터에 포함된 정보를 충실히 반영하는 시각 표현으로 변환하는 것.
- 효과성(Effective): 정보를 집중되고 절제되며 중복 없이 전달하고, 정보 과부하를 피하며, 가장 적절한 양의 Data-ink Ratio(Data-ink Ratio)를 사용해 사용자에게 가장 유용한 정보를 표현하는 것.
- 명확성(Clarity): 제시가 명확하고 읽기 쉬우며 조직화되어 있어, 사용자가 빠르게 목표에 도달하고 최소한의 시간에 더 많은 정보를 얻도록 돕는 것.
- 미학(Aesthetics): 데이터를 완벽하게 표현하고 시각 요소를 합리적으로 사용해 예술적 창작을 하되 과도한 수정 없이 사용자에게 우아한 경험을 주는 것.
차트 사용법 (Chart usage)
올바른 차트 유형 선택 (Choosing the right chart type)
차트 유형을 더 현명하게 선택하도록 돕는 완전한 차트 사용법 설명을 제공해요.
시계열 (Time series)
대표 유형: 선 그래프(line graphs), 면적 그래프(area graphs) 등.
시간 차원에서 데이터의 추세와 변화를 보여 주는 데 주로 사용돼요.
비교 (Comparison)
대표 유형: 막대 차트(bar charts), 거품 차트(bubble charts) 등.
그래프의 길이, 너비, 위치, 면적, 각도, 색상을 사용해 값의 크기를 비교하며, 서로 다른 분류 사이의 값 비교를 보여 주는 데 자주 사용돼요.
분포 (Distribution)
대표 유형: 산점도(Scatterplot), 상자 그림(box plot) 등.
연속 데이터에서 값의 분포를 보여 주는 데 주로 사용돼요.
프로세스 (Process)
대표 유형: 깔때기 차트(funnel charts) 등.
프로세스 흐름, 흐름 관계를 표현하는 데 주로 사용돼요.
비율 (Proportion)
대표 유형: 링 차트(ring charts), 파이 차트(pie charts), 백분율 누적형 차트 등.
같은 차원에서의 백분율 관계를 보여 줘요.
더 많은 차트 사용법은 AntV Chart usage로 이동하세요.
컬러 견본 (Colour Swatches)
AntV는 기본 차트 색상 세트를 제공하며, 색상 사용법도 포함해요. 더 많은 컬러 견본은 AntV - Design language - Vision로 이동하세요.
컴포넌트 사용 권장사항 (Component Usage Recommendations)
제목과 주석 (Title and Notes)
제목은 차트의 주제를 설명하는 문단이고, 주석은 데이터의 출처를 나타내며 차트가 명확하고 신뢰할 수 있는 출처에서 온 것처럼 보이게 해요.
축 (Axle)
좌표계에서 방향과 값의 측면으로 데이터 간의 매핑 관계를 정의하는 데 사용돼요.
범례 (Legend)
차트 영역에 포함된 모든 시각 요소의 의미를 설명하는 데 사용돼요.
라벨 (Labels)
현재 데이터 세트에 대한 콘텐츠 주석이에요.
알림 메시지 (Alerts Message)
마우스를 차트 위에 올리거나 모바일 기기에서 손가락으로 데이터 포인트를 클릭하면, 그 지점의 데이터(지점의 값, 데이터 단위 등)가 상호작용 프롬프트 형태로 표시되는 것을 의미해요.
그래픽 (Graphics)
그래프는 통계 차트의 시각 채널이 모양 위에 매핑된 시각적 표현으로, 차트의 주요 부분이에요. 다른 차트 컴포넌트들은 독자가 그래프에 매핑된 데이터 관계를 더 잘 이해하도록 돕기 위한 것이에요.
컴포넌트 사용에 대한 제안은 AntV - Design language - Component Design Guidelines로 이동하세요.
차트 레이아웃 적응 (Chart layout adaptation)
데이터 시각화는 항상 방대한 데이터 양과 제한된 화면 공간 사이의 충돌에 직면해요. 콘텐츠를 서로 다른 단말과 화면 크기에 적응시키고, 제한된 공간에서 사용자가 더 빨리 정보를 이해하고 인사이트를 분석하도록 돕는 문제를 해결하는 것이 우리가 연구해 온 문제예요.
Ant Design의 시각화 시스템에서는 전체 차트부터 차트 내부의 원자 컴포넌트까지, 모든 차트에 적용되는 레이아웃 적응 시스템을 정리해 전량 차트를 위한 일련의 레이아웃 적응 규칙을 개발했어요. 오른쪽의 움직이는 이미지를 예로 들면, 가로 축의 축 라벨이 특정 치수를 따라 회전해요. 더 많은 콘텐츠가 곧 공개될 예정이니, 계속 지켜봐 주세요.
상호작용 (Interaction)
전통적인 데이터 보고서의 비교적 정적인 표현과 달리, 상호작용 차트는 정보 표시 수준에 머물지 않아요. 사용자는 차트와 계속 상호작용하여 데이터에서 더 깊은 분석과 정보를 얻어요.
데이터 시각화에서 상호작용 동작을 사용자의 의식 수준과 각 수준에 대응하는 목표에 따라 "데이터 획득(data acquisition)", "정보 처리(information processing)", "지식 흐름(knowledge flow)" 세 개 층으로 나눠요. 이는 시각 정보 검색의 "개요 먼저(overview first), 필터링에 집중(focus on filtering), 필요에 따라 상세 보기(view the details as needed)"라는 좌우명과도 맞아요. 또 인간이 정보를 찾는 기본 논리, 즉 먼저 일반적으로, 그다음 부분적으로, 마지막으로 관심 지점에 집중해 탐구하는 표면에서 내부로 들어가는 과정과도 일치해요.
더 많은 상호작용 차트는 AntV - Design language - Interaction로 이동하세요.