{"id":20343,"date":"2020-10-28T15:55:58","date_gmt":"2020-10-28T19:55:58","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=20343"},"modified":"2020-10-28T16:25:30","modified_gmt":"2020-10-28T20:25:30","slug":"stack-overflow-tags-network-analysis","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/stack-overflow-tags-network-analysis\/","title":{"rendered":"Stack Overflow Tags &#8211; NETWORK ANALYSIS"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"412\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/ds-1.png?resize=663%2C412&#038;ssl=1\" alt=\"\" class=\"wp-image-20375\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/ds-1.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/ds-1.png?resize=300%2C186&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/ds-1.png?resize=290%2C180&amp;ssl=1 290w\" sizes=\"auto, (max-width: 663px) 100vw, 663px\" \/><figcaption>Developer Story Concept by Stack Overflow<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/\">Stack Overflow<\/a> is a question and answer based online community created in 2008. It aims at helping developers and programmers across the globe to disseminate their programming knowledge and build their careers.<\/p>\n\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/users\/story\/join\">A developer story<\/a> is a way to showcase the aspect of a developer\u2019s identity. It aims to provide an entire picture of who you are. In order to understand how technologies are related to each other, several developer stories were analyzed by Stack Overflow where developers make use of \u2018tags\u2019.<\/p>\n\n\n\n<p>In order to visualize this relationship better, I made use of <a href=\"https:\/\/gephi.org\/\">Gephi<\/a> to create a Network for the same where the technologies were represented as nodes while the relationship between them was represented as edges.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inspiration<\/h2>\n\n\n\n<p>To get started with <a href=\"https:\/\/gephi.org\/\">Gephi<\/a>, I looked at the sample Les Miserables network which is also a sample available in the software itself. To explore the basic functionalities, I watched the tutorial video available for the same on YouTube which covered the concepts of layouts, editing of nodes and edges as well as some basic statistics.<\/p>\n\n\n\n<p>What I specifically liked about this network was the use of the Force Atlas layout to create small clusters of closely related nodes.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-wrapper\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/371n3Ye9vVo?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/div>\n<\/div><figcaption>The Tutorial video referred to for inspiration<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Choosing a topic<\/h2>\n\n\n\n<p>Having completed my bachelor\u2019s in computer engineering, I have relied on Stack Overflow heavily for a lot of debugging problems. I thought it was an interesting idea to analyze and visualize the technologies used by fellow developers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"678\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2-1024x826.png?resize=840%2C678&#038;ssl=1\" alt=\"\" class=\"wp-image-20345\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2.png?resize=1024%2C826&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2.png?resize=300%2C242&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2.png?resize=768%2C619&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2.png?resize=800%2C645&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2.png?resize=223%2C180&amp;ssl=1 223w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/alOyI-2.png?w=1079&amp;ssl=1 1079w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption> A snippet of the Developer Story. Source: Stack Overflow Meta<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Tools<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Kaggle<\/h3>\n\n\n\n<p>After choosing a topic, I looked for datasets to work on using <a href=\"https:\/\/www.kaggle.com\/\">Kaggle<\/a>, an online community for data scientists and machine learning practitioners. I came across the CSV file for the <a href=\"https:\/\/www.kaggle.com\/stackoverflow\/stack-overflow-tag-network\">Stack Overflow Tag Network<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">MS Excel<\/h3>\n\n\n\n<p>In order to import the dataset, I made use of <a href=\"https:\/\/www.microsoft.com\/en-in\/microsoft-365\/excel\">MS Excel<\/a>. The data comprised of 115 nodes and 490 edges and did not require any refinement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"473\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165-1024x576.png?resize=840%2C473&#038;ssl=1\" alt=\"\" class=\"wp-image-20379\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?resize=800%2C450&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?resize=320%2C180&amp;ssl=1 320w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-165.png?w=1680 1680w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>The dataset<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Gephi<\/h3>\n\n\n\n<p>After importing the dataset, a network was created using <a href=\"https:\/\/gephi.org\/\">Gephi<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methodology<\/h2>\n\n\n\n<p>After importing the available dataset as a spreadsheet in the nodes table, I had 115 nodes and 490 edges. The initial graph looked as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"473\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1-1024x576.png?resize=840%2C473&#038;ssl=1\" alt=\"\" class=\"wp-image-20350\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?resize=800%2C450&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?resize=320%2C180&amp;ssl=1 320w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-1.png?w=1680 1680w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>Initial Graph<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Choosing the layout<\/h3>\n\n\n\n<p>For the layout, I decided to choose Force Atlas to have the closely associated nodes clustered together, setting the Repulsion Strength to 200 and the Attraction Strength to 5. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Appearance<\/h3>\n\n\n\n<p>For the appearance, I decided to alter the size and color of the nodes based on the number of edges emerging from or directed towards it. <\/p>\n\n\n\n<p>I chose the color palette in such a way that the variance can be understood properly while at the same time choose the colors in such a way that the darker colored labels can be easily seen without much strain on the eyes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"473\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3-1024x576.png?resize=840%2C473&#038;ssl=1\" alt=\"\" class=\"wp-image-20371\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?resize=800%2C450&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?resize=320%2C180&amp;ssl=1 320w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/10\/Screenshot-3.png?w=1680 1680w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>Final Network<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Analysis<\/h2>\n\n\n\n<p>Once the rendering of the network was complete, the nodes were split into smaller clusters. For example,  cluster for web development was created where the different web development technologies like CSS, HTML, JavaScript, MySQL, jQuery were listed. jQuery had the most connections out of all of them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reflections<\/h2>\n\n\n\n<p>During the project, I initially found it difficult to navigate my way around the software and needed the assistance of a tutorial to understand its functionalities. However, importing data for the same is extremely easy and intuitive.<\/p>\n\n\n\n<p>Going forward in the field of Network Analysis, I wish to explore the field of Social Network Analysis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sources<\/h2>\n\n\n\n<p><a href=\"https:\/\/gephi.org\/\">Gephi<\/a><br><a href=\"https:\/\/www.wikipedia.org\/\">Wikipedia<\/a><br><a href=\"https:\/\/stackoverflow.com\/\">Stack Overflow<\/a><br><a href=\"http:\/\/youtube.com\/\">YouTube<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Stack Overflow is a question and answer based online community created in 2008. It aims at helping developers and programmers across the globe to disseminate their programming knowledge and build their careers. A developer story is a way to showcase the aspect of a developer\u2019s identity. It aims to provide an entire picture of&hellip;<\/p>\n","protected":false},"author":726,"featured_media":20345,"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":[564],"class_list":["post-20343","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\/2020\/10\/alOyI-2.png?fit=1079%2C870&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-5i7","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/20343","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\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=20343"}],"version-history":[{"count":9,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/20343\/revisions"}],"predecessor-version":[{"id":20380,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/20343\/revisions\/20380"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/20345"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=20343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=20343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=20343"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=20343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}