{"id":33553,"date":"2022-07-05T00:02:27","date_gmt":"2022-07-05T04:02:27","guid":{"rendered":"https:\/\/studentwork.prattsi.org\/infovis\/?p=33553"},"modified":"2022-07-05T00:02:30","modified_gmt":"2022-07-05T04:02:30","slug":"gotta-connect-em-all-a-network-visualization-for-pokemon","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/gotta-connect-em-all-a-network-visualization-for-pokemon\/","title":{"rendered":"Gotta Connect ‘Em All – A Network Visualization for Pok\u00e9mon"},"content":{"rendered":"\n

Introduction<\/h3>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

With more than 25 years of history and loved by many generations of children, Pok\u00e9mon is a famous Japanese media franchise that focuses on fictional creatures called “Pok\u00e9mon”. “Pok\u00e9mon” started as video games on the handheld console Game Boy with the goal to catch, train and battle using these Pok\u00e9mon. It started out with 151 species and as of today, the Pok\u00e9mon company has created more than 900 different species of Pok\u00e9mon. Although each of these Pok\u00e9mon are very unique and all have different characteristics, they also share many interesting attributes that we can look into using a network visualization.<\/p>\n\n\n\n

Preparing Data<\/h3>\n\n\n\n

For this study, we are going to use a dataset that was found on Kaggle.com<\/a>. This dataset was scrapped from a well-known website http:\/\/serebii.net\/<\/a>, that has a very complete information of all the Pok\u00e9mon exists. However, the dataset was created 5 years ago, so the newest generation of Pok\u00e9mon with index number after 800 was not added. <\/p>\n\n\n\n

About the Dataset & Cleaning Data<\/h4>\n\n\n\n
\"\"
Figure 1: A preview of the dataset downloaded from Kaggle.com<\/figcaption><\/figure>\n\n\n\n

The dataset consist of all the Pok\u00e9mon from generation 1 to 7, and has a total of 41 columns for each of the Pok\u00e9mon. If we take a closer look, we can see that there are actually some columns that we can clean up and not very helpful for us to create the visualization later on. <\/p>\n\n\n\n

Abilities<\/h5>\n\n\n\n

Each Pok\u00e9mon can have abilities, and each Pok\u00e9mon can only have up to 3 abilities (2 abilities and 1 hidden ability). Column 1 of this dataset shows what kind of abilities each Pok\u00e9mon can have. While scrolling through this dataset, I found out that there are some rows that have more than 3 abilities, which got me a little confused. It turns out that those rows of Pok\u00e9mon actually have a different form, known as the Alolan form, that changes the possible abilities that the Pok\u00e9mon can have. For example, #19 Rattata and its evolution #20 Raticate have a total of 6 abilities (Run Away, Guts, Hustle, Gluttony, Hustle, Thick Fat) on column 1. In this study, we will only focus on the main two abilities to simplify the dataset, which is the first two abilities of each row, each ability will be separated into it’s own column and anything after the first two abilities will be deleted from the dataset.<\/p>\n\n\n\n

\"\"
Figure 2: Normal Rattata (left) and Alolan Rattata (right)<\/figcaption><\/figure><\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
Type weakness\/advantage<\/h5>\n\n\n\n

There are total of 18 types for Pok\u00e9mon, and each Pok\u00e9mon can have up to 2 types at the same time. The types are identified as followed:<\/p>\n\n\n\n

\"\"
Figure 3: Pokemon types<\/figcaption><\/figure>\n\n\n\n

Each of these types have an advantage\/weakness against another type(s), and therefore when Pok\u00e9mon battle against each other, their attack points could be 2 times, 1 time or 1\/2 times the original attack point. In the dataset from column 2 to column 19, it’s all about the calculation of the attack point against different types. However, these columns are not as useful in a network visualization as we are mostly focusing on categorical data, such as the actual types of the Pok\u00e9mon, so we will be removing these columns.<\/p>\n\n\n\n

Statistics and other non important columns<\/h5>\n\n\n\n

Each Pok\u00e9mon has basic statistics such as Attack, Defense, Weight, Height, Speed, etc. These are all numerical data and these values can be very different from Pok\u00e9mon to Pok\u00e9mon. Since this study we are only focusing on making a network visualization, these columns will be deleted. These columns are most likely better to be represented with bar graphs or scatter plots to see the distribution of the statistics of the Pok\u00e9mon.<\/p>\n\n\n\n

Generation & isLegendary<\/h5>\n\n\n\n

Finally we have the generation column and the is_Legendary column. Generation column are represented with number 1 to 7. These could be somewhat confusing, so these values are being renamed as their corresponding region names: 1 – Kanto, 2 – Johto, 3 – Hoenn, 4 – Sinnoh, 5 – Unova, 6 – Kalos, 7 – Alola.<\/p>\n\n\n\n

The isLegendary column indicates whether the Pok\u00e9mon is a legendary Pok\u00e9mon or not. Most of the Pok\u00e9mon are not legendary, but we will rename the value 1 and 0 with “Yes” or “No” or better understanding.<\/p>\n\n\n\n

As a result, here is a preview of the final sets of columns that we are going to use for this study:<\/p>\n\n\n\n

\"\"
Figure 4: Cleaned data<\/figcaption><\/figure>\n\n\n\n

Transforming Data using R<\/h4>\n\n\n\n

Now we have to prepare the dataset so that we can get a format that the software that we are using to understand the dataset. For this task we will be using R with R Studio. This allow us to transform the above 800 rows of data into a list of “Edges” of the network graph. An edge is the connection between two nodes, and each nodes is basically a value of a cell in the above table. Basically, we have to use R to generate the list of edges for us to get all the connections between all the possible values exists in this dataset.<\/p>\n\n\n\n

\"How
Figure5: A sample diagram for a simple network graph<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Figure6: A preview of using RStudio<\/figcaption><\/figure>\n\n\n\n
\"\"
Figure 7: Generated result of list of edges<\/figcaption><\/figure><\/div>\n\n\n\n

Graphing the Dataset<\/h3>\n\n\n\n

To graph the dataset, we will be using a software called Gephi. Gephi is a simple but powerful software that allow users to generate network visualization. To create a new visualization, we would first have to prepare the data like we did in the above section, then imported into Gephi to automatically generate the network graph.<\/p>\n\n\n\n

At first, when you import the data into Gephi it probably doesn’t make any sense and you would probably see something similar to this.<\/p>\n\n\n\n

\"\"
Figure 8: Gephi preview<\/figcaption><\/figure>\n\n\n\n

So we would have to see the layout using one of the algorithms provided, in this case we will use Force Atlas and make the Repulsion strength to be 450000.0 since the amount of data we have is huge.<\/p>\n\n\n\n

Another important step that I found out have to do was that to partition the type of nodes that we have furthermore, it was actually more helpful if we add another column into the Nodes list, generated inside Gephi. This way we would be able to colorize each of the node so that all the Pok\u00e9mon nodes could be 1 color, all the abilities could be 1 color, etc. <\/p>\n\n\n\n

At first, there was actually another type of node that we had. If we look closely back in the original and cleaned dataset, we could see that there was actually a column called “Classification”.<\/p>\n\n\n\n

\"\"
Figure 9: Cleaned dataset<\/figcaption><\/figure>\n\n\n\n

However, after we graph the data out, I realized that the graph connections got very complicated. Most of these classification are very unique to each Pok\u00e9mon and it’s only the same if the Pok\u00e9mon has an evolution. For example, Bulbasaur evolves to Ivysaur, and they are both classified as “Seed Pok\u00e9mon”. It’s very uncommon to have other Pok\u00e9mon that also have the same classification but not in the same evolution family.<\/p>\n\n\n\n

Here is a preview of the typed nodes, with a label column added as well to later on allow the network graph to show labels.<\/p>\n\n\n\n

\"\"
Figure 10: Enhanced Nodes list<\/figcaption><\/figure>\n\n\n\n

Here is a snapshot of the graph generated after applying layout algorithm, partitioning (typing) the nodes and also resizing the labels and nodes to corresponds with the degree (how many times that node is connected with another node).<\/p>\n\n\n\n

\"\"
Figure 11: A preview of using Gephi to create network graph<\/figcaption><\/figure>\n\n\n\n

At first the graph was all in grey color, but we would want to distinguish what kind of nodes we are looking at. So I picked a pinkish red for each of the Pok\u00e9mon and light blue for the abilities. For types I used light green because it’s easier to see within the sea of red and blue circles and as a “background” I used yellow to orange to red gradient scale for the degree of the edges (how many connections the node have). For generation (regions) of the Pok\u00e9mon, I used dark green because I thought it is the closest thing to grass color whenever I think of a region. Finally, for legendary Pok\u00e9mon group, I used yellow\/gold color for the node to make it stands out a little more among the smaller circles.<\/p>\n\n\n\n

Final Results<\/h3>\n\n\n\n
\"\"
Figure 12: final result<\/figcaption><\/figure>\n\n\n\n

Above is a final version of the network graph. First with all the regions group to the center as they have the most impactful classification for all the Pok\u00e9mon. We can see that Unova region Pok\u00e9mon have the most number of Pok\u00e9mon and therefore being the biggest circle. We can also see that all the types are being grouped around the regions and if we look closely, we can see that the individual Pok\u00e9mon are grouped nicely according to their types around the type nodes. We can also interestingly see that there are actually a lot of Pok\u00e9mon that share similar abilities according to their type.<\/p>\n\n\n\n

\"\"
Figure 13: A zoomed in version of the final network graph<\/figcaption><\/figure>\n\n\n\n

If we also look at the color of the edges, we can also see that which abilities are the most common among each type. For example, a lot of the grass-type Pok\u00e9mon has Chlorophyll and Overgrow abilities, and their lines are definitely more red compare to the other edges.<\/p>\n\n\n\n

\"\"
Figure 14: Zoomed in version of final result graph on grass type<\/figcaption><\/figure>\n\n\n\n

Conclusion & Future Direction<\/h3>\n\n\n\n

This was definitely a very interesting dataset for to play with and I learned a lot about not just making network graphs but also can see that there are so many connections between all the Pok\u00e9mon species. There are definitely a couple things that I would like to improve and perhaps look into further. <\/p>\n\n\n\n

First, I still am not very satisfied with the color choice here because it looks like a diagram full of negative and positive ions you would see on a chemistry textbook. If possible, I think I would want to use actual Pok\u00e9mon images instead of the little circles with labels. For types, I want to use the color that were used in the games (figure 3) so that it is easier to read.<\/p>\n\n\n\n

Next, having too many attributes can cause the graph to be very confusing. As we have type, region, abilities and Pok\u00e9mon all in one graph, it’s very difficult to read until you zoom in into each section. If I were to redo this, I would probably separate them into different section so that it’s easier to read.<\/p>\n\n\n\n

Interactive graph in a report would be much better than just static images. For this study, I realized that the preview was interactive and you can hover on each node and see what it is connected to, but the final result is not possible if you generate it as SVG\/PDF\/JPEG. I later on found out that it is actually possible to embed the interactive version using SigmaJS<\/a>. <\/p>\n\n\n\n

Finally, there are many numeric value columns that we omitted during this study. There are definitely more interesting findings that we can see with those numerical data, so next time I hope I can find some ways to put them into visualizations and see what kind of results we can see.<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction With more than 25 years of history and loved by many generations of children, Pok\u00e9mon is a famous Japanese media franchise that focuses on fictional creatures called “Pok\u00e9mon”. “Pok\u00e9mon” started as video games on the handheld console Game Boy with the goal to catch, train and battle using these Pok\u00e9mon. It started out with…<\/p>\n","protected":false},"author":4009,"featured_media":33554,"comment_status":"open","ping_status":"open","sticky":false,"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":[149,342,1],"tags":[],"coauthors":[1791],"class_list":["post-33553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-networks","category-visualization"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/07\/simple-classic-pokeball-qe1bjytesbgmcgpb.jpeg?fit=900%2C563&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-8Jb","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/33553","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\/4009"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=33553"}],"version-history":[{"count":2,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/33553\/revisions"}],"predecessor-version":[{"id":33581,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/33553\/revisions\/33581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/33554"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=33553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=33553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=33553"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=33553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}