Design reference index · 27/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Combo Chart
Combines marks such as bars and lines in one coordinate system.
Candlestick Chart
Uses a body and wick to encode open, high, low and close.
OHLC Chart
Shows open, high, low and close with a range line and side ticks.
Gantt Chart
Places task intervals as horizontal bars on a time axis.
Event Timeline
Places discrete events and descriptions along a timeline.
Histogram
Bins quantitative observations and shows the frequency per interval.
Box Plot
Summarizes a median, quartiles, whiskers and outliers.
Violin Plot
Uses a symmetric density silhouette to show a distribution.
Density Plot
Shows an estimated probability density as a continuous curve.
ECDF Plot
Shows the proportion of observations at or below each value.
Strip Plot
Places individual observations along a quantitative axis.
Beeswarm Plot
Offsets points to avoid overlap while preserving quantitative position.
Ridgeline Plot
Stacks partially overlapping distributions for multiple groups.
Error Bar Chart
Adds uncertainty intervals around point estimates.
Confidence Band
Shows an uncertainty band around an estimated line.
Bubble Chart
Adds a third quantitative variable through marker area.
Connected Scatterplot
Connects observations in time order across two quantitative axes.
Correlation Matrix
Displays pairwise correlation coefficients in a symmetric matrix.
Scatterplot Matrix
Arranges pairwise variable combinations as small scatterplots.
Parallel Coordinates
Represents each observation as a line crossing parallel variable axes.
Radar Chart
Places multiple measures on radial axes and connects their values.
Waffle Chart
Fills equal-sized grid cells to show proportions.
Sunburst Chart
Encodes hierarchy depth as concentric rings and composition as angles.
Icicle Chart
Stacks rectangular layers to show hierarchical depth.
Circle Packing
Uses nested circles to show containment in a hierarchy.
Sankey Diagram
Encodes quantities moving between nodes as flow-band widths.
Alluvial Diagram
Shows groups splitting and merging across categorical stages.
Chord Diagram
Places groups around a circle and connects them with weighted ribbons.
Network Graph
Represents entities as nodes and relationships as edges.
Node-link Tree
Shows parent–child hierarchy as a rooted node-link structure.
Calendar Heatmap
Uses calendar-aligned cells to encode daily values by color.
Cohort Retention Heatmap
Shows retention by elapsed period for groups acquired at the same time.
2D Histogram
Bins two numerical axes and shows observation counts per cell.
Hexbin Plot
Aggregates point density in hexagonal bins.
Target vs Actual
Compares a target with actual results on a common scale.
Small Multiples
Repeats the same chart form across groups for comparison.
Benchmark Line
Adds a reference line for a target, average or benchmark.
Anomaly Annotation
Annotates observations that deviate from an expected pattern.
Data Freshness Indicator
Shows collection or refresh timestamps to communicate freshness.
Empty Chart State
Explains that no data matches the current chart query.
Stale Data State
Retains the last successful data while indicating a refresh problem.
Interactive Legend
Allows users to highlight or toggle series from the legend.
Crosshair Cursor
Adds horizontal and vertical guide lines at a chart position.
Brushing
Selects observations by drawing a region on a chart.
Linked Highlighting
Highlights matching records across views without removing other records.
Drill-through
Opens a separate detailed report while preserving selection context.
Focus + Context
Pairs a detailed zoomed view with an overview of the full range.
Metric Selector
Changes the numerical metric shown in a visualization.
Dimension Selector
Changes the categorical grouping such as channel or product.
Aggregation Selector
Selects a summary operation such as sum, mean or median.
Comparison Period Toggle
Switches the baseline to a prior period or year-over-year period.
Chart Type Switcher
Switches between compatible visual encodings of the same data.
Chart Data Table
Provides a tabular alternative for the values used in a chart.
Pivot Table
Aggregates measures across intersecting row and column dimensions.
Conditional Formatting
Varies cell styling, bars or icons according to values and rules.
Direct Labeling
Places series labels near the marks instead of only in a legend.
Color-safe Chart
Distinguishes series with patterns, shapes and labels as well as color.
Missing Data Gap
Shows unobserved intervals as gaps or explicit missing-value markers.
Zero Baseline
Makes zero explicit when value is encoded through length.
Logarithmic Scale
Spaces the axis so equal ratios occupy equal distances.
Data Uncertainty Display
Shows ranges, sample size or quality alongside point estimates.
AbortController
A browser API that signals cancellation to supported asynchronous operations through an AbortSignal.
Request Race Condition
An asynchronous response-order race in which an older response can overwrite newer UI state; request identifiers or cancellation can prevent it.
IME Composition Guard
An input pattern that checks composition events and isComposing so Enter used for IME composition does not submit a form.
Roving tabindex
A composite-widget focus strategy that assigns tabindex=0 to one item and moves the tab stop as arrow keys move focus.
aria-busy
A WAI-ARIA state indicating that an element is being updated, helping assistive technology defer exposing incomplete changes.
Event Delegation
A pattern that handles bubbling events on an ancestor and identifies the target instead of installing a listener on each child.
URLSearchParams State
Serializing search and filter state into a query string and restoring it with URLSearchParams.
ReadableStream Backpressure
Stream flow control using queue capacity and pull requests to match production to consumption.
Promise.allSettled()
A method that waits for all promises to fulfill or reject, then returns their outcomes in input order.
MutationObserver
An API that asynchronously observes configured DOM child-node, attribute or character-data changes.
ResizeObserver
An API that reports size changes to an observed element, including content- or border-box measurements.
IntersectionObserver
An API that asynchronously observes intersection changes between a target and a scroll container or viewport.