The rise of competitive video gaming (e-sports) brings with it interesting opportunities for information visualization. With TrueSight, the popular multiplayer online game, Dota 2, was used as our source for the data presented. However, our system design was generalized to provide similar functionality with other popular online video games, such as the Call of Duty or Halo franchises. This project was created using both D3 and Crossfilter.

The Users

With our target users, we focused on individuals who competitively play online video games. In our particular example, we focused on those who competitively play Dota 2.

The Dataset

The rich dataset provided by Dota 2 was a primary reason we chose this game for our source. All professional Dota 2 matches are archived so that they are available for replay and analysis. Currently, there are tools that can parse replay files and return a detailed set of data about almost every action of every character on the playing field, which made our dataset rich in content. An extensive combat log is kept, and an entry is added to the log whenever a player does the following:

- Deals damage
- Receives damage
- Heals another unit
- Is healed by another unit
- Gains a power up
- Loses a power up
- Dies

The Research

It was important to make sure that the data displayed to the users would actually benefit them when analyzing a previous match. Although we were given a large quantity of data to work with, not all of it was necessarily meaningful when evaluating team/player behavior. When analyzing our data, two of the most prominent variables that kept appearing were location and time. These variables became a big focus for our final design iteration.

This project also solicited feedback from competitive players experienced in Dota 2. Based on their feedback, the most important moments when analyzing a match are those when gold is obtained. Since gold is acquired after most game events occur, spikes in gold signify an important event. This was another piece of data that we found particularly important to display.

The Design

Map and Timeline

As stated earlier, two of the most prominent variables from our dataset included location and time. The interactive map and timeline allows users to observe when and where specific game events happen. These visualizations were designed to help a user gain a thorough understanding of a specific team's strategies. Our checklist to the right of the map was designed to provide users the flexibility to view information they find important.

The most meaningful feature, however, is the connection between the two. If a user selects a specific period of time on the timeline, only the events that occur within that time frame will appear on the map. In addition, if a user brushes over plot points on the map, their corresponding plots will be highlighted on the timeline.

Stacked Graphs

In addition to the map and timeline, stacked graphs are also displayed on the left-hand side. As mentioned earlier, spikes in acquired gold are an indicator of significant event occurrences. Therefore, our default view is a stacked graph focused on acquired gold per minute, since this shows spikes in gold accumulation. Similar to our map, our stacked graphs were designed to be customizable so the user can compare both friendly and opposing team members, with the ability to add and remove individuals from the graph as desired. Additional data we found useful for a stacked graph visualization included team denies, team kills, and team experience. These graphs are initially minimized until clicked on. Once the user clicks one of these visualizations, it swaps places with the larger displayed graph.

One of the most prominent design challenges was fitting all of our visualizations on one screen without obscuring information or cluttering the screen. That is where our solution of miniaturized graphs became most useful. With this approach, the user can call upon a graph as needed. When minimized, they can still see the trend of a graph without it occupying most of the screen. If they want to maximize the size of the visualization, they can simply click on it to bring it to the forefront.

Sunburst Diagram

The last visualization included in our system is a fully customizable sunburst diagram. The reasoning for choosing such an unconventional visualization involved our desire to provide a vast quantity of information that serves a key purpose. The design of the Sunburst diagram provides users the insight necessary to understand who the most efficient team players were, whom each team member attacked/defended the most, and so on. In addition, users can adjust the visualization based on their current task. For example, if they want to focus on damage done by individuals, they can simply use the leftmost drop down menu (the core of the sunburst) and select “damage.” This is possible for any layer of the sunburst diagram, and allows for more flexibility when analyzing match data. Another important element designed into the sunburst is a breadcrumb trail underneath the drop down menus so that when the user hovers over the diagram, they can see the path they’re currently hovering over.

Our sunburst diagram compresses Ben Schneidermann’s Mantra (Overview First, Zoom & Filter, Details on Demand) into this one contained visualization. Despite how thorough this visualization is, the sunburst was not the default view and the stacked graph took higher prominence when initially loading the visualization. This decision was based on user research, which indicated that our target users considered “gold acquired” more significant when analyzing a match.


TrueSight provides enhanced data-based visualizations that provide deeper insight into opponent’s strategies. With this visualization, players are able to better understand their opponents, predict outcomes, and contribute to an enhanced gaming ecosystem.