Scatter dots connected by a path showing trajectory through the X-Y plane over time.
A free, animated connected scatter you can read here or embed on any website, from Scrollchart.
Connected Scatter
A connected scatter plot places each observation as a dot on standard X-Y axes and then draws a path in chronological order between them. The result is a trajectory: the viewer can simultaneously see how two variables relate to each other and how that relationship evolves through time. Loops in the path indicate periods where both variables retraced previous values; sharp turns indicate inflection points where one variable changed direction while the other did not.
The canonical example is the Phillips curve, which traces unemployment on the X-axis against inflation on the Y-axis year by year. During the 1960s the path ran smoothly along a downward slope; in the 1970s stagflation broke that pattern, and the path looped into high-inflation, high-unemployment territory. No static scatter or line chart communicates that story as directly.
Follow the path from the earliest labeled point to the latest. Arrows on path segments show direction. A dot far from its neighbors means that period saw an unusually large move in both variables simultaneously.
The X and Y positions show the current values of the two variables; the sequence of the path shows when those positions occurred. Do not read path length as proportional to time: periods of slow change cluster dots tightly while periods of rapid change space them far apart. Pay attention to whether the path doubles back on itself, which signals that the relationship between the two variables reversed at some point in the sequence.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This connected scatter is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
Trajectories through the X-Y plane over time
A connected scatter plot shows a path of points connected by line segments, with each point's position encoding two variables (x and y) and the sequence showing time or another ordering. The line reveals how the two variables move together: if both increase, the path trends upper-right; if one rises while the other falls, the path trends diagonally. This diagram is useful for visualizing system dynamics, economic cycles (plotting unemployment vs inflation over quarters), or personal data (plotting daily activity vs sleep quality over weeks).
Comparative advantage and reversals
Connected scatter plots reveal cycles, trend reversals, and Pareto frontiers. If you plot multiple entities as separate paths (e.g., different countries), you can see which entities are improving on both dimensions and which are in tradeoff. The diagram also highlights unusual transitions: a sharp right angle or backwards movement signals a regime change. Connected scatter is especially useful in competitive analysis when you want to show how multiple players move through the same capability space over time.
Embed this diagram
Add this animated connected scatter to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated connected scatter for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Connected Scatter" for my website?
Scrollchart provides "Connected Scatter" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a connected scatter in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.