{"id":130,"date":"2014-04-02T17:45:05","date_gmt":"2014-04-02T14:45:05","guid":{"rendered":"http:\/\/tuijasonkkila.fi\/?p=130"},"modified":"2024-09-20T13:23:11","modified_gmt":"2024-09-20T10:23:11","slug":"deconstructing-facebook-network","status":"publish","type":"post","link":"https:\/\/tuijasonkkila.fi\/?p=130","title":{"rendered":"Deconstructing Facebook network"},"content":{"rendered":"<p>The other day I noticed this tweet about Cytoscape&#8217;s D3.js Exporter.<\/p>\n<blockquote class=\"twitter-tweet\" lang=\"en\"><p>D3.js Exporter released for Cytoscape 3.1.0.  You can export Cytoscape networks and tables as D3 compatible JSON: <a href=\"http:\/\/t.co\/ebWvOxmWPT\">http:\/\/t.co\/ebWvOxmWPT<\/a><\/p>\n<p>\u2014 Cytoscape (@cytoscape) <a href=\"https:\/\/twitter.com\/cytoscape\/statuses\/449260986143215616\">March 27, 2014<\/a><\/p><\/blockquote>\n<p><script async=\"\" src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Because I am currently learning the basics of <a href=\"http:\/\/en.wikipedia.org\/wiki\/D3js\" target=\"_blank\" rel=\"noopener\">D3<\/a>, this sounded interesting to look at more closely.<\/p>\n<p><a href=\"http:\/\/www.cytoscape.org\/\" target=\"_blank\" rel=\"noopener\">Cytoscape<\/a> is a tool for visualizing networks. While <a href=\"http:\/\/gephi.org\/\" target=\"_blank\" rel=\"noopener\">Gephi<\/a> is well known in this area, Cytoscape is not, at least not for me. The first time I heard of it was while watching <em>Data Literacy and Data Visualization<\/em>, a great collection of videos I mentioned <a href=\"https:\/\/tuijasonkkila.fi\/2014\/03\/thoughts-on-a-bubble-chart\/\" target=\"_blank\" rel=\"noopener\">last time<\/a>.<\/p>\n<p>A year ago, I wrote in a <a href=\"https:\/\/blogs.aalto.fi\/suoritin\/2013\/03\/09\/friends-in-a-graph\/\" target=\"_blank\" rel=\"noopener\">brief post<\/a>, how I put Facebook friends on a network graph &#8211; a common visualization those days. How would the same data look like in <a href=\"http:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics\" target=\"_blank\" rel=\"noopener\">SVG<\/a>?<\/p>\n<p>I didn&#8217;t want to repeat the whole process, but to continue from the <a href=\"http:\/\/users.tkk.fi\/sonkkila\/network\/fbmini.gexf\" target=\"_blank\" rel=\"noopener\">GEXF file<\/a>. Cytoscape does not support this markup language by Gephi in import. However, another XML-based language, GraphML, is on the list. So, I read the GEXF file back in Gephi, exported in GraphML, and imported that one in Cytoscape.<\/p>\n<p>By default, Cytoscape presents the network as a grid. Following the advice from Ohio, I applied the preferred layout (F5). After installing the D3.js Exporter in App Manager, the data was ready for a JSON export.<\/p>\n<p><a href=\"https:\/\/tuijasonkkila.fi\/wp-content\/uploads\/2014\/04\/cytoscape_export.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tuijasonkkila.fi\/wp-content\/uploads\/2014\/04\/cytoscape_export-300x193.png\" alt=\"Cytoscape export\" class=\"alignnone size-medium wp-image-133\" width=\"300\" height=\"193\" srcset=\"https:\/\/tuijasonkkila.fi\/wp-content\/uploads\/2014\/04\/cytoscape_export-300x193.png 300w, https:\/\/tuijasonkkila.fi\/wp-content\/uploads\/2014\/04\/cytoscape_export-1024x660.png 1024w, https:\/\/tuijasonkkila.fi\/wp-content\/uploads\/2014\/04\/cytoscape_export-624x402.png 624w, https:\/\/tuijasonkkila.fi\/wp-content\/uploads\/2014\/04\/cytoscape_export.png 1294w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Mike Bostock, a central figure behind D3, has an extensive collection of examples <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Gallery\" target=\"_blank\" rel=\"noopener\">in his gallery<\/a>. One of them is on <a href=\"http:\/\/bl.ocks.org\/mbostock\/4062045\" target=\"_blank\" rel=\"noopener\">force-directed graphs<\/a>, and that was exactly what I was after. All I did to get <a href=\"https:\/\/tuijasonkkila.fi\/tre\/fbcyto.html\" target=\"_blank\" rel=\"noopener\">the first version<\/a> of my D3.js Facebook network, was that I changed the file name in the <code>d3.json()<\/code> function that imports the data. That was easy!<\/p>\n<p>In this graph, the node labels are numbers and all nodes of the same color and size. Time to change these to something more visually interesting, and perhaps more informative.<\/p>\n<p>Gephi&#8217;s community detection algorithm had provided numbers for the nodes, and stored them in the <code>Modularity_Class<\/code> attribute. This is an obvious choice for the script when it&#8217;s time to decide, in which colour the circles ought to be filled. The name of the node should not be the <code>name<\/code> in my case, but the tiny version of the full name in <code>label<\/code>. What about the size of the nodes? Of all attributes available, I decided to try <a href=\"http:\/\/en.wikipedia.org\/wiki\/Centrality#Betweenness_centrality\" target=\"_blank\" rel=\"noopener\">Betweenness_Centrality<\/a>. Note that you will not find this and a couple of other attributes in the original GEXF; I added them this time by letting Gephi calculate the respective values.<\/p>\n<pre>{\n  \"nodes\" : [ {\n    \"id\" : \"10162\",\n    \"SUID\" : 10162,\n    \"In_Degree\" : 16,\n    \"PageRank\" : 0.010341513363002573,\n    \"Weighted_In_Degree\" : 16.0,\n    \"Weighted_Degree\" : 32.0,\n    \"selected\" : false,\n    \"name\" : \"100003621746564\",\n    \"Clustering_Coefficient\" : 0.44166666,\n    \"shared_name\" : \"100003621746564\",\n    \"<strong>Betweenness_Centrality<\/strong>\" : 1434.8632653485495,\n    \"Eigenvector_Centrality\" : 0.18212450755372586,\n    \"etusuku\" : \"J K\",\n    \"g\" : 184,\n    \"b\" : 47,\n    \"Out_Degree\" : 16,\n    \"<strong>label<\/strong>\" : \"JK\",\n    \"size\" : 52.0,\n    \"<strong>Modularity_Class<\/strong>\" : 4,\n    \"r\" : 47,\n    \"Weighted_Out_Degree\" : 16.0,\n    \"Degree\" : 32,\n    \"Eccentricity\" : 7.0,\n    \"y\" : 111.5109,\n    \"Closeness_Centrality\" : 2.925,\n    \"x\" : 412.6945\n  }\n<\/pre>\n<p>The <a href=\"https:\/\/tuijasonkkila.fi\/tre\/fbcyto_r.html\" target=\"_blank\" rel=\"noopener\">new version<\/a> shows now the modularity classes in different colors, and the label pops up as a tooltip when you hover of the circle.<\/p>\n<p>The proportional size of the node tells, which of my friends act as &#8220;bridges&#8221; more than the others do. The normalization is done with a <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Quantitative-Scales#power-scales\" target=\"_blank\" rel=\"noopener\">power scale<\/a> function <code>d3.scale.sqrt()<\/code>, thanks to <a href=\"https:\/\/groups.google.com\/forum\/#!topic\/d3-js\/s7HwxUx2OQ8\/discussion\" target=\"_blank\" rel=\"noopener\">Mike&#8217;s advice<\/a> a while back. Contrary to his words though, I put the lower bounds to 2 and also tweaked the data. In some nodes, the value of this attribute is 0.0, and these nodes vanish altogether. Not the best way to deal with the issue I gather. Perhaps I should have left these nodes out of the exercise altogether?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The other day I noticed this tweet about Cytoscape&#8217;s D3.js Exporter. D3.js Exporter released for Cytoscape 3.1.0. You can export Cytoscape networks and tables as D3 compatible JSON: http:\/\/t.co\/ebWvOxmWPT \u2014 Cytoscape (@cytoscape) March 27, 2014 Because I am currently learning the basics of D3, this sounded interesting to look at more closely. Cytoscape is a &hellip; <a href=\"https:\/\/tuijasonkkila.fi\/?p=130\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Deconstructing Facebook network<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149],"tags":[79,77,75,80,78,76],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-diverse-coding","tag-cytoscape","tag-d3-js","tag-facebook","tag-force-directed-graph","tag-gephi","tag-network-graph"],"_links":{"self":[{"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=130"}],"version-history":[{"count":25,"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=\/wp\/v2\/posts\/130\/revisions"}],"predecessor-version":[{"id":1022,"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=\/wp\/v2\/posts\/130\/revisions\/1022"}],"wp:attachment":[{"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tuijasonkkila.fi\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}