{"id":3078,"date":"2014-08-17T18:10:29","date_gmt":"2014-08-17T22:10:29","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=3078"},"modified":"2014-10-25T23:12:45","modified_gmt":"2014-10-26T03:12:45","slug":"creating-a-d3-js-game-of-thrones-visualization","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2014\/08\/17\/creating-a-d3-js-game-of-thrones-visualization\/","title":{"rendered":"Creating a d3.js Game of Thrones Visualization"},"content":{"rendered":"<p>For any Game of Thrones fans out there, I&#8217;ve created a neat little <a href=\"http:\/\/patorjk.com\/vis\/chaos-ladder\/\">interactive visualization<\/a>. It ranks characters by how many episodes they&#8217;ve been in, makes note of who&#8217;s alive and who&#8217;s dead, and allows you to go backwards in the show&#8217;s history to see how things have developed over time.<\/p>\n<p>It also reveals some interesting stats: <\/p>\n<ul>\n<li>\nAfter 40 episodes, the show has around ~140 notable characters.\n<\/li>\n<li>\nThe show seems to kill an average of 13 notable characters per season, or 1.325 per episode.\n<\/li>\n<li>\n37.1% of the notable characters have been killed off so far.\n<\/li>\n<\/ul>\n<p>You can see a spoiler-free version of the visualization below (character avatars and death information has been removed):<\/p>\n<p><a href=\"http:\/\/patorjk.com\/vis\/chaos-ladder\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2014\/08\/d3_got1.png\" alt=\"d3_got\" width=\"550\" height=\"433\" class=\"aligncenter size-full wp-image-3086\" srcset=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2014\/08\/d3_got1.png 550w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2014\/08\/d3_got1-300x236.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>The chart is written on top of <a href=\"http:\/\/d3js.org\/\">d3.js<\/a>, which is a web-based visualization library. I learned how to use it earlier this year and have been on the lookout for projects I could use it for. After seeing the bubble chart from Matthew Daniels&#8217;s <a href=\"http:\/\/rappers.mdaniels.com.s3-website-us-east-1.amazonaws.com\/\">Largest Vocabulary in Hip Hop<\/a> visualization and noticing it was based on an example by <a href=\"http:\/\/fiddle.jshell.net\/6cW9u\/8\/\">Amelia Bellamy-Royds<\/a>, I decided to see if I could create my own bubble chart. <\/p>\n<h3>D3 Context Menus<\/h3>\n<p>I didn&#8217;t see any d3.js context menu plugins while doing this project, so I <a href=\"https:\/\/github.com\/patorjk\/d3-context-menu\">wrote my own<\/a>. I could have used a jQuery plugin, but I wanted to keep as much of the code within the D3 way as possible (it just made working within their event structure easier).<\/p>\n<h3>Other Game of Thrones Visualizations<\/h3>\n<p>So there&#8217;s are plenty of other Game of Thrones visualizations out there. If you&#8217;re looking for more, I&#8217;ve compiled a short list below of some of the best ones I&#8217;ve found.<\/p>\n<ul>\n<li>\n<a href=\"http:\/\/www.jeromecukier.net\/projects\/agot\/events.html\">Events in the Game of Thrones<\/a> &#8211; A visualization of the events from the first 5 Game of Thrones books.\n<\/li>\n<li>\n<a href=\"http:\/\/quartermaester.info\/\">Game of Thrones Map<\/a> &#8211; Interactive map of the Game of Thrones universe.\n<\/li>\n<li>\n<a href=\"http:\/\/beautifuldeath.com\/\">Beautiful Death<\/a> &#8211; A piece of artwork drawn for each episode in the show. I&#8217;m not sure if this technically counts as a visualization, but they&#8217;re pretty cool.\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>For any Game of Thrones fans out there, I&#8217;ve created a neat little interactive visualization. It ranks characters by how many episodes they&#8217;ve been in, makes note of who&#8217;s alive and who&#8217;s dead, and allows you to go backwards in the show&#8217;s history to see how things have developed over time. It also reveals some &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2014\/08\/17\/creating-a-d3-js-game-of-thrones-visualization\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Creating a d3.js Game of Thrones Visualization<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,38,26],"tags":[],"class_list":["post-3078","post","type-post","status-publish","format-standard","hentry","category-general-news","category-visualizations","category-web-apps"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=3078"}],"version-history":[{"count":19,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3078\/revisions"}],"predecessor-version":[{"id":3134,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3078\/revisions\/3134"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=3078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=3078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=3078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}