Marvel Cinematic Universe

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.