JDR VI5 for CS725@ODU

Name: Joel D. Rodriguez-Ortiz

Summary

The rule of thumb being demonstrated is "no unjustified 3D: perspective distortion". League of Legends is an online multi-player game where two teams of five players play a king of the hill type match. Players play different positions in the field, much like the different positions played in a soccer match. The position you play depends on your character's role. These visualizations counts the number of characters currently available in League of Legends for any given role.

Rule

This dataset is actually convenient to demonstrate the importance of this rule. 3D bar charts become so difficult to interpret, that they succeed in interfering with decoding even the smallest dataset or the simplest goal. Attempting to portray three dimensions on a two dimensional plane causes perspective distortion. Distant objects appear smaller and appear to have skewed positions in the image. 3D bar charts in particular suffer from both perspective distortion and occlusion.

Examples

Incorrect

The example that breaks the rule is shown in the image above, made in LibreOffice. The tank and marksman categories appear to line up perfectly with the axis grid lines. Glaring over the fact that other categories severly occlude the grid lines, your eyes could be able to follow all the way to the front and infer a count of 20 for marksman characters and a count of 15 for tank characters. The actual values are 17 for tank characters and 22 for marksman characters. Other categories don't line up perfectly with the grid and infering any value for them at all is flat out difficult. This visualization complicates what should have ideally been a simple task.

Correct

Two examples were implemented with D3 to show the rule of thumb correctly. The first is the most intuitive answer to the problem presented. A simple 2D bar chart answers the question directly, simply, and to the point.

• Colors for the different roles allow quickly identifying each role.
• A common scale allows comparing the quantities visually.
• Value abels allow observing exactly how many characters are available for any given role.

The other example was made to practice with D3 as much as it was made to answer the question. It shows an alternative to the bar chart that can include a level of interactivity and "features" and still answer the question directly.

• Roles can still be quickly identified.
• Available characters for the different roles can still be visually compared.
  • There are many more fighter characters than support characters in the game.
• Exact measurements can be observed just as quickly as the bar chart.

If I were a beginner playing this game for the first time I would look at either chart and conclude that I will invest my time learning how to play fighters, for the most diverse gaming experience.

The second example taught me a bunch of interesting JavaScript and D3 techniques. The most valuable achievement was being able to reuse that Legend as an object in both charts. I come from a C++ background with little to no JavaScript experience and feel as if I had been stripped of all the super powers I once had. Beginning to understand how objects and OO work in JavaScript feels like a small step towards regaining my powers!