Cardcaptor Sakura

fifty chapters of adorable cuteness

Scroll down for information


Cardcaptor Sakura – Fifty chapters of adorable cuteness


November – December 2017


data sketches’ June month


R, Excel, Illustrator, D3.js


The cover image are from the Cardcaptor Sakura Wikia & the character/chapter information I gathered myself by reading the entire series again and keeping notes in Excel


Cardcaptor Sakura is one of the most beautiful and adorable manga series (a Japanese comic) ever created. The series was written and illustrated by the manga artist group CLAMP between 1996 and 2000, but is still extremely popular today. This project is an ode to the wonderful series. The outer rings (outside the lines) focus on all 50 chapters. Such as which Clow cards were captured in each chapter or the smaller groups of circles showing the main colors present in each chapter’s cover art, all practically a piece of art. The inner ring (on the inside of the lines) concentrates on the main characters and their connections.

These two main circular areas are connected by lines that change depending on which area you hover over (or click on mobile). Hovering over a character name shows all the chapters she or he appears in. Hovering over a chapter pil instead shows the reverse; which characters appear in that chapter. Finally, hovering over a group of colored circles will reveal the characters that are present on the chapter’s cover art.


For our month of “fun” I just couldn’t shake the feeling of wanting to do something with Cardcaptor Sakura. It is my favourite manga series when I was in my teens and a new arc had recently started again, so it was “top of mind”. Since one of the main reasons I like the series so much is the beautiful art work, I wanted to incorporate the visuals into the piece somehow. And that’s what sparked the idea of analysing the cover art of all 50 chapters to see what the main colors were.

After I had that figured out, I felt it would be interesting to add extra information about which of the main characters appeared in which chapter and what the inner connections are between them (there are some interesting non-standard relations going on in the series). Combining all of those insights eventually led me to the final “onion layered” design. It is basically using a donut chart layout with a whole lot of custom SVG lines in between them, which was definitely an interesting challenge to calculate.

I added the covers themselves, so when a chapter is hovered, you can see part of the cover in the center. And finally, I added several annotations about main happenings in the story in a ring around the circle. I hope the end result will be a joy to investigate by those that, like me, love the series!

You can read all about the data, design and coding on the data sketches’ June write-up.