{"id":12073,"date":"2018-12-14T22:49:38","date_gmt":"2018-12-15T03:49:38","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=12073"},"modified":"2019-01-10T18:49:19","modified_gmt":"2019-01-10T23:49:19","slug":"marvel-universe-visualization","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/projects\/marvel-universe-visualization\/","title":{"rendered":"Marvel Universe Visualization"},"content":{"rendered":"<h2><\/h2>\n<div id=\"attachment_12052\" style=\"width: 880px\" class=\"wp-caption alignleft\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12052\" class=\"wp-image-12052 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/stanlee.jpg?resize=840%2C554\" alt=\"\" width=\"840\" height=\"554\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/stanlee.jpg?w=880&amp;ssl=1 880w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/stanlee.jpg?resize=300%2C198&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/stanlee.jpg?resize=768%2C506&amp;ssl=1 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12052\" class=\"wp-caption-text\">UNKNOWN LOCATION, DC &#8211; FEBRUARY 17: Marvel Comics Publisher, Stan Lee, poses with a book of &#8220;Spider Man&#8221; comics which he created along with comics on the &#8220;Hulk&#8221; and others. Photo from Washington Post Archive scanned on 2\/17\/2009. (Photo by Gerald Martineau\/The Washington Post via Getty Images)<\/p><\/div>\n<p style=\"text-align: right;\"><em>Written by Wen Chen, Pei Liang and Xingya Wang<\/em><\/p>\n<h1><\/h1>\n<h1><\/h1>\n<h1><span style=\"font-weight: 400;\">Introduction<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">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 \u201cmultiverse\u201d 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\u2019s 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.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Inspiration<\/span><\/h1>\n<h3><strong>Networking visualizations<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">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. \u00a0We 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.<\/span><\/p>\n<div id=\"attachment_12074\" style=\"width: 740px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12074\" class=\"wp-image-12074 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/MCU-infographic.jpg?resize=740%2C461\" alt=\"\" width=\"740\" height=\"461\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/MCU-infographic.jpg?w=740&amp;ssl=1 740w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/MCU-infographic.jpg?resize=300%2C187&amp;ssl=1 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><p id=\"caption-attachment-12074\" class=\"wp-caption-text\">https:\/\/www.tor.com\/2015\/07\/20\/the-marvel-cinematic-universe-has-more-than-enough-characters-for-captain-america-civil-war\/comment-page-1\/<\/p><\/div>\n<h3><strong>Tableau Workbook of Marvel Cinematic Universe<\/strong><\/h3>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12051 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.24-PM.png?resize=840%2C523\" alt=\"\" width=\"840\" height=\"523\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.24-PM.png?w=908&amp;ssl=1 908w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.24-PM.png?resize=300%2C187&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.24-PM.png?resize=768%2C478&amp;ssl=1 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/p>\n<div id=\"attachment_12050\" style=\"width: 926px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12050\" class=\"wp-image-12050 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.05-PM.png?resize=840%2C357\" alt=\"\" width=\"840\" height=\"357\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.05-PM.png?w=926&amp;ssl=1 926w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.05-PM.png?resize=300%2C127&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-2.39.05-PM.png?resize=768%2C326&amp;ssl=1 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12050\" class=\"wp-caption-text\">https:\/\/public.tableau.com\/views\/MarvelCinematicUniverse_0\/MCU?:embed=y&amp;:display_count=yes&amp;:toolbar=no:showVizHome=no<\/p><\/div>\n<p><span style=\"font-weight: 400;\">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. \u00a0<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Materials<\/span><\/h1>\n<h3><strong>Tools<\/strong><\/h3>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Excel: Helped us collecting the dataset with xlsx and csv formats.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Openfine: Used to clean and transform large sets of data.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Gephi 0.9.2: Created network and graph data.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tableau: Utilized as the tool for visualizing the bulk data and creating dashboard.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Adobe Photoshop: Used for Improving our visualization results and making the poster. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Adobe Illustrator: Served as the tool for adding profile illustrated pictures on our networking graph.<\/span><\/li>\n<\/ul>\n<h3><strong>Datasets<\/strong><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.kaggle.com\/csanhueza\/the-marvel-universe-social-network\"><span style=\"font-weight: 400;\">The Marvel Universe Social Network<\/span><\/a><span style=\"font-weight: 400;\"> Dataset from <\/span><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.kaggle.com\/\">Kaggle<\/a><\/span><\/li>\n<\/ul>\n<p>This dataset only provides connections among the superheroes in Marvel Universe, villains are not included.<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.kaggle.com\/dannielr\/marvel-superheroes#marvel_dc_characters.csv\"><span style=\"font-weight: 400;\">The Marvel and DC Characters Dataset<\/span><\/a><span style=\"font-weight: 400;\"> from <\/span><a href=\"https:\/\/www.kaggle.com\/\"><span style=\"font-weight: 400;\">Kaggle<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We filtered out only the Marvel characters. The dataset include information about the character\u2019s 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.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The Superhero Ability Scoreboard <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">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 <\/span><a href=\"https:\/\/www.superherodb.com\/characters\/\"><span style=\"font-weight: 400;\">https:\/\/www.superherodb.com\/characters\/<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Method<\/span><\/h1>\n<h3><strong>The Marvel Networking Graph<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">For the superhero networking graph, we decided to go on with the work that Xingya had done for the Gephi lab. \u00a0<\/span><\/p>\n<div id=\"attachment_12075\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12075\" class=\"wp-image-12075 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/final.png?resize=840%2C840\" alt=\"\" width=\"840\" height=\"840\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/final.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/final.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/final.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/final.png?resize=768%2C768&amp;ssl=1 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12075\" class=\"wp-caption-text\">Visualization from Xingya&#8217;s last Marvel networking project<\/p><\/div>\n<p><span style=\"font-weight: 400;\">We wanted to give a general outlook of the superhero\u2019s network in the sense of who usually hang out together or who is the \u201cit\u201d 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. <\/span><span style=\"font-weight: 400;\">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. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">What we did is to expand the size of the graph, further spread out the nodes, make the nodes bigger, and to use the \u201cnon overlap\u201d 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\u2019s 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 <\/span><a href=\"https:\/\/graphics.straitstimes.com\/STI\/STIMEDIA\/Interactives\/2018\/04\/marvel-cinematic-universe-whos-who-interactive\/index.html\"><span style=\"font-weight: 400;\">Marvel Cinematic Universe<\/span><\/a><span style=\"font-weight: 400;\"> we found on <\/span><a href=\"https:\/\/www.straitstimes.com\/global\"><span style=\"font-weight: 400;\">The Straits Times<\/span><\/a><span style=\"font-weight: 400;\">. 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.<\/span><\/p>\n<div id=\"attachment_12077\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12077\" class=\"wp-image-12077 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.21.40-PM.png?resize=840%2C425\" alt=\"\" width=\"840\" height=\"425\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.21.40-PM.png?w=1434&amp;ssl=1 1434w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.21.40-PM.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.21.40-PM.png?resize=768%2C389&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.21.40-PM.png?resize=1024%2C518&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12077\" class=\"wp-caption-text\">Marvel Cinematic Universe from The Straits Times<\/p><\/div>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<h3><\/h3>\n<h3><strong>Powergrid Comparison<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">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 (<\/span><a href=\"https:\/\/www.superherodb.com\/battle\/\"><span style=\"font-weight: 400;\">https:\/\/www.superherodb.com\/battle\/<\/span><\/a><span style=\"font-weight: 400;\">) SHDb has data of side-by-side power comparison for all superheroes. The scores for all superheroes were voted by Marvel fans.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In terms of the powergrid, we compared \u201cIntelligence\u201d, \u201dCombat\u201d, \u201cSpeed\u201d, \u201cDurability\u201d and \u201cStrength\u201d. 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. \u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the first iteration, we compared top 20 most connected superheroes\u2019 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. <\/span><\/p>\n<h3><\/h3>\n<h3><\/h3>\n<h3><strong>Demographic Visualization <\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">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\u2019 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 \u00a0both superheroes and villains in the Marvel Universe.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">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. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">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. <\/span><\/p>\n<h1><\/h1>\n<h1><\/h1>\n<h1><span style=\"font-weight: 400;\">Result<\/span><\/h1>\n<h3><strong>The Networking Graph<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12089 size-full\" style=\"font-size: 1.0625rem;\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/1280_FinalMarvelGephi-e1544845113967.png?resize=840%2C840\" alt=\"\" width=\"840\" height=\"840\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/1280_FinalMarvelGephi-e1544845113967.png?w=1260&amp;ssl=1 1260w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/1280_FinalMarvelGephi-e1544845113967.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/1280_FinalMarvelGephi-e1544845113967.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/1280_FinalMarvelGephi-e1544845113967.png?resize=768%2C768&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/1280_FinalMarvelGephi-e1544845113967.png?resize=1024%2C1024&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">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\u2019s 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\u2019s group, marked in light blue; Doctor Strange\u2019s group, marked in apricot; the Sub-Mariner group, marked in yellow as well as the New Warriors group, marked in grey. It\u2019s 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.<\/span><\/p>\n<h3><\/h3>\n<h3><strong>Demographic Visualization<\/strong><\/h3>\n<p><strong>Year of First Appearance<\/strong><\/p>\n<div id=\"attachment_12055\" style=\"width: 1053px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12055\" class=\"wp-image-12055 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.17.03-PM.png?resize=840%2C581\" alt=\"\" width=\"840\" height=\"581\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.17.03-PM.png?w=1053&amp;ssl=1 1053w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.17.03-PM.png?resize=300%2C207&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.17.03-PM.png?resize=768%2C531&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.17.03-PM.png?resize=1024%2C708&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12055\" class=\"wp-caption-text\">Area and trend chart of \u201cYear of First Appearance\u201d<\/p><\/div>\n<p><span style=\"font-weight: 400;\">The trend of year of Marvel characters\u2019 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.<\/span><\/p>\n<p><strong>Alignment<\/strong><\/p>\n<div id=\"attachment_12053\" style=\"width: 496px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12053\" class=\"wp-image-12053 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Indentity.png?resize=496%2C402\" alt=\"\" width=\"496\" height=\"402\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Indentity.png?w=496&amp;ssl=1 496w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Indentity.png?resize=300%2C243&amp;ssl=1 300w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><p id=\"caption-attachment-12053\" class=\"wp-caption-text\">Pie charts of Identity<\/p><\/div>\n<div id=\"attachment_12054\" style=\"width: 511px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12054\" class=\"wp-image-12054 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Alignment.png?resize=511%2C402\" alt=\"\" width=\"511\" height=\"402\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Alignment.png?w=511&amp;ssl=1 511w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Alignment.png?resize=300%2C236&amp;ssl=1 300w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><p id=\"caption-attachment-12054\" class=\"wp-caption-text\">Pie charts of Alignment<\/p><\/div>\n<p><span style=\"font-weight: 400;\">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\u2019t pick up a side.<\/span><\/p>\n<p><strong>Gender vs. Alignment<\/strong><\/p>\n<div id=\"attachment_12056\" style=\"width: 1130px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12056\" class=\"wp-image-12056 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.42.24-PM.png?resize=840%2C634\" alt=\"\" width=\"840\" height=\"634\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.42.24-PM.png?w=1130&amp;ssl=1 1130w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.42.24-PM.png?resize=300%2C226&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.42.24-PM.png?resize=768%2C580&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.42.24-PM.png?resize=1024%2C773&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12056\" class=\"wp-caption-text\"><strong>Bar chart of \u201cGender vs. Alignment\u201d<\/strong><\/p><\/div>\n<p><span style=\"font-weight: 400;\">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%.<\/span><\/p>\n<p><strong>Identity vs. Alignment:<\/strong><\/p>\n<div id=\"attachment_12057\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12057\" class=\"wp-image-12057 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.43.23-PM.png?resize=840%2C317\" alt=\"\" width=\"840\" height=\"317\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.43.23-PM.png?w=1362&amp;ssl=1 1362w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.43.23-PM.png?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.43.23-PM.png?resize=768%2C290&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-4.43.23-PM.png?resize=1024%2C386&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-12057\" class=\"wp-caption-text\">Bar chart of Identity vs. Alignment<\/p><\/div>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<h3><b>The Powergrid Comparison<\/b><\/h3>\n<div id=\"attachment_12083\" style=\"width: 611px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12083\" class=\"wp-image-12083 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.30.46-PM.png?resize=611%2C772\" alt=\"\" width=\"611\" height=\"772\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.30.46-PM.png?w=611&amp;ssl=1 611w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.30.46-PM.png?resize=237%2C300&amp;ssl=1 237w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><p id=\"caption-attachment-12083\" class=\"wp-caption-text\">Superhero Powergrid Comparison<\/p><\/div>\n<p><span style=\"font-weight: 400;\">From the (revised)chart, among the 10 most connected superheroes, we can see that the the best fighter are Captain America (we\u2019re 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\u2019ve seen each of Iron Man, Thing and Vision\u2019s name twice, so we think they might be considered the most powerful superheroes according to the fans. Also, there\u2019s a lot of purple in on the winner list of each ability, which means that the Avengers has gotten a great team!<\/span><\/p>\n<h3><\/h3>\n<h3><strong>This is the final poster:<\/strong><\/h3>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12087 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.34.21-PM.png?resize=650%2C899\" alt=\"\" width=\"650\" height=\"899\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.34.21-PM.png?w=650&amp;ssl=1 650w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.34.21-PM.png?resize=217%2C300&amp;ssl=1 217w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<h1><span style=\"font-weight: 400;\">Feedback and Revision<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">During the class discussion, we\u2019ve received a lot of questions and suggestions and we\u2019ve found them very valuable. <\/span><\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We collected the ability information for 20 most connected superheroes, but it\u2019s too clustered and difficult to read considering the space allowed on the poster.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We\u2019ve found in the year of 1993, more characters than ever made their first appearance, but we didn\u2019t explain why.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Based on these feedbacks, we made changes accordingly.<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We applied different colors to avoid color-overlapping among graphs on different topics. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We reduced the superhero ability charts from 20 rows to 10 rows.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We looked into Marvel in 1993 and tried to explain that why more characters were created in that specific year. \u00a0<\/span><\/li>\n<\/ul>\n<h3><\/h3>\n<h3><b>This is the revised poster:<\/b><\/h3>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12088 size-full\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.35.47-PM.png?resize=840%2C525\" alt=\"\" width=\"840\" height=\"525\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.35.47-PM.png?w=1440&amp;ssl=1 1440w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.35.47-PM.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.35.47-PM.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.35.47-PM.png?resize=1024%2C640&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><br \/>\n<span style=\"font-weight: 400;\">The link to the full size of the poster: <\/span><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=1ZgD-KGWe8WRDPCuhGMuREg0T7ltv5QpH\"><span style=\"font-weight: 400;\">https:\/\/drive.google.com\/open?id=1ZgD-KGWe8WRDPCuhGMuREg0T7ltv5QpH<\/span><\/a><\/p>\n<h1><\/h1>\n<h1><\/h1>\n<h1><span style=\"font-weight: 400;\">Reflection<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">It\u2019s 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. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">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\u2019t 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\u2019ve learned about this and people can see it on the poster, that the Sub-Mariner stands among Avengers. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">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\u2019s any associations with the success of their company development. \u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u201cmultiverse\u201d happened on Earth. Marvel Universe was created by Stan Lee, the most influential comic&hellip;<\/p>\n","protected":false},"author":519,"featured_media":12087,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[150],"tags":[],"coauthors":[338,329,337],"class_list":["post-12073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-projects"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Screen-Shot-2018-12-14-at-10.34.21-PM.png?fit=650%2C899&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-38J","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/12073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/users\/519"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=12073"}],"version-history":[{"count":8,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/12073\/revisions"}],"predecessor-version":[{"id":12377,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/12073\/revisions\/12377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/12087"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=12073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=12073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=12073"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=12073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}