I had a few choices for this month's topic of nostalgia and I didn't know which one would provide the most interesting dataset, so I actually scoured the web a while for all topics. I loved playing Zelda, but only on the Game boy variants, especially Minish cap & the Oracle of Ages/Seasons combo. There was something about the top view that worked exceptionally well for me, whereas in the 3D games I just kept falling off bridges and running into corners. But I couldn't find any interesting data. I looked at Cardcaptor Sakura, but only the manga. I was very happy to find out they are currently doing a new series! But there was actually too little data for me to build something elaborate with (if you're familiar with the manga, there are actually only about 19 cards she collects). Neopets is where I had my first HTML & CSS experience when I was 14 (although I completely dropped it again for 10 years after I got a boyfriend and went studying Astronomy 😁 ). Since Neopets is now really only a ghost of what it was, and I found out my account was hacked and my pet stolen I wasn't in the mood to investigate that further. Which brings me to the last subject I had in mind: Dragon Ball Z. This anime was my very first introduction to the Japanese animation scene. Although I quickly turned solely to manga in general, I did stay loyal to DBZ and loved watching it all the way to the Fusion Saga (not sure why I stopped watching. I think I was just greatly annoyed by the Majin Buu & Gotenks character).

Data

While randomly going through the extensive Dragon Ball Wikia, I learned that even though Dragon Ball Z was aired about 20 years ago, it's still very much alive. With Dragon Ball Kai now airing in the US, which is a filler-free version of Dragon Ball Z (and thus about 1/3 less episodes) and Dragon Ball Super, a brand new series taking place right after DBZ. I came across the page to each DBZ saga and saw a list all of the (major) fights that took place during that saga, in order. And that stuck immediately. It felt just so appropriate to the series to map out all of the fights that took place during DBZ; who fought who, was it anime only, any special conditions (say, fighting while in Super Saiyan "mode").

So I manually went through all ±17 sagas that comprise the 291 episodes and copy-pasted the fights into Excel (yes I do use Excel from time to time to do highly manual stuff ^^). With the help of some Excel functions to split up the fights into the separate characters and 2 more hours of manual cleaning I had a nice list of the 200 fights; who fought and were they in a special state. However, I needed the data in a slightly different order. Right now, each fight was on 1 row, but I needed each character per fight on one row. And that's where R came in. I wrote a tiny script to loop through the Excel sheet and create the final dataset.

Another "data" gathering step that came up a bit later in the process, was finding appropriate animated gifs to highlight the most special moments and fights & nice shots of the main characters for a legend. I went through hundreds and hundreds of gifs & images, trying to find some decent stuff. But I also came across some wonderful funny gifs, short comics and images. Although not the funniest I saw, the two below belong to my favorites 😆  (I definitely discovered this month that I find Vegeta a way more interesting character than I used to).

Sketch

I truly don't remember how I got the idea, but almost immediately after finding the DBZ fights information I had a concept in my mind of placing each fight on a line, one after another, where each saga in the series would have its own column. Lines would then be drawn through the fights from 1 character as if that person was flying from fight to fight. The image below shows my very first sketch of the idea. At the bottom of the image you can also see the sketch I made for Cardcaptor Sakura, because at that time I was still trying to figure out which topic might have the most interesting visual result.

After deciding on DBZ I drew another image that was a bit more precise (below left). Since I already knew that I would have to create the formulas for the swooshing SVG paths myself I tried to see where to place the anchor points of the SVG Quadratic Bézier Curves (which makes the lines swoosh).

At first, I only looked at how to create the path from the first fight at the top through all other fights of the character all the way to the last fight at the bottom. This creates a path that you can stroke with a single width (there is no use filling the path, since it is not a closed path). Once I had that figured out, I looked at the result (which you can find in the code section below) and found a bit.... boring perhaps.

Instead I was looking for a way to have lines with different widths, as if pressure was being used to draw them. So I created another simple sketch (below right) that had the shape that I was looking for. I then figured out the SVG path "formula" that would be needed. It was as if I was drawing the path from top to bottom twice, but the flipping the 2nd half, so it would run from bottom to top, completing an SVG shape that I could then fill instead of stroke. This 2nd part would be slightly, randomly, offset from the first to create the appearance of a line with different widths.

One part that I was constantly struggling with (well, I struggle with it practically every month) is the overall layout, the stuff other than the visual itself. What fonts would fit this design? How to place the intro text and any legends? How to make it look a bit interesting? I have to admit I'm still not very happy with the end result, but it's the best I could come up with (>﹏<) Maybe I just need to follow some layout design courses or something...

As you can see, this month the sketches were very basic. It's really about getting the abstract shapes on paper. Any form of design was later done while I was already programming with the actual data.

Code

As per my sketches, I wanted to represent every fighter in a battle with a circle and then have these circles positioned partly overlapping. Also, each saga would be placed in its own column to make the distinction between different story lines more apparent. With some geometry that was achieved relatively quickly.

And then came the custom paths that would connect all the fights from one character. I only had the locations of a character's fights, so to create the swoosh I would have to figure out a way to position the anchor points of the SVG Quadratic Bézier Curves myself to make it look nice. Of course, I didn't start by creating the complete path, I build things up in iterations, adding more and more of the needed complexity when the previous step is working. So I started with straight lines from fight to fight, then adding the anchor points at fixed locations, so all swooshes would look rather similar.

When I saw that fixed anchor points was creating a bit of a boring result, I added in bigger swooshes and randomness. The farther the distance between two fights, the farther out the anchor point is placed and each point also got a random "jitter" so that overlapping swooshes (characters going from the same fight to the next same fight) wouldn't overlap exactly. I liked the end result more, but still, in my mind the swooshing lines had a bit more going on by having different widths, from thin at the fight circles to broad during the bend between fights. Thus, as explained in the sketch section already, I turned the line from top to bottom into an entire closed path, by adding another section to the path string that would run from bottom to top. This second section would again be randomly offset from the first section on the anchor points, thus creating the appearance of different width lines. Naturally this didn't go right on the first try (*≧▽≦)

It was an interesting exercise, thinking about math and hand-crafted SVG paths, but in the end I finally had the result that I was looking for. Below left is the "before" image with only a stroked line and to right of it is the final result, where I've build the complete path and filled it with a color to give the appearance of a different-width line instead. I'd say the right looks more visually appealing ^^

With about 200 fights, the visual was quite long, in fact it's about 6.5 times as long as it is wide. Thus it will never fit on any screen. And when I showed the visual to Shirley, she said that she'd like to know what section she's looking at with respect to the whole, and suggested I add a mini-map with a full overview.

I knew it was a great idea, but I also sort of dreaded building it, haha. Nevertheless, one Saturday in January I sat behind my laptop for hours and slowly build up the mini-map. Actually getting the visual part in there wasn't the hardest challenge, it was figuring out the mathematics of when the mini-map should be fixed in place in the middle of the screen, or move up and down when you are outside of the chart area, hehe.

A suggestion by a designer friend was to try and make one (or all) of the swooshing paths look more like the "aura" that is typically visible when characters power-up. I tried a glow, but that made the visual exceptionally non-performing. So instead he said I should fill maybe 1 line with a pattern that would have some of the color differences present in the auras. As a test I made a simple SVG thing in Illustrator which I loaded as a pattern for Goku's swooshing line. However, I guess my design skills couldn't be stretched farther, because I could not make it look interesting enough to warrant the extra loading of a 0.5 - 1 Mb SVG file...

Another change that is visible above is that many of the swooshing lines are on the left side. This was a suggestion from Susie Lu, to make it easier to distinguish the good guys from the bad guys. So all the good guys have their lines on the left, whereas the bad guys are on the right. This made it possible to see that Vegeta starts out as a main antagonist, but turns to the good side (although maybe not for the right reasons, until he sacrifices himself in the Majin Buu saga ಥ﹏ಥ)

Personally, I particularly like the transition effect that occurs when you hover over a fight. With a white circle and everything getting bigger and the circles moving outward :) Besides that, the lines of the fighters and all the other battles in which any of the fighters appeared are highlighted in both the visual itself and the mini-map for context.

Due to having become a freelancer, this was the first month where I truly tracked my hours. Although I do feel that it was a particularly long month. I spend quite some time going trough gifs, finding the perfect ones, same for videos to link the gifs to and the character images. But also, 95% of the fights have annotations (if you hover over a fight) to explain what was special about that fight or how it fits into the story. These were all manual exercises, but they are that attention to detail that can make a true difference. But *drumroll* I spend about 75 hours on this visual (O_O) So for the next project I really want to try and keep it within at least half that...

You can find the final visual here. It actually works the best in Chrome, due to its ability to handle CSS transitions better than the other browsers (even though I kept all transitions to either a change transform or opacity I keep creating visuals that have these "too-many-transitions-on-hover" issues which slows things down (╥﹏╥) )

I have to admit, it was great fun to dive into a topic I hadn't really thought about for 15 years. It gave me a lot of enthusiasm to try and turn it into something worth looking at and informative!

‍