{"assets":[],"author_link":"author\/yosh\/","author_name":"yosh","cat":"LD - Misc","categories":["LD - Misc","LD #21","LD #22","LD #23"],"comments":[],"epoch":1342461900,"event":"LD21","likes":10,"metadata":{"p_key":"77794","p_author":"yosh","p_authorkey":"0","p_urlkey":"286645","p_title":"[Experimental] Ludum Dare Data Visualization","p_cat":"LD - Misc","p_event":"LD23","p_time":"1342461900","p_likes":"10","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1334880000","event_key":"10","event_name":"LD23"},"source_url":"2012\/07\/16\/ld_data_viz\/","text":"<p><img alt=\"\" class=\"aligncenter\" height=\"189\" src=\"http:\/\/i.imgur.com\/hWRXz.png\" width=\"420\"\/><\/p>\n<p><span style=\"text-decoration: underline\"><strong>About:<\/strong><\/span><\/p>\n<p>Hi there!<\/p>\n<p>A few months ago, I proposed a quite vague idea about a new \u201ccartography\u201d module for the upcoming LD23. Web Cartography is more and more used because of its\u00a0curiously\u00a0innovative and interesting aspect.<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 368px\"><img alt=\"europeanPoliticalWeb\" class=\"\" height=\"234\" src=\"http:\/\/us.linkfluence.net\/wp-content\/images\/atlas\/european_political_web.png\" width=\"358\"\/><p class=\"wp-caption-text\">EuropeanPoliticalWeb (Linkfluence)<\/p><\/div>\n<p>The picture above was made by a <a href=\"http:\/\/us.linkfluence.net\/\" target=\"_blank\" title=\"French startup\">French startup<\/a> and is representing the European Political seen through the web. (Based on semantic <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_crawler\" target=\"_blank\" title=\"web crawlers\">web crawlers<\/a>) .<\/p>\n<p>Now you may ask:\u00a0<em>\u201cWhat\u2019s the damn connection with Ludum Dare\u201d ?<\/em><\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 368px\"><img alt=\"\" class=\"\" height=\"234\" src=\"http:\/\/excitemike.s3.amazonaws.com\/ld\/ld23wall\/ludum-dare-23-grid-1280x0768.png\" width=\"358\"\/><p class=\"wp-caption-text\">Just a few games\u2026<\/p><\/div>\n<p>With the increasing popularity of the event, we see more and more game proposed for each LD session. Also, the initial idea was to realize a\u00a0<strong>cartography\u00a0<\/strong>of the submitted games.<\/p>\n<p>\u00a0<\/p>\n<p><span style=\"text-decoration: underline\"><strong>Why?\u00a0<\/strong><\/span><\/p>\n<p>To have a better visualization of the whole game submissions. Take a look to statistics in an original and interactive way.<\/p>\n<ul>\n<li>\u00a0Which games are \u00a0available for a specific platform? Multi-platform?<\/li>\n<li>\u00a0Which games have more votes, coolness? (main nodes) =&gt; Imagine a visual helping tool for voting.<\/li>\n<\/ul>\n<p>\u2026and numerous other possibilities. \u00a0(Why not something more realtime-oriented based on database snapshots?)<\/p>\n<p>\u00a0<\/p>\n<p><strong><span style=\"text-decoration: underline\">Proof of concept:<\/span><\/strong><\/p>\n<p>Using available <a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-23\/?action=misc_links\" target=\"_blank\" title=\"public data\">public data<\/a> and python scripts, I extracted and classified data concerning each game entries of a given Ludum Dare composition (platforms, ratings, creators,votes\u2026).\u00a0I\u2019ve written a small web application displaying \u00a0large\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Directed_graph\" target=\"_blank\" title=\"directed graphs\">directed graphs<\/a>,\u00a0generated from these data sets.<\/p>\n<p>You can find my work over here:\u00a0<a href=\"http:\/\/cboissiere.com\/projects\/ldviz\/\">http:\/\/cboissiere.com\/projects\/ldviz\/<\/a><\/p>\n<p>Don\u2019t be afraid by the messy aspect of those graphs, it\u2019s mainly because of the huge size of the data sets. And don\u2019t forget it\u2019s still experimental =)<\/p>\n<p>And of course, the source code is over here:\u00a0<a href=\"https:\/\/github.com\/cboissie\/LD_Viz\" target=\"_blank\">https:\/\/github.com\/cboissie\/LD_Viz<\/a><\/p>\n<p>\u00a0<\/p>\n<p><span style=\"text-decoration: underline\"><strong>Tell me more:<\/strong><\/span><\/p>\n<p>It\u2019s basically two kind of graphs:<\/p>\n<ul>\n<li><strong>WordCloud:\u00a0<\/strong>We extract each words from all game titles. The words used together in a same title are linked to each other. For instance, if you click on the \u201cTINY\u201d node, you will see all the words that were used conjointly (like \u201cWORLD\u201d, or \u201cPLANET\u201d). The size of the node is proportional to the word occurrence.<\/li>\n<\/ul>\n<ul>\n<li><strong>MultiPlatform:<\/strong>\u00a0In this graph, games and their respective platforms are linked (Windows, OSX etc\u2026). The size of a platform node is proportional to the number of game ported on this platform.<\/li>\n<\/ul>\n<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 50%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n<div class=\"gallery galleryid-147723 gallery-columns-2 gallery-size-thumbnail\" id=\"gallery-1\"><dl class=\"gallery-item\">\n<dt class=\"gallery-icon landscape\">\n<a href=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/07\/wordcloud_ld23.png\"><img alt=\"wordcloud_ld23\" aria-describedby=\"gallery-1-148573\" class=\"attachment-thumbnail size-thumbnail\" height=\"150\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/07\/wordcloud_ld23-150x150.png\" width=\"150\"\/><\/a>\n<\/dt>\n<dd class=\"wp-caption-text gallery-caption\" id=\"gallery-1-148573\">\n\t\t\t\tWordCloud\n\t\t\t\t<\/dd><\/dl><dl class=\"gallery-item\">\n<dt class=\"gallery-icon landscape\">\n<a href=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/07\/platforms_ld21.png\"><img alt=\"platforms_ld21\" aria-describedby=\"gallery-1-148575\" class=\"attachment-thumbnail size-thumbnail\" height=\"150\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/07\/platforms_ld21-150x150.png\" width=\"150\"\/><\/a>\n<\/dt>\n<dd class=\"wp-caption-text gallery-caption\" id=\"gallery-1-148575\">\n\t\t\t\tPlatforms\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\"\/>\n<\/div>\n<div>\n<div>\n<p>\u00a0<\/p>\n<p><span style=\"text-decoration: underline\"><strong>Instructions:<\/strong><\/span><\/p>\n<ul>\n<li>You can change anytime the dataSet (between LD21,22 and 23) and the graph type.<\/li>\n<li>Zoom with the mouse wheel.<\/li>\n<li>Click on a node to see its immediate neighbors.<\/li>\n<li>The \u201cStart algorithm\u201d button apply a \u201cForce Atlas 2\u201d algorithm to the current graph (see\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Force-based_algorithms_(graph_drawing)\" target=\"_blank\">http:\/\/en.wikipedia.org\/wiki\/Force-based_algorithms_(graph_drawing)<\/a>). You can stop the execution of the algorithm by clicking again on the same button. <strong>This algorithm will place the nodes in a more convenient way, give it a try!<\/strong><\/li>\n<\/ul>\n<p>\u00a0<\/p>\n<p><span style=\"text-decoration: underline\"><strong>TL;DR :<\/strong><\/span><\/p>\n<p>\u00a0<\/p>\n<p>Here\u2019s a quick web app prototype for visualizing interactive graphs of game entries from old Ludum Dare compos. You can see two kind of graphs: Word cloud (most used words for a specific theme) and Multi-Platform (Game names associated with their respective platform(s)).\u00a0<a href=\"http:\/\/cboissiere.com\/projects\/ldviz\/\">http:\/\/cboissiere.com\/projects\/ldviz\/<\/a><\/p>\n<p>\u00a0<\/p>\n<p>Feel free to contact me at\u00a0\u00a0<span style=\"text-decoration: underline\"><em>clemzbox[at]gmail[dot]com<\/em><\/span> or via\u00a0<a href=\"https:\/\/twitter.com\/cboissie\" target=\"_blank\" title=\"Twitter\">Twitter<\/a>.<\/p>\n<\/div>\n<\/div>\n<p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/data-visualization\/\" rel=\"tag\">Data Visualization<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/experimental\/\" rel=\"tag\">Experimental<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/ludum-dare\/\" rel=\"tag\">Ludum Dare<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/web-application\/\" rel=\"tag\">Web application<\/a><\/p>","time":"July 16th, 2012 6:05 pm","title":"[Experimental] Ludum Dare Data Visualization","title_was_empty":false}