Fresh out of coding bootcamp, I came across something magical called Film Flowers.
It was an art piece that turned movie data into beautiful, blooming visualizations. As I scrolled through the delicate petals representing different films, a question sparked:
"What if baby names could bloom too?"
A week of discovery
That simple question launched my first real D3.js adventure.
The concept was simple: let each name become a flower. But how could I make each flower unique?
Then it hit me: the vowels. Emma would get colors for E and A. Oliver would bloom with O, I, and E hues. Suddenly, every name had its own personality and visual signature.
Before: Just structure
After: Pure magic ✨
When the vowel colors first painted across those flowers, I knew I'd created something special.
Built with
React
Component structure
D3.js
First time using it!
SSA Data
100 years of names
Netlify
Live deployment
What I learned (the hard way)
D3.js doesn't play nice with React
Spent way too long fighting the framework instead of working with it.
SVG has its own mysterious ways
Positioning elements felt like solving puzzles in a foreign language.
Simple solutions often work best
The vowel-color idea was elegantly simple, and that's what made it work.
Data + creativity = pure magic
When numbers become art, something beautiful happens.
Explore more case studies and technical projects