Data visualization + culinary math exploration with SVG/Svelte/D3
Check out the full article at The Pudding: https://pudding.cool/2025/08/onions
In 2021, food writer Kenji López-Alt shared some diagrams and mathematical analysis about the ideal method for dicing onions:
After seeing Kenji’s post, I recreated his onion cross-section diagrams as a mini web app:
got nerd-sniped and now I’m trying to verify the optimal way to chop an onion with SVG/Svelte pic.twitter.com/NZ4bRk2NN0
— Andrew Aquino (@aqandrew) December 30, 2021
This simple interactive version is live here: https://svelte-onion.netlify.app/
Originally all I wanted was just to get some more practice with Svelte/D3 and writing SVG by hand. Later I decided to dive deep into verifying Kenji’s claim using calculus and statistics. I pitched this as a freelance article for dataviz publication The Pudding, and we published it in August 2025. (Here’s the link again! https://pudding.cool/2025/08/onions)
Challenges included:
- coming up with a method to calculate the area of any onion piece, when using vertical or radial cuts as defined in the article
- lots of dead ends here, including elliptic integrals (???)
- writing tests with Vitest gave me confidence that this method is accurate 💚
- ^modifying that method to also calculate the area of smaller pieces that are created when adding horizontal cuts
- creating SVG
pathelements for each individual onion piece - creating a smooth transition animation to and from an exploded view, where onion pieces are sorted from largest to smallest
- ended up having to implement inline-block layout from scratch for SVG
pathelements
- ended up having to implement inline-block layout from scratch for SVG