Dive into all 200 fights that happened during Dragon Ball Z. Starting with the first fight between Picollo and Raditz, each fight is represented by a cluster of circles. Swooshing lines representing a particular character makes it easier to understand their fighting patterns. By hovering over a fight you get more insight into the what happened and who was fighting whom. Seeing the overview of all the fights in this manner reveals interesting insights that might’ve been hidden otherwise. Such as Goku, the main protagonist. He appears in most fights overall, however he’s still missing in action for very large periods of time, due to being dead (twice) or sick/recovering from injuries.
For the nostalgia month of data sketches I chose to dive back into something I loved watching about half my life ago; Dragonball Z. While looking for an interesting angle on the extensive Dragon Ball Wikia, I came across a list of all the fights that happened during each saga. The idea to visualize all of these fights was immediately stuck in my head.
To connect the same character from fight to fight I created custom SVG shapes that look like arcs swooshing from fight to fight. It gives the end visual an interesting effect while also giving an extra level of detail. It’s become quite a long visual, spanning about 200 fights, therefore I added a small map to the right that tells you where in the whole of the series you’re located.
Finally, interaction is added in terms of a fun mouse hover. When you hover over a fight it increases in size, the inner circles move apart and a white circle appears as a background. Plus a tooltip appears with even more info. You can read much more about the data, design & creation process in data sketches’ January write-up.
