Skip to main content

Agent Skills - Phần 14: Chart Selection Guide

Tóm tắt

Tài liệu hướng dẫn chọn loại biểu đồ phù hợp cho từng dạng dữ liệu (line, bar, pie, heatmap, map, funnel, gauge, treemap, network...), kèm gợi ý về màu sắc, hiệu năng, accessibility và thư viện phù hợp (Recharts, Chart.js, D3.js, ApexCharts, Plotly). Mỗi loại chart được mô tả về use case, data type phù hợp và best practices. Nội dung dựa trên charts.csv từ ui-ux-pro-max-skill, giúp developers và designers chọn visualization phù hợp cho dashboards và data-driven applications.

Tài liệu này giúp chọn loại biểu đồ phù hợp cho từng dạng dữ liệu, kèm:

  • Best chart type + lựa chọn phụ.
  • Gợi ý màu sắc, hiệu năng, accessibility.
  • Gợi ý thư viện: Recharts, Chart.js, D3.js, ApexCharts, Plotly, v.v.

Nguồn: charts.csv từ ui-ux-pro-max-skill.

1. Thời gian, trend & phân bố​

1.1 Trend over time (time-series)​

  • Keywords: trend, time-series, growth, timeline.
  • Best chart: Line Chart
    Secondary: Area / Smooth area.
  • Màu: Primary #0080FF ; đa series → màu khác nhau; fill 20% opacity.
  • Hiệu năng: ⚡ Excellent.
  • Accessibility: Đảm bảo pattern/marker khác nhau; legend rõ.
  • Thư viện: Chart.js, Recharts, ApexCharts.
  • Interactive: Hover + zoom.

1.2 Distribution / Statistical​

  • Keywords: distribution, box, stats.
  • Best chart: Box Plot
    Secondary: Violin, Beeswarm.
  • Màu: Box #BBDEFB , border #1976D2 , median #D32F2F , outlier #F44336 .
  • Accessibility: Luôn kèm bảng thống kê (min, Q1, median, Q3, max).

1.3 Correlation / Scatter / Bubble​

  • Keywords: correlation, relationship, scatter, distribution.
  • Best chart: Scatter Plot / Bubble Chart
    Secondary: Heatmap / Matrix.
  • Màu: Gradient blue→red; size theo giá trị; opacity 0.6–0.8.
  • Gợi ý: Nên cung cấp table alternative; region zoom/brush khi nhiều điểm.

2. So sánh & tỷ lệ​

2.1 Compare categories​

  • Keywords: categories, bar, ranking.
  • Best chart: Bar Chart (ngang/dọc)
    Secondary: Column, Grouped bar.
  • Màu: Mỗi category màu khác; sort descending; hiển thị value trên bar.

2.2 Part-to-whole (phần trăm)​

  • Keywords: part-to-whole, proportion, share.
  • Best chart: Pie / Donut
    Secondary: Stacked bar, Treemap.
  • Màu: Tối đa 5–6 slice; palette tương phản.
  • Note: Accessibility không tốt khi > 5; cân nhắc stacked bar thay pie.

2.3 Proportional / Waffle​

  • Keywords: proportional, percentage, waffle.
  • Best chart: Waffle Chart
    Secondary: Pictogram, 100% stacked bar.
  • Màu: Grid 10x10; 3–5 category; spacing 2–3px.
  • Ưu điểm: Dễ đọc hơn pie, tốt cho accessibility hơn.

2.4 Multi-variable comparison​

  • Keywords: multi-variable, radar, spider.
  • Best chart: Radar / Spider Chart
    Secondary: Parallel coordinates, grouped bar.
  • Note: Giới hạn 5–8 axis; luôn kèm bảng.

3. Heatmap, geo & intensity​

3.1 Heatmap / Intensity​

  • Keywords: heatmap, intensity, matrix.
  • Best chart: Heat Map / Choropleth
    Secondary: Grid heat, bubble heat.
  • Màu: Gradient cool (blue) → hot (red); divergent cho ±.
  • Accessibility: Cung cấp legend + pattern overlay cho colorblind.

3.2 Geographic data​

  • Keywords: map, geo, location.
  • Best chart: Choropleth map / Bubble map.
    Secondary: Geo heat.
  • Gợi ý: Text label + table alternative; pan/zoom + drilldown.
  • Lib: D3, Mapbox, Leaflet.

4. Funnel, flow & process​

4.1 Funnel / Flow (conversion)​

  • Keywords: funnel, flow.
  • Best chart: Funnel chart / Sankey
    Secondary: Waterfall cho flow đơn giản.
  • Màu: Gradient qua stages; hiển thị % conversion.
  • Best use: Funnel signup, checkout, sales pipeline.

4.2 Flow / Process data​

  • Keywords: process, log, path.
  • Best chart: Sankey Diagram
    Secondary: Alluvial, chord.
  • Màu: Gradient source→target; opacity 0.4–0.6.
  • Accessibility: Graph phức tạp → cần path summary / bảng.

4.3 Process mining​

  • Keywords: process mining, variants, bottleneck.
  • Best chart: Process map / graph
    Secondary: DAG, Petri net.
  • Màu: Happy path xanh (#10B981 ), deviation cam (#F59E0B ), bottleneck đỏ (#EF4444 ).

5. KPI, target & forecast​

5.1 Performance vs Target (Gauge / Bullet)​

  • Keywords: performance vs target, gauge, bullet.
  • Best chart: Gauge hoặc Bullet chart (compact).
    Secondary: Progress bar.
  • Màu: Dải màu (red/yellow/green); target line màu đen.
  • Note: Luôn hiển thị giá trị numeric + % cạnh gauge.

5.2 Time-series forecast​

  • Keywords: forecast, prediction.
  • Best chart: Line với confidence band.
    Secondary: Ribbon chart.
  • Màu: Actual: solid #0080FF ; forecast: dashed #FF9500 ; band: shading nhẹ.

5.3 Anomaly detection​

  • Keywords: anomaly, outlier, alerts.
  • Best chart: Line chart với highlight.
    Secondary: Scatter với marker đỏ.
  • Màu: Normal xanh; anomaly đỏ (#FF0000 ) với marker rõ + annotation.

5.4 Compact bullet (dashboard)​

  • Keywords: compact performance.
  • Best chart: Bullet chart (dải màu + marker).
  • Ưu điểm: Rất tiết kiệm diện tích, phù hợp dashboard executive.

6. Hierarchy, network & root cause​

6.1 Hierarchical / Nested data​

  • Keywords: hierarchical, nested.
  • Best chart: Treemap.
    Secondary: Sunburst, Nested donut, Icicle.
  • Màu: Parent màu đậm; child nhạt hơn 15–20%; border trắng 2–3px.
  • Note: Khó đọc → luôn có view bảng/hierarchy song song.

6.2 Hierarchical proportional / Sunburst​

  • Keywords: hierarchical proportional, sunburst.
  • Best chart: Sunburst chart.
    Secondary: Treemap, circle packing.
  • Màu: Từ center ra ngoài: đậm → nhạt dần.

6.3 Relationship / Network graph​

  • Keywords: relationship, network, graph.
  • Best chart: Network graph.
    Secondary: Tree, adjacency matrix.
  • Màu: Node theo category; edge #90A4AE opacity ~60%.
  • Cảnh báo: ❌ Rất nặng & khó đọc khi > 500 nodes → nên có adjacency list/table.

6.4 Root cause analysis (Decomposition Tree)​

  • Keywords: root cause, decomposition tree.
  • Best chart: Decomposition tree.
    Màu: Node primary #2563EB , node negative #EF4444 ; connector grey.
  • Accessibility: Hỗ trợ keyboard navigation cho node.

7. 3D, real-time & advanced viz​

7.1 3D Spatial Data​

  • Keywords: 3d, spatial, terrain, molecular.
  • Best chart: 3D scatter / surface.
    Secondary: Point cloud, volumetric.
  • Màu: Z-axis = gradient cool→warm; dùng lighting/shading cho depth.
  • Cảnh báo: ❌ WebGL nặng; luôn cung cấp 2D hoặc table alternative.

7.2 Real-time streaming​

  • Keywords: streaming, ticker, live.
  • Best chart: Streaming area chart.
    Secondary: Ticker tape, moving gauge.
  • Màu: Current: bright pulse #00FF00 ; history: fade opacity.
  • Accessibility: Cho phép pause để tránh nhấp nháy quá nhiều.

7.3 Sentiment / Emotion​

  • Keywords: sentiment, emotion, NLP.
  • Best chart: Word cloud + sentiment.
    Secondary: Sentiment arc, radar.
  • Màu: Positive xanh (#22C55E ), negative đỏ (#EF4444 ), neutral xám (#94A3B8 ).
  • Note: Word cloud kém cho screen reader → luôn kèm list view.

8. Tóm tắt nhanh (Agent Cheat Sheet)​

Câu hỏi dữ liệuChart nên dùng
Trend theo thời gianLine / Area
So sánh categoryBar ngang/dọc
Part-to-whole (≤ 5 phần)Pie / Donut / 100% stacked bar
Tỷ lệ phức tạpWaffle / Stacked bar
Correlation / scatterScatter / Bubble
Intensity theo grid/mapHeatmap / Choropleth
Geo (vùng/quốc gia)Choropleth / Bubble map
Funnel/checkoutFunnel / Sankey
KPI vs targetGauge / Bullet
Forecast + confidenceLine + Band
Anomaly trên time-seriesLine + marker đỏ
Hierarchy + sizeTreemap / Sunburst
Relationship graphNetwork graph (thêm table)
Real-time streamingStreaming area / ticker

Nguồn dữ liệu: charts.csv — ui-ux-pro-max-skill.