📊

Data Visualization Basics

Chart types and data display patterns—bar charts, line graphs, heatmaps, dashboards. 6 patterns for making data understandable and actionable.

12 patterns

Data visualization patterns transform raw numbers into insights. These patterns cover bar charts (comparisons), line graphs (trends), pie charts (proportions), scatter plots (correlations), heatmaps (patterns), and dashboard layouts. Choose chart types based on data relationships and user questions. Good visualizations are honest (no misleading scales), focused (remove chart junk), and accessible (color-blind friendly palettes).

All Data Visualization Basics

Line Chart

Time-series data visualization showing trends over time with data points connected by lines. Essential for analytics dashboards.

line-charttime-seriesanalytics

Bar Chart

Vertical or horizontal bars comparing values across discrete categories. Perfect for sales comparisons and rankings.

bar-chartbar-graphcomparison

KPI Metric Card

Dashboard card displaying a key performance indicator with trend, comparison, and sparkline visualization.

kpimetric-carddashboard

Progress Ring

Circular progress indicator showing percentage completion with visual appeal. Popular in fitness apps and profile completion.

progress-ringcircular-progressradial-progress

Data Table

Structured grid displaying rows and columns of data with sorting, filtering, and pagination. Essential for admin dashboards.

data-tabletablegrid

Donut Chart

Circular chart showing proportional data with hollow center. Perfect for budget breakdowns and traffic source analysis.

donut-chartpie-chartproportional

Heat Map

Color-coded grid showing intensity across two dimensions, like GitHub contribution calendars or website click tracking.

heat-mapheatmapgrid

Scatter Plot

X/Y coordinate plot showing correlation between two variables with data point clustering and trend analysis.

scatter-plotscatter-chartxy-plot

Area Chart

Stacked area visualization showing cumulative values over time, like revenue streams or metric breakdowns.

area-chartstacked-areacumulative

Funnel Chart

Inverted pyramid showing stage-by-stage drop-off in conversion processes, sales pipelines, or user journeys.

funnel-chartconversion-funnelsales-funnel

Gauge Chart

Semi-circular speedometer-style indicator showing single metric against thresholds with color zones.

gauge-chartspeedometerdial

Candlestick Chart

Financial chart showing open/close/high/low values for stock trading and price movement analysis.

candlestickohlcstock-chart