Marvel Cinematic Universe

Every year, the Graph Drawing and Network Visualization conference organizes a contest where they provide data which needs to be visualized. In 2019, one of the creative topics deals with the relationship between Marvel superheros and the movies in which they appear.

yWorks’ Contribution

In this visualization of the Marvel Cinematic Universe and its characters, we’ve arranged all movies according to their in-universe timeline. Characters are shown as edges that pass through the movies they appear in. The thickness of edges models the relative screen time of characters within a movie. The overall layout is automatically computed based on the hierarchical layout style in yFiles.

Since the graph offers many details that could be explored, we decided to create this interactive app that provides features like hover effects, filtering, zooming and panning.

Complete Graph

Initially, the graph shows the journey of each superhero. Hover over the colored lines or the icon in the legend to highlight one superhero and follow his/her path through the movies.

Filtered Views

To get a more compact view of the graph, you can either focus on the paths belonging to one superhero or belonging to one film series.

• Click a line or an icon in the legend to only show the movies in which the selected character appears along with the characters that also appear in these movies
• Clicking a movie will only show the movies belonging to the same film series as well as the characters appearing in these movies
• To return to the original graph, double-click in the background.