Waffle Chart

Published: January 2024

A gif of a waffle chart that adapts in layout based on the available space. The user drags the border of the window, making the available space smaller. The layout of the individual blocks in the waffle charts fluidly responds to the available space, breaking into new rows where needed. The user then drags the border back to the initial state.

Svelte implementation of a simple waffle chart (no D3 here actually).
Responsive layout of the blocks is handled via flexbox CSS.
Inspired by the D3 version in this article by The Pudding.

Play with the code here:

Svelte REPL

Open REPL in new tab ← Back to all Sketches