{"id":64,"date":"2019-07-12T14:35:47","date_gmt":"2019-07-12T14:35:47","guid":{"rendered":"http:\/\/macblog.mcmaster.ca\/posthumanism\/?page_id=64"},"modified":"2019-07-12T14:35:47","modified_gmt":"2019-07-12T14:35:47","slug":"data-visualization-challenge","status":"publish","type":"page","link":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/","title":{"rendered":"Data Visualization Challenge"},"content":{"rendered":"<h2>Overview<\/h2>\n<p>The goal of this project is to learn about open source data visualization tools. My aim is to complete the challenge.\u00a0<a class=\"urllink\" href=\"https:\/\/www.computecanada.ca\/events\/visualization-challenge\/\" rel=\"nofollow\">This challenge.<\/a><\/p>\n<h2>Test Project<\/h2>\n<p>I wanted to do a little getting my feet wet before working with a massive data set, just to get involved in the idea of visualization.<\/p>\n<div class=\"vspace\">\n<figure id=\"attachment_65\" aria-describedby=\"caption-attachment-65\" style=\"width: 507px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65 size-full\" src=\"\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/polyculeanon3.jpg\" alt=\"Anonymized version of my polycule\" width=\"507\" height=\"540\" srcset=\"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/polyculeanon3.jpg 507w, https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/polyculeanon3-282x300.jpg 282w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><figcaption id=\"caption-attachment-65\" class=\"wp-caption-text\">Anonymized version of my polycule<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">I created the above, very basic, visualization using\u00a0<a class=\"urllink\" href=\"http:\/\/www.xmind.net\/\" rel=\"nofollow\">XMind<\/a>. The above is an anonymized version of my\u00a0<a class=\"urllink\" href=\"http:\/\/www.urbandictionary.com\/define.php?term=Polycule\" rel=\"nofollow\">polycule<\/a>. The\u00a0<a class=\"urllink\" href=\"http:\/\/kimchicuddles.com\/characters\" rel=\"nofollow\">character polycule<\/a>\u00a0from a popular poly comic, Kimchi Cuddles, inspired me to make my own polycule diagram a while back. Now, I&#8217;d like to create a nicer visualization for this as a test project for the visualization challenge.<\/p>\n<p class=\"vspace\">I found\u00a0<a class=\"urllink\" href=\"http:\/\/bl.ocks.org\/mbostock\/4062045\" rel=\"nofollow\">this pretty diagram<\/a>\u00a0(of character co-occurrence in Les Mis) through\u00a0<a class=\"urllink\" href=\"https:\/\/d3js.org\/\" rel=\"nofollow\">D3.js<\/a>, and I thought that it might work out well as a test project. Go go gadget learning!<\/p>\n<h2>Test Project Progress<\/h2>\n<ul>\n<li>Late on September 22 2016\n<ul>\n<li><a class=\"urllink\" href=\"http:\/\/bl.ocks.org\/mbostock\/4062045\" rel=\"nofollow\">Force-Directed Graph<\/a>&gt;<a class=\"urllink\" href=\"http:\/\/bl.ocks.org\/-\/about\" rel=\"nofollow\">About<\/a><\/li>\n<li>Checked out\u00a0<a class=\"urllink\" href=\"https:\/\/gist.github.com\/\" rel=\"nofollow\">GithubGist<\/a>, which I learned from asking sen is kind of like pastebin, but attached to your GitHub<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>September 26\n<ul>\n<li>visualization\n<ul>\n<li>added the Bl.ocks extension for Chrome<\/li>\n<li>decided to test the app using the code that&#8217;s offered with the Les Mis data<\/li>\n<li>attempted just copying in the Index page and then adding the blocks.org URL, but that came up with a 404 error<\/li>\n<li>tried the blocks extension, and it said &#8220;file not found&#8221; (same happened when I tried with just the JSON, which makes sense)<\/li>\n<li>added the JSON file to the index file using Add File button, tried the block extension and same error<\/li>\n<li>tried making the Gist public (from secret previously) and that also didn&#8217;t help<\/li>\n<li>checked in with sen, comparing\u00a0<a class=\"urllink\" href=\"https:\/\/gist.github.com\/mbostock\/4062045\" rel=\"nofollow\">the original gist<\/a>\u00a0with\u00a0<a class=\"urllink\" href=\"https:\/\/gist.github.com\/saskeah\/3338a04cd9e105dd3133a8160680ae07\" rel=\"nofollow\">mine<\/a>, and learned that titles of the files are actually more filenames than titles, and that I had done it wrong (I had just called them INDEX and JSON)<\/li>\n<li>once I updated the filenames, everything worked just fine<\/li>\n<\/ul>\n<\/li>\n<li>the data\n<ul>\n<li>the biggest roadblock I have starting out, given the tools, isn&#8217;t actually that I can&#8217;t graph the data, rather, I&#8217;m not sure how to work with the data that I have<\/li>\n<li>there was a question about this in the GitGist I was using in the above example, someone who wrote &#8220;im novice in d3. can someone tell me how you define node , group , value and target.&#8221; &#8211; using this comment (that was never replied to) as a starting point, I headed back to the\u00a0<a class=\"urllink\" href=\"https:\/\/d3js.org\/\" rel=\"nofollow\">D3 site<\/a>\u00a0and its associated\u00a0<a class=\"urllink\" href=\"https:\/\/github.com\/d3\/d3\/wiki\" rel=\"nofollow\">documentation git<\/a><\/li>\n<li>luckily, they have a lot of\u00a0<a class=\"urllink\" href=\"https:\/\/github.com\/d3\/d3\/wiki\/Tutorials\" rel=\"nofollow\">tutorials<\/a>, so I started out looking\u00a0<a class=\"urllink\" href=\"http:\/\/code.hazzens.com\/d3tut\/\" rel=\"nofollow\">here<\/a>, and\u00a0<a class=\"urllink\" href=\"http:\/\/vijayrc.com\/vectorclocks\/vrc\/post\/d3#.V-mYOpMrKYU\" rel=\"nofollow\">here<\/a>\u00a0&#8211; unfortunately, they weren&#8217;t super relevant<\/li>\n<li>so I tried looking up the actual data set used for this graph, which gave me good news and bad news (data set found\u00a0<a class=\"urllink\" href=\"http:\/\/ftp.cs.stanford.edu\/pub\/sgb\/jean.dat\" rel=\"nofollow\">here<\/a>: this chart is pulled from data that are WAY more complicated than my data are, and, mathematically, doesn&#8217;t give me a lot of information on how to group my (much simpler) data set in order to make it compatible with the graph format I&#8217;m looking at<\/li>\n<li>I also found\u00a0<a class=\"urllink\" href=\"https:\/\/github.com\/mmlc\/lesmiserables-character-network\" rel=\"nofollow\">this<\/a>, however, an updated data set based on the original (found in the\u00a0<a class=\"urllink\" href=\"http:\/\/www-cs-faculty.stanford.edu\/~uno\/sgb.html\" rel=\"nofollow\">Stanford GraphBase<\/a>\u00a0&#8211; which led me to think that maybe I need to chart my data, and then parse it to get it into an acceptable format<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"vspace\"><\/div>\n<\/li>\n<li>later on September 26\n<ul>\n<li>after talking to sen about all kinds of things, I decided just to enter the data manually into JSON because the other things I had considered doing were less applicable overall to the data visualization challenge<\/li>\n<li>I re-created the same gist that I created above with the test code (copy and paste), changed &#8220;miserables.json&#8221; in the index file to &#8220;polycule.json&#8221;, and attempted to modify the JSON for the polycule data by creating a node for each node in the Xmind file, and then assigning the following values:\n<ul>\n<li>each individual branch on the polycule gets its own group<\/li>\n<li>between me and my direct &#8220;child&#8221; nodes:\n<ul>\n<li>1: my pets; 2: my closest partners; 3: my more distant local partners; 4: my long-distance partners; 5: my platonic significant others<\/li>\n<li>each relationship involving an other-than-human animal is assigned a value of 1<\/li>\n<\/ul>\n<\/li>\n<li>between my &#8220;child&#8221; nodes, each relationship involving an other-than-human animal is assigned a value of 1, all other relationships are assigned a value of 2<\/li>\n<\/ul>\n<\/li>\n<li>copied and pasted into gist<\/li>\n<li>generated chart through bl.ocks chrome extension, but it came up blank<\/li>\n<li>ran the JSON through a validator, found two errors, and when I corrected them:\u00a0<a class=\"urllink\" href=\"http:\/\/bl.ocks.org\/saskeah\/7691f9ffd516dacda445620a12c1a176\" rel=\"nofollow\">IT WORKED! I MADE DIS!<\/a>\n<ul>\n<li>NOTE: I realized after I generated the graph that the logic of a force-directed graph actually doesn&#8217;t work at all for a polycule. BUT STILL. Learning! and pretty.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Micki Kaufman Workshop &#8211; Gephi, September 30, 2016\n<ul>\n<li>I did this little practice project during an\u00a0<a class=\"urllink\" href=\"https:\/\/www.eventbrite.ca\/e\/demystifying-digital-scholarship-dh-techniques-tickets-27491209949?ref=enivte001&amp;invite=MTA2NzQyNjMvYW5kemVmZkBnbWFpbC5jb20vMA%3D%3D&amp;utm_source=eb_email&amp;utm_medium=email&amp;utm_campaign=invitemodernv2&amp;utm_term=eventpage\" rel=\"nofollow\">SCDS Demystifying Digital Scholarship workshop<\/a>\u00a0with\u00a0<a class=\"urllink\" href=\"http:\/\/www.mickikaufman.com\/\" rel=\"nofollow\">Micki Kaufman<\/a>, who worked a bit with this software during the two hour session, and I played with this while Micki talked.<\/li>\n<li>what I did:\n<ul>\n<li>download\u00a0<a class=\"urllink\" href=\"https:\/\/gephi.org\/\" rel=\"nofollow\">Gephi<\/a><\/li>\n<li>watch Micki&#8217;s demo (sorry &#8211; that I can&#8217;t recreate)<\/li>\n<li>import data from Text Wrangler into Excel (copy and paste)<\/li>\n<li><a class=\"urllink\" href=\"https:\/\/support.office.com\/en-us\/article\/Split-text-into-different-columns-with-the-Convert-Text-to-Columns-Wizard-30b14928-5550-41f5-97ca-7a3e9c363ed7\" rel=\"nofollow\">Text to Columns<\/a><\/li>\n<li>Remove superflous characters &#8221; and } (<a class=\"urllink\" href=\"https:\/\/www.extendoffice.com\/documents\/excel\/560-excel-remove-character-from-string.html#methoda\" rel=\"nofollow\">find and replace<\/a>)<\/li>\n<li>try to import to Gephi, crash Gephi<\/li>\n<li>save as CSV<\/li>\n<li>Import to Gephi<\/li>\n<li>used\u00a0<a class=\"urllink\" href=\"https:\/\/github.com\/gephi\/gephi\/wiki\/Import-CSV-Data\" rel=\"nofollow\">this resource<\/a>\u00a0from the Gephi git to create an initial render<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgonly\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-66 size-full\" src=\"\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/gephiinitialrendersm.png\" alt=\" Gephi\" width=\"703\" height=\"400\" srcset=\"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/gephiinitialrendersm.png 703w, https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/gephiinitialrendersm-300x171.png 300w\" sizes=\"auto, (max-width: 703px) 100vw, 703px\" \/><\/div>\n<p class=\"vspace\">I decided to play with Gephi because of the conceputal flaws in using force-directed graphs to chart polycule data from a politicized perspective. So far, it seems very usable, and I will be able to create something pretty, and perhaps less conceptually flawed, if less 3D and interactive than with the bl.ocks app.<\/p>\n<div class=\"vspace\"><\/div>\n<h2>Actual Visualization Challenge<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Overview The goal of this project is to learn about open source data visualization tools. My aim is to complete the challenge.\u00a0This challenge. Test Project I wanted to do a little getting my feet wet before working with a massive data set, just to get involved in the idea of visualization. I created the above, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Data Visualization Challenge&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-64","page","type-page","status-publish","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Data Visualization Challenge - Posthumanism in Action<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Data Visualization Challenge - Posthumanism in Action\" \/>\n<meta property=\"og:description\" content=\"Overview The goal of this project is to learn about open source data visualization tools. My aim is to complete the challenge.\u00a0This challenge. Test Project I wanted to do a little getting my feet wet before working with a massive data set, just to get involved in the idea of visualization. I created the above, &hellip; Continue reading &quot;Data Visualization Challenge&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/\" \/>\n<meta property=\"og:site_name\" content=\"Posthumanism in Action\" \/>\n<meta property=\"og:image\" content=\"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/polyculeanon3.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/\",\"url\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/\",\"name\":\"Data Visualization Challenge - Posthumanism in Action\",\"isPartOf\":{\"@id\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/#website\"},\"datePublished\":\"2019-07-12T14:35:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Data Visualization Challenge\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/#website\",\"url\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/\",\"name\":\"Posthumanism in Action\",\"description\":\"Documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/macblog.mcmaster.ca\/posthumanism\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Data Visualization Challenge - Posthumanism in Action","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/","og_locale":"en_US","og_type":"article","og_title":"Data Visualization Challenge - Posthumanism in Action","og_description":"Overview The goal of this project is to learn about open source data visualization tools. My aim is to complete the challenge.\u00a0This challenge. Test Project I wanted to do a little getting my feet wet before working with a massive data set, just to get involved in the idea of visualization. I created the above, &hellip; Continue reading \"Data Visualization Challenge\"","og_url":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/","og_site_name":"Posthumanism in Action","og_image":[{"url":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-content\/uploads\/sites\/141\/2019\/07\/polyculeanon3.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/","url":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/","name":"Data Visualization Challenge - Posthumanism in Action","isPartOf":{"@id":"https:\/\/macblog.mcmaster.ca\/posthumanism\/#website"},"datePublished":"2019-07-12T14:35:47+00:00","breadcrumb":{"@id":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/macblog.mcmaster.ca\/posthumanism\/data-visualization-challenge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/macblog.mcmaster.ca\/posthumanism\/"},{"@type":"ListItem","position":2,"name":"Data Visualization Challenge"}]},{"@type":"WebSite","@id":"https:\/\/macblog.mcmaster.ca\/posthumanism\/#website","url":"https:\/\/macblog.mcmaster.ca\/posthumanism\/","name":"Posthumanism in Action","description":"Documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/macblog.mcmaster.ca\/posthumanism\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/pages\/64\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/macblog.mcmaster.ca\/posthumanism\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}