Marvel Universe Visualization


Final Projects

UNKNOWN LOCATION, DC – FEBRUARY 17: Marvel Comics Publisher, Stan Lee, poses with a book of “Spider Man” comics which he created along with comics on the “Hulk” and others. Photo from Washington Post Archive scanned on 2/17/2009. (Photo by Gerald Martineau/The Washington Post via Getty Images)

Written by Wen Chen, Pei Liang and Xingya Wang

Introduction

Marvel Universe is a fictional universe which based on the American comic stories published by Marvel Entertainment. It consisting of thousands of separate universes and all the stories in this “multiverse” happened on Earth. Marvel Universe was created by Stan Lee, the most influential comic icon, with several artists in 1961. Stan Lee is one of the foundational architects of the superhero comics landscape, and he passed away on November 12, 2018 at the age of 95. We choose this Marvel Universe visualization as our group’s final project in honor of Stan Lee. We want to pay our respect to this leading superhero behind all of the marvel superheroes and his comic legend.

Inspiration

Networking visualizations

Started from our previous Marvel networking project, what we really wanted to improve is to make the graph easier to read and to make the characters more standout.  We found this visualization online, despite the fact that it focuses on much fewer characters that we have, we still like the entertaining and straightforward style it has, concerning the pop-culture nature it is.

https://www.tor.com/2015/07/20/the-marvel-cinematic-universe-has-more-than-enough-characters-for-captain-america-civil-war/comment-page-1/

Tableau Workbook of Marvel Cinematic Universe

https://public.tableau.com/views/MarvelCinematicUniverse_0/MCU?:embed=y&:display_count=yes&:toolbar=no:showVizHome=no

This workbook visualized the box office data for the superhero movies that produced by Marvel Studio. The movies are all based on characters that appear in American comic books published by Marvel comics. This visualization used consistent and uniformed blue color scheme combine with relationship networking and bar charts with different styles that gave as many valuable inspirations for our whole project and final poster.  

Materials

Tools

    • Excel: Helped us collecting the dataset with xlsx and csv formats.
    • Openfine: Used to clean and transform large sets of data.
    • Gephi 0.9.2: Created network and graph data.
    • Tableau: Utilized as the tool for visualizing the bulk data and creating dashboard.
    • Adobe Photoshop: Used for Improving our visualization results and making the poster.
  • Adobe Illustrator: Served as the tool for adding profile illustrated pictures on our networking graph.

Datasets

This dataset only provides connections among the superheroes in Marvel Universe, villains are not included.

We filtered out only the Marvel characters. The dataset include information about the character’s name, identity(secret/public), alignment, eye color, hair color, gender, status(living/deceased), appearances, first appearance, universe. This dataset provides information for characters regardless of their alignment.

  • The Superhero Ability Scoreboard

This dataset is about ten superheroes that have the most nodes from the networking dataset. It includes their fan-given scores on their abilities (intelligence, strength, speed, durality, combat). We collected the raw data from https://www.superherodb.com/characters/.

Method

The Marvel Networking Graph

For the superhero networking graph, we decided to go on with the work that Xingya had done for the Gephi lab.  

Visualization from Xingya’s last Marvel networking project

We wanted to give a general outlook of the superhero’s network in the sense of who usually hang out together or who is the “it” superhero, and we wanted it to be visually aesthetic, so we decided to keep using the Yifan layout. It has a beautiful circular layout and viewers can recognize different superhero groups and their relations by different colors. However, it was a little bit challenging to see the main characters in the original graph, because both the node size and the text are small and clustered.

What we did is to expand the size of the graph, further spread out the nodes, make the nodes bigger, and to use the “non overlap” function to avoid overlapping. Also, to make the centred characters more stand out and easier to be visually perceived, we decided to get rid out all the hero’s name labels, and use their profile pictures instead. We selected the most representative characters from each superhero groups, found their profile picture on the internet, and used Adobe Photoshop to put them on each nodes that they belonged to. This idea was inspired by an interactive map called Marvel Cinematic Universe we found on The Straits Times. We really liked the flattened affect that illustration images have provided, so we used some of their superhero profile pictures on our graph and found more similar images from the internet.

Marvel Cinematic Universe from The Straits Times

We also applied another set of palettes to different superhero groups to make it more visually pleasant. To make the graph more comprehensible, we also made a legend so people could easily understand what the different colors stand for.

Powergrid Comparison

Based on the study of the superheroes networking. We selected the top 20 most connected superheroes as subjects. And then we built our own database referred by information collected on the SHDb (https://www.superherodb.com/battle/) SHDb has data of side-by-side power comparison for all superheroes. The scores for all superheroes were voted by Marvel fans.

In terms of the powergrid, we compared “Intelligence”, ”Combat”, “Speed”, “Durability” and “Strength”. For each super power, we pulled out the winners and show their profile illustrations besides the graph, so that users can easily notice the winners.    

In the first iteration, we compared top 20 most connected superheroes’ powergrid. However, the feedback from users said the visualization turned out to be too much bars thus not visually clear enough, so we decided to narrow the database down to 10 top superheroes.

Demographic Visualization

In this part of the visualization, first, we used Excel to manage the dataset with xlsx format. Originally, there are over 30,000 records in the dataset which including 12 criterias and also included DC and other universes’ data. We utilized Openfire to clean the huge dataset, and only left the information of Marvel Universe. Meanwhile, we narrowed down to just Name, Identity, Alignment, Gender, and Year of first appearance these 5 criterias and 16,377 records. Quite different with the other two datasets in the project, this dataset covered the information of  both superheroes and villains in the Marvel Universe.

After data cleaning process, we visualized the statistics with Tableau. Our purpose is to make our visualization more versatile. Therefore, we created two pie charts, two bar charts as well as one area and line chart. We arranged the bar charts by comparison of gender and alignment, and identity and alignment, in order to make our visualization more interesting and insightful.

For the color scheme, we used red, blue and white to represent the spirit of America, just like what the Marvel Universe want to express in their comics.At the end, we used Adobe Photoshop made the title, inserted more numbers into one graph, also made the graphs more coordinate.

Result

The Networking Graph

From the final visualization, we can see that Captain America is the most centralized superhero in the Marvel Universe followed by Spiderman and Iron Man. The major superhero groups are Avengers, marked in purple, featured by Captain America, Iron Man etc; the Spiderman’s group, marked in pink, featured by Spiderman and Daredevil; the X-Men group, marked in blue featured by Wolverine, Professor X, the Beast, etc; the Fantastic Four group, marked in orange, featured by the Thing, Human Torch, etc; Thor’s group, marked in light blue; Doctor Strange’s group, marked in apricot; the Sub-Mariner group, marked in yellow as well as the New Warriors group, marked in grey. It’s not difficult to tell that superheroes in the Avengers group have more interactions with other superheroes, because the purple edges permeate the graph. At the meantime, the X-Men are more connected within their own group.

Demographic Visualization

Year of First Appearance

Area and trend chart of “Year of First Appearance”

The trend of year of Marvel characters’ first appearance had hit the bottom during 1950 to 1960. There are only 2 new characters were created in 1958. The peak appeared between 1989 to 1995, and the highest number of first appearance in a given year was 1993 which reached 554 characters. Probably, the reason caused this spike is the publishing of the new series of Uncanny X-Man, X-Man Unlimited as well as X-Men 2099. Since the beginning of the 21th century, the trend decreased again.

Alignment

Pie charts of Identity

Pie charts of Alignment

From these two pie charts we can see that more characters in Marvel Universe kept their identity in secret rather than reveal it to the public. At the same time, There are more supervillains than superheroes, and there are still 16.5% of characters didn’t pick up a side.

Gender vs. Alignment

Bar chart of “Gender vs. Alignment”

In Marvel Universe, the number of male character is 3 times bigger than female character, and 0.5% of the characters are agender. We can see from the chart that the number of male supervillains are more than male heroes. However, the number of female character is just reverse. The percentages of good and bad alignments of male characters are 30% and 55% respectfully, and these percentages for female characters are 49% and 30%.

Identity vs. Alignment:

Bar chart of Identity vs. Alignment

From the chart we can perceive that compare with good characters, the bad people are more likely to keep their villain identity in secret. At the same time, more good superheroes choose to neither keep their identity in secret nor reveal it to the public than the supervillains.

The Powergrid Comparison

Superhero Powergrid Comparison

From the (revised)chart, among the 10 most connected superheroes, we can see that the the best fighter are Captain America (we’re not surprised) and Wolverine; the smartest ones are Iron Man, Mr. Fantastic, Scarlet Witch and Vision; the toughest(durability) ones are Wolverine and Thing; the fastest one is Vision; the strongest ones are Iron Man and Thing. All together, we’ve seen each of Iron Man, Thing and Vision’s name twice, so we think they might be considered the most powerful superheroes according to the fans. Also, there’s a lot of purple in on the winner list of each ability, which means that the Avengers has gotten a great team!

This is the final poster:

Feedback and Revision

During the class discussion, we’ve received a lot of questions and suggestions and we’ve found them very valuable.

    • The subject of our datasets are different: two feature on the superheroes in Marvel Universe, one features on all the characters including superheroes, supervillains and those who stay neutral. However, our visualizations based on these datasets are all put together without any identifications. So it could be confusing for viewers to read.
    • We applied similar or identical colors in different graphs on different topic to make the poster visually consistent, however it can be misleading. For examples, the superhero intelligence chart was applied the same purple that marked the Avengers in the networking graph, so viewers would tend to associate this chart with the Avengers, when the avengers are in fact not relative at all.
    • We collected the ability information for 20 most connected superheroes, but it’s too clustered and difficult to read considering the space allowed on the poster.
  • We’ve found in the year of 1993, more characters than ever made their first appearance, but we didn’t explain why.

Based on these feedbacks, we made changes accordingly.

    • We divided the poster into to sections based on the subject of their datasets. One section is graphs about Marvel superheroes, the other one is graphs about all characters, regardless of their alignments.
    • We applied different colors to avoid color-overlapping among graphs on different topics.
    • We reduced the superhero ability charts from 20 rows to 10 rows.
  • We looked into Marvel in 1993 and tried to explain that why more characters were created in that specific year.  

This is the revised poster:


The link to the full size of the poster:

https://drive.google.com/open?id=1ZgD-KGWe8WRDPCuhGMuREg0T7ltv5QpH

Reflection

It’s been really enjoyable for our group doing this project and we are really satisfied with our final poster. Group work really is important because we can contribute what we do the best into this project. Amanda is skillful with Tableau, Xingya has explored more about Gephi, and Pei is the expert when it comes to the visual design. But each of all took on other tasks too, which might not necessarily be what we are good at or familiar with. Amanda did a lot of research on how we could interpret the characters demographic data in a refreshing and interesting way; Xingya learned to use Adobe Photoshop and Illustrator to put the profile pictures on the graph and make the legend; Pei collected and created the whole superhero ability dataset all by herself.

Our goal for this project is to expand our knowledge beyond the cinematic Marvel universe and develop a new perspective for the comic Marvel universe. In a larger sense, we believe I have achieved this goal. We learned a lot more characters and their relations. Before, we didn’t even know the existence of, for example, the Sub-Mariner, let alone the fact that he serves closely to Avengers and Fantastic Four. But through this project, we’ve learned about this and people can see it on the poster, that the Sub-Mariner stands among Avengers.

This could be a very huge project in the context of various social movements, like gender and race equality. We also think it would be really interesting to look deeper into the development of Marvel, its ups and downs, its competition with DC, its relationships with Disney and Fox, and from there, maybe we can see if those factors have made impact on the characters(number of new character, their gender, race, and abilities) they created through the years. If we had more time, we would like to make graphs on, for instance, gender, and see how many new characters in each gender have made debut through the years, and see if it has any associations with any social movements. Or we can make a chart about the the number of new characters that DC has created during the years, together with the chart we have now, and see if there’s any associations with the success of their company development.