Data Visualization

Data visualization is the graphical representation of information and data. By using visual elements like charts, graphs, and maps, data visualization tools provide an accessible way to see and understand trends, outliers, and patterns in data. Additionally, it provides an excellent way for employees or business owners to present data to non-technical audiences without confusion.

This enables sharing of information, visualizing patterns and relationships, and sometimes interactively exploring opportunities.

However, the visuals themselves, can cause biased inference.

There are over 200+ charts that can be used(Jump to section). However, it is recommended to read through the principles prior to it.

Guiding Principles for Data Visualizations

Edward Tufte Principles

Principle	Description	Application Area (Examples)
Show the Data	The primary focus of a visualization should be the data itself—not decoration, branding, or interface clutter.	Minimal charts, clear regions in dashboards, removing decorative frames.
Maximize Data-Ink Ratio	Use only the ink needed to represent data; reduce or remove non-essential marks.	Light gridlines, no chart borders, thin axis lines, direct value labels.
Erase Non-Data Ink	Remove elements that do not communicate information.	Delete drop shadows, 3D effects, unnecessary legends.
Erase Redundant Data Ink	Avoid repeating the same value visually more than needed.	Don’t label every bar segment if axis already conveys it.
Avoid Chartjunk	Avoid decorative forms, textures, and graphics that distract from interpretation.	Avoid 3D pie charts, clipart, patterns, animations.
Data Density / High Data-to-Ink Density	Present data in a compact form that allows rich comparison without clutter.	Heatmaps, dense line charts, tables with sparklines.
Small Multiples	Use multiple small, consistent charts to compare data across categories or time.	Side-by-side mini charts for regions, cohorts, products.
Sparklines	Word-sized graphics that show trends inline with text.	Financial summaries, inline KPI trend indicators.
Micro / Macro Readings	Enable both overview and detailed inspection in the same visual.	Zoomable charts, layered maps, dashboards with drill-down.
Layering & Separation	Use visual hierarchy to distinguish primary from supporting content.	Bold primary data line + subtle gridlines + faint context curves.
Color Should Support Structure, not Decoration	Color is for emphasis, grouping, and hierarchy, not decoration.	Use one accent color for key variable; use neutrals for context.
Use Direct Labeling	Label data directly rather than relying on legends, reducing cognitive load.	Labels beside lines instead of legend boxes.
Integrate Text, Data, and Graphics	Words should explain the data and appear near what they describe.	Annotations placed at the exact point of interest on charts.
Documentation & Context	Always show scale, units, sourcing, and relevant notes to avoid misinterpretation.	Footnotes, axis units, baseline references, data source shown.
Tell the Truth (Avoid Distortion)	Maintain ratio between visual distances and the underlying numerical values.	Avoid stretched axes, manipulated baselines, and misleading scaling.
Encourage Comparison	Visualizations should make comparisons easy, because comparison is the core of reasoning with data.	Same scales across charts, aligned baselines, side-by-side views.

8 Gestalt principles

Principle	Description	Application Area (Examples)
Proximity	Elements that are close to one another are perceived as belonging together or forming a group.	UI layout, grouping related menu items, dashboard widget organization.
Similarity	Items that share similar attributes (color, shape, size, texture) are perceived as part of the same group.	Icon consistency, data visualization (same colors for same categories), branding design.
Continuity (Good Continuation)	The eye follows continuous lines or patterns rather than abrupt changes.	Navigation flows, timeline designs, line charts, form field alignment.
Closure	We tend to see complete shapes even when parts are missing. The mind fills gaps.	Logo design (e.g., WWF, IBM), simplified illustrations, wireframe iconography.
Figure–Ground	We separate elements into a foreground (focused object) and a background.	Hero sections, call-to-action emphasis, contrast-based layout design.
Common Region	Elements located within the same bounded area are perceived as grouped.	Card components in UI, panels, containers, bordered group boxes.
Common Fate	Objects that move in the same direction are perceived as related.	Loading animations, guided sequences, animated transitions, timelines.
Symmetry & Order (Prägnanz)	People perceive designs in the simplest, most stable and symmetrical form possible.	Clean grid layouts, typography hierarchy, minimalist interface design.

Color Theory: Shape is less powerful than color.