Dot Matrix (X of Y)
”8 out of 10 patients…” rendered as a 100-dot grid that fills in.
A free, animated dot matrix (x of y) you can read here or embed on any website, from Scrollchart.
A dot matrix represents a proportion by filling N dots inside a fixed grid of 100. Each dot stands for one unit out of the whole, so “27 filled dots” maps directly to 27%. This one-to-one correspondence sidesteps the abstract nature of percentages: the reader counts or estimates filled dots rather than interpreting a number.
The format is especially effective for risk and medical communication, where framing matters. Showing “27 out of 100 people experience this side effect” in a dot grid produces more accurate risk perception than the equivalent bar or pie chart. The grid is also a natural host for two-group comparisons: fill the top half in one color (treated) and the bottom half in another (placebo).
Good for
- Articles in the statistics category
- Editorial pages where a quick visual replaces a wall of text
- Content-marketing posts that need a clean, branded illustration
Source & accuracy
This dot matrix (x of y) 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.
Frequently asked questions
- Where can I get a free animated "Dot Matrix (X of Y)" for my website?
- Scrollchart provides "Dot Matrix (X of Y)" 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 dot matrix (x of y) 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.
Other statistics explainers
Bell Curve with “You Are Here”
The canonical normal distribution with a personal percentile marker that scrolls into place as the reader arrives.
Sankey Flow
A two-stage flow visualizing how a population splits across categories - the data-viz workhorse.
Donut Chart
Animated arc-fill donut with center label - the workhorse composition chart.