{"id":30923,"date":"2022-04-07T17:45:36","date_gmt":"2022-04-07T21:45:36","guid":{"rendered":"https:\/\/studentwork.prattsi.org\/infovis\/?p=30923"},"modified":"2022-04-07T20:09:45","modified_gmt":"2022-04-08T00:09:45","slug":"trajectories-of-refugees-around-the-globe-in-2020","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/networks\/trajectories-of-refugees-around-the-globe-in-2020\/","title":{"rendered":"Trajectories of Refugees Around the Globe in 2020"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"444\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3-1024x541.png?resize=840%2C444&#038;ssl=1\" alt=\"\" class=\"wp-image-31026\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=1024%2C541&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=768%2C406&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=1536%2C812&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=2048%2C1083&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=800%2C423&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?resize=341%2C180&amp;ssl=1 341w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph-3.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"introduction\">Introduction<\/h2>\n\n\n\n<p>The visualization is about showing the trajectories of refugees all around the world. The dataset includes the countries refugees ran out and the countries refugees moved in. To do the networking visualization, I turned them into source and target nodes perpectively. Then using links to connect them. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"methodology\">Methodology<\/h2>\n\n\n\n<p>The following steps are the process for creating the refugee networking visualization.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"finding-the-dataset\"><strong>Finding the Dataset<\/strong><\/h4>\n\n\n\n<p>I collected the data from <a rel=\"noreferrer noopener\" href=\"https:\/\/www.unhcr.org\/refugee-statistics\/download\/?url=4kKnY2\" data-type=\"URL\" data-id=\"https:\/\/www.unhcr.org\/refugee-statistics\/download\/?url=4kKnY2\" target=\"_blank\">The UN Refugee Agency<\/a> (UNCR) official website which offered information about refugees escaping situations year by year.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"organizing-the-data-structure\">Organizing the Data Structure<\/h4>\n\n\n\n<p>Even though I only chose a one-year dataset, the scope is still too big to present the visualization with a clear point of view. Hence, I decided to filter the refugee source countries. According to the UNCR, there were 67% of world refugees come from five countries: Syria, Venezuela, Afghanistan, South Sudan, and Myanmar. These five variables would be my main prospects to design the visualization.<\/p>\n\n\n\n<p>To narrow the dataset, I apply <a rel=\"noreferrer noopener\" href=\"https:\/\/pandas.pydata.org\/\" data-type=\"URL\" data-id=\"https:\/\/pandas.pydata.org\/\" target=\"_blank\">Pandas<\/a>, the Python library for data analysis to clean and organize the data. First of all, I used the group by function, to aggregate the number of every country-to-country trajectory. Moreover, I filtered the data to five source countries only and then turned the data frame into a JSON file which includes columns named &#8216;source&#8217;, target, and &#8216;weight.<\/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\/2022\/04\/Python-1024x576.png?resize=840%2C473&#038;ssl=1\" alt=\"\" class=\"wp-image-31053\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=2048%2C1152&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=800%2C450&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?resize=320%2C180&amp;ssl=1 320w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Python.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>Data Arrangement by Pandas<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"data-visualization\">Data visualization<\/h4>\n\n\n\n<p>Instead of using the Gephi software which was taught last class, I challenged myself for applying the <a href=\"https:\/\/d3js.org\/\" data-type=\"URL\" data-id=\"https:\/\/d3js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">D3<\/a>, the Javascript library for data visualization to create an interactive networking visualization.<\/p>\n\n\n\n<p>At first, after finishing coding the basic structure. I only got lots of black dots sticking together which was hard to tell the meanings of nodes and links. To solve this, I used color to represent the nodes and links of five countries. Additionally, I adjust the circles&#8217; size to differentiate the source and target countries.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"590\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph-1024x719.png?resize=840%2C590&#038;ssl=1\" alt=\"\" class=\"wp-image-31059\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph.png?resize=1024%2C719&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph.png?resize=300%2C211&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph.png?resize=768%2C539&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph.png?resize=800%2C562&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph.png?resize=256%2C180&amp;ssl=1 256w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Initial-Graph.png?w=1310&amp;ssl=1 1310w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>Initial Graph<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"result\">Result<\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><a href=\"https:\/\/vizhub.com\/CloudLun\/9535a1ebf4cb4ea1a8ba3532241b127c\" data-type=\"URL\" data-id=\"https:\/\/vizhub.com\/CloudLun\/9535a1ebf4cb4ea1a8ba3532241b127c\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vizhub.com\/CloudLun\/9535a1ebf4cb4ea1a8ba3532241b127c<\/a><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p>To show better clarity in depicting the trajectories of global refugees, I broadened the distance between the nodes. Also with the interactive features, we can drag the nodes and move the whole graph. These allow us to see the five distinct clusters Finally, apart from adding the legend, I append the labels for each node to help audiences view the patterns within the graph.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reflection\">Reflection<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"managing-labels\">Managing labels<\/h4>\n\n\n\n<p>Labels of all nodes showing up at once seem to be a bit messy. I&#8217;ve tried to use the hover effects to show the labels information but it didn&#8217;t work out in the end. I will revise this after I get more familiar with D3 in the future.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"target-countries-color\">Target countries color<\/h4>\n\n\n\n<p>In this graph, I use gray color to represent the target countries. It makes audiences easy to tell between target countries and source countries. However, it doesn&#8217;t help to recognize the clusters arranged by five countries. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-more-appropriate-method-to-present-the-data\">The more appropriate method to present the data <\/h4>\n\n\n\n<p>After finishing designing the visualization, I was wondering that due to this data is about geographical patterns. Instead of applying the networks to show the trajectories, doing the flowing map may be a more specific and clear method to present the insights of the data.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe-1024x576.png?resize=840%2C472&#038;ssl=1\" alt=\"\" class=\"wp-image-31111\" width=\"840\" height=\"472\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?resize=800%2C450&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?resize=320%2C180&amp;ssl=1 320w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Refugees-europe.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>Flow Map Designed by  Martin Grandjean<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"source\">Source<\/h2>\n\n\n\n<p>Grandjean M. (2015) What does the global map of refugees (really) looks like?<br><a href=\"http:\/\/www.martingrandjean.ch\/data-visualization-map-refugees\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.martingrandjean.ch\/data-visualization-map-refugees\/<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The visualization is about showing the trajectories of refugees all around the world. The dataset includes the countries refugees ran out and the countries refugees moved in. To do the networking visualization, I turned them into source and target nodes perpectively. Then using links to connect them. Methodology The following steps are the process&hellip;<\/p>\n","protected":false},"author":3959,"featured_media":30949,"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":[342],"tags":[1777,115,106],"coauthors":[1737],"class_list":["post-30923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-networks","tag-d3","tag-data-visualization","tag-network-visualization"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2022\/04\/Networking-Graph.png?fit=2879%2C1641&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-82L","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/30923","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\/3959"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=30923"}],"version-history":[{"count":32,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/30923\/revisions"}],"predecessor-version":[{"id":31698,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/30923\/revisions\/31698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/30949"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=30923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=30923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=30923"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=30923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}