{"id":380,"date":"2014-10-14T05:23:03","date_gmt":"2014-10-14T13:23:03","guid":{"rendered":"http:\/\/steveharoz.com\/blog\/?p=380"},"modified":"2015-12-28T22:00:49","modified_gmt":"2015-12-29T04:00:49","slug":"so-much-we-dont-know-about-visualization","status":"publish","type":"post","link":"http:\/\/steveharoz.com\/blog\/2014\/so-much-we-dont-know-about-visualization\/","title":{"rendered":"So much we don&#8217;t know about visualization"},"content":{"rendered":"<p>It&#8217;s always amazing how\u00a0many basic visualization questions are yet to be answered.\u00a0<a href=\"http:\/\/eagereyes.org\/blog\/2014\/large-multiples\">Robert Kosara<\/a> raised one yesterday: What is the most effective way to show large scale differences?<\/p>\n<p>Rather than using a bar chart to represent values, he made a demo that\u00a0sequentially shows dots to demonstrate how many more times a CEO makes than a worker. His solution looked compelling, but I realized that I don&#8217;t know of any literature in vis that has empirically tackled this problem. A goal as simple as visualizing a pair of values of very different scale has few (if any) guidelines.<\/p>\n<p>Furthermore, although there have been a few papers on animation in charts (e.g. [2, 4]), the basic approach of using animation to represent a single value still has many unanswered questions.<\/p>\n<p>Robert&#8217;s demo used both numerocity and duration of the animation to\u00a0visualize each value.\u00a0I\u00a0forked his code to make a demo of some alternative animation styles (options at the bottom), but I don&#8217;t know of any\u00a0literature that\u00a0hints if or why one would be better than another:<br \/>\n<noscript>This is an interactive feature that does not work in your feed reader. Please click on the image below to go the web version to see it.<br \/>\n<a href=\"http:\/\/steveharoz.com\/blog\/?p=380\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2014\/10\/ceos1.png\" alt=\"preview of interactive version\" width=\"930\" height=\"756\" class=\"alignnone size-full wp-image-406\" srcset=\"http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2014\/10\/ceos1.png 930w, http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2014\/10\/ceos1-300x244.png 300w, http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2014\/10\/ceos1-624x507.png 624w\" sizes=\"auto, (max-width: 930px) 100vw, 930px\" \/><\/a><\/noscript><br \/>\n<!--more--><\/p>\n<p><script src=\"http:\/\/d3js.org\/d3.v3.min.js\" charset=\"utf-8\"><\/script><\/p>\n<div id=\"ceo-demo\" style=\"transform: scale(0.85); transform-origin: 0 0; min-width: 650px; background-color: white;\">\n<h2>It pays to be a CEO in the U.S.<\/h2>\n<p>&nbsp;<\/p>\n<div id=\"chart\"><\/div>\n<p>&nbsp;<\/p>\n<div id=\"animations\"><button>Repeat animation<\/button><input id=\"InstantOption\" name=\"rate\" type=\"radio\" value=\"instant\" \/><label title=\"All dots appear instantly\" for=\"InstantOption\">Instant<\/label><input id=\"ConstantOption\" checked=\"checked\" name=\"rate\" type=\"radio\" value=\"constantRate\" \/><label title=\"Every country's dots appear at the same rate\" for=\"ConstantOption\">Constant rate<\/label><input id=\"VariableOption\" name=\"rate\" type=\"radio\" value=\"constantTime\" \/><label title=\"Every country's dots appear over the same duration\" for=\"VariableOption\">Constant time<\/label><input id=\"AcceleratingOption\" name=\"rate\" type=\"radio\" value=\"accelerating\" \/><label title=\"Dot appearances speed up over time\" for=\"AcceleratingOption\">Accelerating<\/label><\/div>\n<\/div>\n<link href=\"http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2014\/10\/ceo1.css\" rel=\"stylesheet\" type=\"text\/css\"><script src=\"http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2014\/10\/ceo1.js\" charset=\"utf-8\"><\/script><em><a href=\"http:\/\/eagereyes.org\/applications\/ceos\">Original by Robert Kosara<\/a>. The source code is available <a href=\"https:\/\/gist.github.com\/steveharoz\/67a134a02253d483851a\">here<\/a><\/em><br \/>\n<h2>Some questions\u00a0raised:<\/h2>\n<ul>\n<li>Is numerocity better than length at presenting large multiplier differences?<\/li>\n<li>Does mapping animation duration to a data value improve acuity, memorability, or tangibility?<\/li>\n<li>Although the Steven&#8217;s power coefficient is known for long\u00a0durations [1], what is\u00a0the descriminability of short durations?<\/li>\n<li>If the total duration of the animation were kept constant, the speed and flicker rate [3] would\u00a0map to the value.\u00a0How do those visual features\u00a0compare with duration?<\/li>\n<li>Do people have to watch the entire animation to benefit from it?\u00a0Or will\u00a0impatient people who stop the animation early misperceive\u00a0the value? Can that be solved by acceleration?<\/li>\n<\/ul>\n<p>The basic answer is&#8230; we don&#8217;t know.<\/p>\n<h2>References<\/h2>\n<ol>\n<li><span class=\"smallfont\">P Burnett. &#8220;Time Cognition and Urban Travel Behavior&#8221;. Geografiska Annaler. Series B, Human Geography. Vol. 60, No. 2 (1978)<\/span><\/li>\n<li><span class=\"smallfont\">J Heer, G Robertson. &#8220;Animated Transitions in Statistical Data Graphics&#8221;. IEEE Information Visualization (2007)<\/span><\/li>\n<li><span class=\"smallfont\">D E Huber, C G\u00a0Healey. &#8220;Visualizing Data with Motion&#8221;. IEEE Visualization (2005)<\/span><\/li>\n<li><span class=\"smallfont\">G Robertson, R Fernandez, D Fisher, B Lee, J Stasko. &#8220;Effectiveness of Animation in Trend Visualization&#8221;. IEEE Information Visualization (2008)<\/span><\/li>\n<\/ol>\n<p><!--<a class=\"twitter-share-button\" href=\"https:\/\/twitter.com\/share\" data-url=\"http:\/\/steveharoz.com\/blog\/?p=380\" data-text=\"So much we don't know about visualization\" data-via=\"sharoz\" data-hashtags=\"\">Tweet<\/a><script>\/\/ <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+':\/\/platform.twitter.com\/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); \/\/ ]]><\/script>--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s always amazing how\u00a0many basic visualization questions are yet to be answered.\u00a0Robert Kosara raised one yesterday: What is the most effective way to show large scale differences? Rather than using a bar chart to represent values, he made a demo that\u00a0sequentially shows dots to demonstrate how many more times a CEO makes than a worker. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[6],"tags":[11,23],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-visualization","tag-d3","tag-visualization"],"_links":{"self":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":4,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":604,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions\/604"}],"wp:attachment":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}