How to Choose the Right Chart: A Practical Guide to Data Visualization Design

Preface

Visualization can be divided into information visualization and scientific visualization. Scientific visualization uses computer graphics to help people understand complex, large‑scale scientific relationships such as contour lines or magnetic field lines, turning invisible relationships into visual forms for research and comprehension.

Background

In product and interface design, visualizing complex product logic and business information is an efficient way to convey ideas. Existing BI tools, D3.js, and open‑source components are abundant, but this article focuses on design, analyzing typical chart types and case studies to derive general visualization conclusions.

Step 1: Understand Common Charts

The following chart types are frequently used in design. For a full list of over 20 chart types, see the WOS documentation.

Funnel Chart

Funnel charts are ideal for analyzing processes with many steps or long cycles. By comparing data at each stage, they help locate problems and optimize steps. In WOS funnel analysis, users can define custom flows to pinpoint drop‑off points, such as a marketing landing page or checkout page.

Another example shows high user loss between step 1 and step 2, suggesting optimization of the marketing landing page, and loss after order submission, indicating possible checkout obstacles.

Heatmap

Heatmaps use varying intensity to display data with geographic or positional attributes, commonly seen in maps or page‑click heatmaps. They quickly reveal user interest areas and population density.

Two examples illustrate content interest on the left and crowd density on the right.

Sankey Diagram

A Sankey diagram is a flow chart where branch widths represent data volume. Originating from Matthew Sankey’s 1898 steam‑engine efficiency diagram, it visualizes energy or data flow with proportional widths and optional colors for categories.

Historical example: Napoleon’s Eastern campaign visualized as a Sankey diagram, showing army size, routes, temperature, locations, time, and distance.

In user‑behavior analysis, Sankey diagrams reveal entry point distribution, bottlenecks, and specific event paths.

Insight into user actions after landing on the homepage.

Identify stuck steps and loops to improve navigation.

Track post‑event paths such as button clicks or form submissions.

Venn Diagram

Venn diagrams visualize set relationships (intersection, union, difference) using overlapping circles.

They help understand table join types (left, right, inner) by showing record retention.

Force‑Directed Layout

Force‑directed graphs use algorithms to position nodes and links, showing entities and relationships. Node size/color can encode attributes, and link thickness can indicate connection strength. Data lineage graphs, a variant, reveal data history and evolution, useful for quality management and audits.

Rose (Nightingale) Chart

Named after Florence Nightingale, rose charts display categorical frequencies as radial sectors, using radius or area to encode values. An example shows soldier deaths in 1854‑1856, with colors for preventable disease, battle deaths, and other causes.

The chart clearly shows that preventable disease caused far more deaths than combat in 1854‑1855.

User Experience Map

An experience map visualizes the user journey, highlighting touchpoints and emotional states, helping design and product teams understand user needs and expectations.

Chord Diagram

Originally created for genomic data, chord diagrams display complex relationships with arcs around a circle; arc thickness indicates relationship strength. The Circos site provides many examples.

Swimlane Diagram

Swimlane diagrams show responsibilities, activities, and interactions of multiple participants in a process, useful for project management and workflow analysis.

A simplified version highlights project content and supports lane‑switching for priority decisions.

Sunburst Chart

Sunburst charts are a radial variant of ring charts that display hierarchical data layers. Each concentric ring represents a level, and sector size encodes proportion or importance.

Step 2: Data Preparation and Choosing the Right Visual

What is a Mental Model?

An implementation model describes how machines and programs work; a mental model is the user’s intuitive perception of the visualized information; a presentation model is how designers display functionality. Good visualizations align presentation and mental models.

Data Preparation

Clarify purpose : define visualization goals and information priority.

Data dimensions : choose angles based on purpose, e.g., location and time.

Data measures : map ranges to size, opacity, etc.

Element relationships : identify relationships (parallel, progressive, conditional, causal, comparative, containment, explanatory, linear flow) and avoid unrelated elements in one scene.

Step 3: Map Information with Visual Metaphors and Storytelling

Visual metaphors rely on intuitive links between symbols and functions, reducing cognitive load. Use clear icons, map relationships with appropriate charts (e.g., parallel – chord, word cloud; progressive – tree, force‑directed, sunburst; causal – rose, force‑directed; containment – Venn, treemap; linear flow – Sankey, experience map, swimlane, Gantt), and add interactivity (click, hover, swipe). Ensure metaphors match users’ familiar concepts and avoid over‑stylized designs that sacrifice function.

Case Studies

Case 1: Key‑Metric Visualization

Requirement: a data platform with 138 dashboards, 11 self‑service models, and three major analysis functions. Goal: showcase platform power and multi‑view analysis. Data dimensions include multi‑view, dashboards, and self‑service queries. The story uses a “star‑trail” metaphor, likening data to a vast night sky where each star (data point) offers a different answer.

Case 2: Relationship Visualization

Requirement: based on DPaSS, illustrate how upper‑layer products expose data capabilities and show business relationships among products. Goal: depict business logic and shared core capabilities. Story uses an “inner‑outer” metaphor inspired by a globe anatomy diagram. Combines rose and sunburst charts for classification and hierarchical drilling, with arrows and text to express flow.

Conclusion

Effective visualizations boost efficiency but must serve decision‑making, not just aesthetics. Designers should balance functionality and visual appeal, ensuring the visual metaphor aligns with users’ mental models.

References

https://charts.ant.design/

http://circos.ca/

Information is Beautiful

FlowingData | Data Visualization and Statistics

Visual Business Intelligence

Datavisualization.ch

http://www.visualcomplexity.com/vc/

Cool Infographics