Dot Matrix Chart for Proportional Counts in Python, R, Julia and JavaScript

Source code in 15 libraries — Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl; JavaScript: Chart.js, D3.js, Apache ECharts, Highcharts, MUI X Charts.

A dot matrix chart displays proportions using a grid of equally-sized dots where filled or colored dots represent counts out of a total. Each dot corresponds to one unit, making it intuitive to read "X out of N" statistics at a glance. Unlike waffle charts that use percentage-based squares, dot matrix charts emphasize absolute counts with variable grid sizes, excelling at risk communication and survey result visualization.

Renders

• Full-resolution render, light theme
• Full-resolution render, dark theme
• Interactive version, light theme
• Interactive version, dark theme

Preview render from the Plotly implementation.

Implementations

• Dot Matrix Chart for Proportional Counts in Altair (Python)
• Dot Matrix Chart for Proportional Counts in Bokeh (Python)
• Dot Matrix Chart for Proportional Counts in lets-plot (Python)
• Dot Matrix Chart for Proportional Counts in Matplotlib (Python)
• Dot Matrix Chart for Proportional Counts in Plotly (Python)
• Dot Matrix Chart for Proportional Counts in plotnine (Python)
• Dot Matrix Chart for Proportional Counts in Pygal (Python)
• Dot Matrix Chart for Proportional Counts in Seaborn (Python)
• Dot Matrix Chart for Proportional Counts in ggplot2 (R)
• Dot Matrix Chart for Proportional Counts in Makie.jl (Julia)
• Dot Matrix Chart for Proportional Counts in Chart.js (JavaScript)
• Dot Matrix Chart for Proportional Counts in D3.js (JavaScript)
• Dot Matrix Chart for Proportional Counts in Apache ECharts (JavaScript)
• Dot Matrix Chart for Proportional Counts in Highcharts (JavaScript)
• Dot Matrix Chart for Proportional Counts in MUI X Charts (JavaScript)