Make the First Choice
| Question or detail | Chart | What to check |
|---|---|---|
| Do two measures vary together? | Scatter Plot | Paired x and y values for each observation. |
| Does a third measure change the comparison? | Bubble Chart | Paired values plus a quantity whose marker-size encoding is explicitly defined. |
| Where are high and low values in a matrix? | Heatmap | Row, column, and value for each cell, with a labeled color scale. |
| Where does a quantity split, join, or reach an outcome? | Sankey Diagram | Directed source/destination amounts with consistent units and a clear total boundary. |
| Which group pairs have the largest connections? | Chord Diagram | One weighted undirected pair per row; each pair touches two group totals. |
| Which entities connect, including those with no connections? | Network Diagram | Separate node IDs and edge references, with the meaning of a connection stated. |
WORKED EXAMPLE / ILLUSTRATIVE DATA
Compare Four Fictional Campaigns
Each row below describes one campaign. A scatter plot can place spend on x and signups on y. Bubble area could represent impressions if that extra measure helps answer the question.
| Campaign | Spend ($) | Signups | Impressions |
|---|---|---|---|
| A | 100 | 20 | 1000 |
| B | 200 | 35 | 2500 |
| C | 300 | 30 | 2000 |
| D | 400 | 60 | 4000 |
Campaign C spent more than B but recorded fewer signups. Four observations do not establish a general relationship or show that spend caused signups. Differences in audience, timing, and creative could also matter.
Distinguish Measurements From Connections
Scatter positions encode numeric measurements. A Network Diagram instead uses lines to record associations among named entities. In the ChartTypes network, all nodes and edges have equal styling and follow a circular order. Their distances, positions, and crossings do not encode strength, geography, or importance.
Use the Nodes table to retain isolated entities even when the Edges table is empty. IDs define identity while labels may repeat. This network is undirected and unweighted; it does not indicate who sends a request or how often a connection is used.
Count Flows and Pairs Carefully
Sankey widths encode directed amounts. The same item can cross several links, so summing every ribbon can count it several times. Choose an entry or exit boundary for a cohort total. The example rejects cycles, permits unequal incoming and outgoing totals, and does not invent a balancing link.
Chord compares undirected pair weights at both ribbon ends. Every pair contributes to two outer arcs, so the sum of group totals is twice the sum of pair values. Ribbon area through the center is not a separate quantity. Use a Heatmap when overlapping ribbons make pair patterns difficult to scan.
Preserve the Pairing and Meaning of Size
Do not sort the two measure columns independently: that changes which values belong together. A point must keep its original x and y values, group, and label.
If bubble area represents a quantity, calculate radius in proportion to its square root. A radius proportional to the quantity makes area grow with its square. Chart.js accepts radius in pixels, so apply the conversion before supplying r. The ChartTypes bubble sample supplies illustrative radii directly; they do not encode employee counts.
Choose a Heatmap for a Grid Question
A day-by-hour table asks where activity concentrates. That is a grid comparison, even though it sits in the relationship category here. It is not automatically a correlation matrix.
Use a consistent color scale and label its range and units. A missing cell needs a distinct treatment from a zero cell. For dense scatter plots, transparency or aggregation may reveal overlap, but describe any aggregation because a cell then represents multiple observations.
Before You Publish
- State whether a connection has direction, weight, both, or neither.
- Keep paired observations together.
- Explain marker size and color separately.
- Describe association without claiming causation from the plot alone.
Explore Working Examples
Open a chart to inspect its sample data and compare code in six libraries.