{"id":4777,"date":"2016-06-21T18:21:10","date_gmt":"2016-06-21T22:21:10","guid":{"rendered":"http:\/\/research.prattsils.org\/?p=4777"},"modified":"2016-06-21T18:21:10","modified_gmt":"2016-06-21T22:21:10","slug":"android-netrunner-visualizing-decks","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/android-netrunner-visualizing-decks\/","title":{"rendered":"Android Netrunner: Visualizing Decks"},"content":{"rendered":"<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/06\/runnerWhiteAnnotated-1.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4803\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/06\/runnerWhiteAnnotated-1-940x940.png?resize=720%2C720\" alt=\"runnerWhiteAnnotated (1)\" width=\"720\" height=\"720\" \/><\/a><\/p>\n<p><b>INTRODUCTION<\/b><\/p>\n<p><span style=\"font-weight: 400\">After playing Android Netrunner a handful of times, I was interested to visualize the network between cards. Netrunner is a two player, asymmetrical, deck-building card game where players first choose a side (Runner or Corporation), then build a deck from available cards. For this visualization I focused solely on the Runner side which has three factions (shaper, criminal, and anarch) as well as neutral cards. There are around 400 unique Runner cards and each deck has approximately 17 unique cards. <\/span><\/p>\n<p><span style=\"font-weight: 400\">More experienced players have described their love of the game due to card interactions being well balanced and the fact that there are \u201cno bad cards.\u201d Looking through online comments for certain cards, there are some that are considered essential for any runner deck. I was interested to see if these claims were actually true and if there are cards that are core to a majority of decks. <\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400\">Will you see a central cluster of \u201cessential\u201d cards when networking popular Android Netrunner decks?<\/span><\/li>\n<\/ul>\n<p><b>INSPIRATION<\/b><\/p>\n<p><span style=\"font-weight: 400\">This <\/span><a href=\"http:\/\/www.visualizingmagic.com\/modern-in-eu-us-metagame-visualization\/\" target=\"_blank\"><b>first<\/b><\/a> <span style=\"font-weight: 400\">visualization shows statistics on the Magic: the Gathering metagame for European players versus American players during the Modern Masters Weekend in May 2015. Metagame refers to which cards become popular amongst different communities based on the players and style of play in those communities. Android Netrunner and Magic: the Gathering share qualities as deck-building games and in some aspects of gameplay. The visualization shows a lot of facts effectively but does not go into depth about how cards pair together. <\/span><\/p>\n<p><span style=\"font-weight: 400\">The <\/span><a href=\"https:\/\/mitchdaniels.github.io\/netrunner-universe\/runner.html\" target=\"_blank\"><b>second<\/b><\/a> <span style=\"font-weight: 400\">example is another Android Netrunner visualization, which graphs all decklists available on NetrunnerDB into one Gephi visualization. The author does not distinguish weight or degree of nodes or edges in any way, but relies on node\u2019s positioning to show connectedness. While there are cards which group in the center as the most common cards, the visualization does not highlight these in any obvious way to a viewer, which makes it difficult to immediately find the most frequently used cards.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The <\/span><a href=\"http:\/\/chrisbeaumont.org\/holdem_odds\/#8H+QS\" target=\"_blank\"><b>third<\/b><\/a> <span style=\"font-weight: 400\">visualization shows the likeliness of one hand in Texas Hold \u2018Em to beat any combination of opponents hands. I\u2019ve included this as Richard Garfield considered the bluffing aspect of poker as an inspiration when designing Netrunner. Poker differs from Android Netrunner in its mathematical precision over what is a winning hand, whereas Android Netrunner is much more nuanced in what combinations of cards are <\/span><i><span style=\"font-weight: 400\">winners<\/span><\/i><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><b>METHODS<\/b><\/p>\n<p><b>Data<\/b><\/p>\n<p><span style=\"font-weight: 400\">I wanted to begin with a small sample size to make a test network. I chose to use the popular Android Netrunner resource <\/span><a href=\"https:\/\/netrunnerdb.com\/\"><span style=\"font-weight: 400\">netrunnerDB<\/span><\/a><span style=\"font-weight: 400\"> and their public API to gather deck data. I used the Python request module to run queries through netrunnerDB\u2019s API to pull all cards in each of the top 10 runner decks based on likes. Python\u2019s combination function helped create the edge table representing each time any two cards were in the same deck. The netrunnerDB API also allowed me to add extra details to my node table like faction and type for each card. This gave me more options for comparison and visualization in Gephi. <\/span><\/p>\n<p><b>Gephi<\/b><\/p>\n<p><span style=\"font-weight: 400\">I wanted a visualization that would clearly illustrate the network interaction between cards, answering the basic research question using layout, size, and color to compare relationships. I gravitated to two layout styles initially: Force Atlas 2 and Fruchterman-Reingold. While Fruchterman produce a well-rounded shape, I decided that Force Atlas 2 better distinguished the outliers from the more common cards in the core of the visualization. There are a few cards that remain fairly centered as they appeared in the most decks and also had the most connections to other cards. I wanted these nodes to be differentiated visually in an obvious fashion, like using size to correspond to frequency of a card&#8217;s appearance in any deck and thickness of edges corresponds the weight of each connection between any two cards. <\/span><\/p>\n<p><span style=\"font-weight: 400\">I experimented with three ways to use color to distinguish nodes: card faction, card type, &amp; modularity. The visualizations colored based on faction seemed to be the most useful so I used the colors that match those in the game; fans would also immediately recognize this meaning. I also highlighted the Identity cards with a brighter shade of its faction color and annotated them on my final image. One, and only one, identity card is required in every deck so it was important to make these unique cards stand out in the visualization. <\/span><\/p>\n<div id=\"attachment_4799\" style=\"width: 620px\" class=\"wp-caption alignright\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/06\/runnerBlackAnnotated.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4799\" class=\"wp-image-4799 size-medium\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/06\/runnerBlackAnnotated-620x620.png?resize=620%2C620\" alt=\"runnerBlackAnnotated\" width=\"620\" height=\"620\" \/><\/a><p id=\"caption-attachment-4799\" class=\"wp-caption-text\">NetrunnerDB: Top Ten Decks Network<\/p><\/div>\n<p><span style=\"font-weight: 400\">I created two final visualizations, one static and one interactive. For the static visualizations I wanted an image that tells a complete story even when zoomed out. I used label size to show frequency of cards, made nodes transparent, and colored edges a mix between its two node colors. This image is visually resonant and uses color to show how factions interact between decks. The large labels also make the visualization easier to read at any zoom level. The core cards pop out from the visualization, but they still maintain their original faction colors as a colored text outline.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\"> The <a href=\"http:\/\/joshuadull.com\/netrunner3\/network\/\" target=\"_blank\">web interactive visualization<\/a>, exported through sigma.js, has node size correspond to card frequency, less obvious labels, and grayscale edges. In the web format the labels and colors do not have to be as obvious since the users can click around to manipulate and expand upon the display.<\/span><\/p>\n<p><b>RESULTS &amp; DISCUSSION<\/b><\/p>\n<p><span style=\"font-weight: 400\">After finishing networking in Gephi, I was left with a static image of my network, on both a black and a white background. I also exported an interactive version of my network, colored by faction, using sigma.js. Each of these uses layout to illustrate groupings of cards; you can easily see which cards are commonly used, which lie in the center, and see groupings of decks on the outer edges of the visualization. These decks also cluster around identities and I can start to see which identities cluster centrally, mostly Whizzard. Factions also tend to cluster together, which is appropriate to the rules of the game which limits the number of out of faction cards in each deck. You can see a few cards that lie clearly surrounded by cards from another faction, such as Gorman Drip v1 and Chakana nestled in the top right anarch corner. This is called <\/span><i><span style=\"font-weight: 400\">splashing, <\/span><\/i><span style=\"font-weight: 400\">when you use influence points to add cards from other factions to your deck. \u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Having node &amp; label size correspond to frequency of use makes the most common cards, like <\/span><i><span style=\"font-weight: 400\">Sure Gamble <\/span><\/i><span style=\"font-weight: 400\">and <\/span><i><span style=\"font-weight: 400\">Plascrete Carapace<\/span><\/i><span style=\"font-weight: 400\">,<\/span> <span style=\"font-weight: 400\">stand out immediately. <\/span><i><span style=\"font-weight: 400\">Sure Gamble<\/span><\/i><span style=\"font-weight: 400\"> allows a player to gain credits and <\/span><i><span style=\"font-weight: 400\">Plascrete Carapace<\/span><\/i><span style=\"font-weight: 400\"> can prevent the player from taking damage. Each of these neutral cards provides one necessary aspect to a well rounded deck, a good economy and protection from damage. These cards are also two of the oldest cards which speaks to their utility as they are still popular years later with hundreds of new cards published since their release. Comments on NetrunerDB call <\/span><i><span style=\"font-weight: 400\">Sure Gamble<\/span><\/i><span style=\"font-weight: 400\"> \u201can auto-include in every runner deck\u201d with newer cards beginning to make this card less \u201cglorified\u201d.<\/span><\/p>\n<p><b>FUTURE DIRECTION<\/b><\/p>\n<p><span style=\"font-weight: 400\">The goal of this visualization was to show if any clustering of cards existed between ten popular Android Netrunner decks. After showing that there are central cards common across decks, I want to first expand the sample size to see its effect on the network. Another addition would be to visualize the other side of Netrunner, the Corporation decks, and ask the same question with these decks. <\/span><\/p>\n<p><span style=\"font-weight: 400\">The most interesting area for future comparison would be looking into communities of Netrunner players and visualizing their Metagame. Grouping decks by communities on NetrunnerDB, such as by regional tournaments, would show how differently each community build decks and how they differ from the netrunnerDB popular decks as a whole. Another possibility would be comparing decks over time to see if the Metagame has changed since decklists began being published on NetrunnerDB in 2013.<\/span><\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_4796\" style=\"width: 499px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/06\/netrunnerTitle.gif\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4796\" class=\"wp-image-4796\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/06\/netrunnerTitle-620x601.gif?resize=499%2C484\" alt=\"netrunnerTitle\" width=\"499\" height=\"484\" \/><\/a><p id=\"caption-attachment-4796\" class=\"wp-caption-text\">Abstraction of Popular Deck Network<\/p><\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>INTRODUCTION After playing Android Netrunner a handful of times, I was interested to visualize the network between cards. Netrunner is a two player, asymmetrical, deck-building card game where players first choose a side (Runner or Corporation), then build a deck from available cards. For this visualization I focused solely on the Runner side which has&hellip;<\/p>\n","protected":false},"author":189,"featured_media":4796,"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":[1],"tags":[],"coauthors":[],"class_list":["post-4777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visualization"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-1f3","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/4777","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\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=4777"}],"version-history":[{"count":0,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/4777\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=4777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=4777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=4777"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=4777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}