{"id":62889,"date":"2012-08-07T00:00:00","date_gmt":"2012-08-07T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/blog\/interaction-design-for-data-visualizations\/"},"modified":"2025-09-15T14:42:59","modified_gmt":"2025-09-15T17:42:59","slug":"interaction-design-for-data-visualizations","status":"publish","type":"post","link":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/","title":{"rendered":"Interaction Design for Data Visualizations"},"content":{"rendered":"<p>Interactive data visualizations are an exciting way to engage and inform large audiences. They enable users to focus on interesting parts and details, to customize the content and even the graphical form, and to explore large amounts of data. At their best, they facilitate a playful experience that is way more engaging than static infographics or videos.  Here are several ideas and concepts of interaction design for data visualizations and <a href=\"https:\/\/visual.ly\/product\/design-microsites-interactive-websites\">interactive websites<\/a>, using 11 examples from the web. <\/p>\n<h2>1.\u00a0\u00a0\u00a0 The Basics: Highlighting and Details on Demand<\/h2>\n<p> Highlighting and details on demand are interactions that are useful for almost all data visualizations. <\/p>\n<h3>Highlighting<\/h3>\n<p> The <a href=\"https:\/\/visual.ly\/evolution-web\" target=\"_blank\" rel=\"noopener noreferrer\">Evolution of the Web<\/a> is a great example of how highlighting can support the user in focusing on certain parts of the visualization. The colored, curved web feature lines and the browser lines are emphasized on mouseover, allowing the user to see when a feature was adopted by the different browsers. <\/p>\n<div class=\"visually_embed\" data-category=\"Technology\"><img data-opt-id=1274056007  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/evolutionoftheweb.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"The Evolution of the Web\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">by <a href=\"https:\/\/www.hyperakt.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hyperakt<\/a>.Browse more <a href=\"https:\/\/visual.ly\">infographics<\/a>.<\/span><\/div>\n<p> &nbsp;  <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script> <\/div>\n<p>  &nbsp;  <\/p>\n<h3>Details on Demand<\/h3>\n<p>  The <a href=\"https:\/\/visual.ly\/tournament-calender-euro-2012-football\" target=\"_blank\" rel=\"noopener noreferrer\">UEFA EURO 2012 Tournament Map<\/a> interactive shows a rich popup window when the user clicks on games, groups, teams or stadiums. Each popup contains detailed information such as an article headline and quotes for a game. It provides links for further in-depth exploration and gives the user the opportunity to post to social media.  <\/p>\n<div class=\"visually_embed\" data-category=\"Sports\"><img data-opt-id=1890200435  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/uefa_euro_2012.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Tournament Calender EURO 2012 Football\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\/category\/Sports\">Sports infographics<\/a>.<\/span><\/div>\n<p>  \u00a0 <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script>  <\/div>\n<p> &nbsp; <\/p>\n<h2>2.\u00a0\u00a0\u00a0 Making More Data Accessible: User-driven Content Selection<\/h2>\n<p> A major advantage of interactive visualizations is that the content can be changed by the user. The main part of such a configurable visualization becomes the template through which different structurally similar data sets are displayed, and additional controls allow the user to change what data gets displayed. When used in such a manner, an interactive visualization can make a much larger data set accessible than a comparable static graphic. <\/p>\n<h3>Incremental content changes<\/h3>\n<p> In the <a href=\"https:\/\/www.nytimes.com\/interactive\/2011\/06\/19\/nyregion\/how-many-households-are-like-yours.html\" target=\"_blank\" rel=\"noopener noreferrer\">How Many Households Are Like Yours?<\/a> interactive by the New York Times, the user can select the household type by choosing a primary resident and adding or removing additional residents. For each change, the information shown in the visualization is updated, giving immediate feedback about the change. This interaction makes data about many different household types accessible without being overwhelming. A nice detail is the graphical representation of the different residents. <a href=\"https:\/\/www.nytimes.com\/interactive\/2011\/06\/19\/nyregion\/how-many-households-are-like-yours.html\"><img data-opt-id=1929028227  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/nytimes-households.png\"     decoding=\"async\" class=\"aligncenter size-full wp-image-6232\" title=\"nytimes-households\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" width=\"618\" height=\"378\" \/><\/a>  &nbsp; <\/p>\n<h3>Drill Down<\/h3>\n<p> The different expenditure categories in the <a href=\"https:\/\/visual.ly\/where-does-my-money-go\" target=\"_blank\" rel=\"noopener noreferrer\">Where Does My Money Go?<\/a> interactive are shown as bubbles in a hierarchical, circular drill-down navigation element. When the user selects a child, sibling, or parent expenditure category bubble, the navigation element zoomed to the selected bubble. The bubble sizes represent the expenditure amounts. <\/p>\n<div class=\"visually_embed\" data-category=\"Politics\"><img data-opt-id=408562855  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/wheredoesmymoneygo.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Where Does My Money Go?\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">data visualizations<\/a>.<\/span><\/div>\n<p> &nbsp;  <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script> <\/div>\n<p>  &nbsp;  <\/p>\n<h2>3.\u00a0\u00a0\u00a0 Showing Data in Different Ways: Multiple Coordinated Visualizations<\/h2>\n<p>  A single graphical representation typically only shows a few dimensions at once and in a particular way. For example, maps emphasize geographic location and timelines the flow of time. Those commonly used representations also often have well-known interactions such as pan and zoom for maps. By assembling multiple standard parts and coordinating them, you can show different aspects of the data set at the same time.  <\/p>\n<h3>Content Filtering with Control and Dependent Visualizations<\/h3>\n<p>  The <a href=\"https:\/\/visual.ly\/riot-rumors\" target=\"_blank\" rel=\"noopener noreferrer\">How Riot Rumours Spread on Twitter<\/a> visualization by the Guardian uses a line chart as a control for the content of a bubble chart. The line chart shows the rumour-related tweets per hour over time and highlights important events. The bubble chart shows the different tweets, their relation to the rumour and their influence. The user can play the visualization as an animation and directly interact with it. The interplay between line and bubble chart enables the user to explore interesting points in time, e.g. to see the proportion between supportive and opposing tweets when the number of rumour-related tweets started to decline.  <\/p>\n<div class=\"visually_embed\" data-category=\"Social Media\"><img data-opt-id=1973027321  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/guardian_london_riots.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Riot Rumors\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">data visualizations<\/a>.<\/span><\/div>\n<p>  \u00a0 <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script>  <\/div>\n<p> In CNN&#8217;s <a href=\"https:\/\/visual.ly\/home-and-away\" target=\"_blank\" rel=\"noopener noreferrer\">Home and Away<\/a> interactive, the user can filter the casualties that are displayed on the home and away maps by age, location and date, using multiple control bar charts at the bottom of the visualization. The intersection of the filter settings is applied. Similar to the Riots visualization, this one immediately updates while the user is dragging the sliders, enabling rapid content exploration (<a href=\"https:\/\/www.infovis-wiki.net\/index.php?title=Dynamic_query\" target=\"_blank\" rel=\"noopener noreferrer\">dynamic queries<\/a>). Selecting a location also updates the area shown in the home map. <\/p>\n<div class=\"visually_embed\" data-category=\"Other\"><img data-opt-id=855309175  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/cnn_home_and_away.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Home and Away\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">infographics<\/a>.<\/span><\/div>\n<p> &nbsp;  <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script> <\/div>\n<p>  &nbsp;  <\/p>\n<h3>Highlighting and Selection Across Multiple Visualizations<\/h3>\n<p>  In my visualization of <a href=\"https:\/\/visual.ly\/deadly-earthquakes\" target=\"_blank\" rel=\"noopener noreferrer\">deadly earthquakes<\/a>, I used synchronized selection and highlighting across a map, a timeline and a bar chart. Users can explore how earthquakes are distributed geographically and over time, by their magnitude and by the number of casualties. By selecting one set of earthquakes and highlighting another one in the bar chart, users can also compare spatial and temporal distribution of these two sets.  <\/p>\n<div class=\"visually_embed\" data-category=\"Geography\"><img data-opt-id=2029692994  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/earthquakevis.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Deadly Earthquakes\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">data visualizations<\/a>.<\/span><\/div>\n<p>  \u00a0 <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script>  <\/div>\n<p> &nbsp; <\/p>\n<p>Sometimes, switching between multiple visualization types is a breath of fresh air for users who might otherwise get lost in a sea of static charts. The ability to look at data from different angles makes patterns more evident, or sometimes exposes outliers that would go totally unnoticed in a single chart. People are prone to focusing just on what\u2019s right in front of them\u2014so coordinated views nudge us to compare and contrast, to pause and notice small details. It\u2019s not only helpful; it\u2019s a bit addictive, actually. You end up wanting to poke around just a little longer to see if there\u2019s another weird blip hiding in the dataset.<\/p>\n<p>And to be honest, there\u2019s also a bit of humility built into these tools. No matter how expert you feel, data always has a way of humbling expectations\u2014details emerge that contradict a hunch or reframe the original question. That element of surprise, made possible by interaction, is both delightful and occasionally frustrating (in a good way). You start asking yourself, \u201cWhat else haven\u2019t I noticed yet?\u201d If the visualization design is thoughtful, there\u2019s always another thread to tug, another connection to guess at.<\/p>\n<h2>4. Showing Data in Different Ways: User-driven Visual Mapping Changes<\/h2>\n<p> Multiple coordinated visualizations show multiple perspectives on the data at the same time \u2013 leaving less screen real estate available for each visualization. Allowing the user to reconfigure the mappings from data to visual form (visual mappings) for a fixed visualization type is an alternative that can help in maximizing the visualization size. <\/p>\n<h3>Choosing Pre-Defined Visual Mappings<\/h3>\n<p> The <a href=\"https:\/\/www.nytimes.com\/interactive\/2011\/08\/27\/us\/preparations-for-hurricane-irene-and-reports-of-damage.html\" target=\"_blank\" rel=\"noopener noreferrer\">Flooding, Power Failures, Rainfall and Damage from Hurrican Irene<\/a> interactive by the New York Times provides four different map settings that the user can choose from. When the user selects a different setting, the data and the way it is projected onto the visualization layer of the map changes. The map, including the path of the hurricane, and the story next to it provide a constant frame of reference. <a href=\"https:\/\/www.nytimes.com\/interactive\/2011\/08\/27\/us\/preparations-for-hurricane-irene-and-reports-of-damage.html\"><img data-opt-id=1758093004  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/nytimes-irene.png\"  decoding=\"async\" class=\"aligncenter size-full wp-image-6239\" title=\"nytimes-irene\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" width=\"618\" height=\"434\" \/><\/a>  &nbsp; <\/p>\n<h3>User-Driven Visual Mapping Changes for Visual Properties<\/h3>\n<p> In the <a href=\"https:\/\/visual.ly\/android-api-crowd-documentation\" target=\"_blank\" rel=\"noopener noreferrer\">visualization of crowd documentation<\/a> that I created as part of a research project, the user can select the data that is displayed for area and for color from a fixed set of data attributes and operations. The color scale can also be adjusted in a similar way. With this approach, more configurations can be tried out by the user compared to the pre-defined mappings approach &#8212; at the expense having less directed storytelling and some potentially useless or confusing setting combinations. <\/p>\n<div class=\"visually_embed\" data-category=\"Computers\"><img data-opt-id=1601930650  data-opt-src=\"https:\/\/thumbnails.visually.netdna-cdn.com\/AndroidAPICrowdDocumentation_4ff26665b70f5_w587.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Android API Crowd Documentation\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">data visualizations<\/a>.<\/span><\/div>\n<p> &nbsp;  <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script> <\/div>\n<p>  &nbsp;  <\/p>\n<h2>5.\u00a0\u00a0\u00a0 Integrating Users&#8217; Viewpoints and Opinions<\/h2>\n<p>  Engaging users by allowing them to enter their own viewpoints and opinions into a visualization is the aspect of interaction that excites me the most. By merging the data display with the user&#8217;s personal viewpoints, the visualization becomes a more central part of the user\u2019s reasoning process on the displayed topic.  <\/p>\n<h3>User Viewpoints: Weighting Metrics<\/h3>\n<p>  The <a href=\"https:\/\/visual.ly\/create-your-better-life-index\" target=\"_blank\" rel=\"noopener noreferrer\">OECD Better Life Index<\/a> visualization lets users rate the importance of different topics, such as housing, life satisfaction or education, to create personalized rankings of OECD countries. The measures for each topic are weighted by the user\u2019s importance rating. The personal importance ratings can be compared to those of different demographic groups, and the personalized ranking can be shared on social media.  <\/p>\n<div class=\"visually_embed\" data-category=\"Economy\"><img data-opt-id=287271438  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/oecdbetterlifeindex.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Create Your Better Life Index\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">infographics<\/a>.<\/span><\/div>\n<p>  \u00a0 <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script>  <\/div>\n<p> &nbsp; <\/p>\n<h3>Integrating User\u2019s Projections<\/h3>\n<p> The <a href=\"https:\/\/visual.ly\/huffpost-politics-election-maps\" target=\"_blank\" rel=\"noopener noreferrer\">2012 Election Dashboard<\/a> by the Huffington Post has a section where the user can project the outcome for the different states. By clicking on each state multiple times, the user can change his forecast between Obama, Romney, and undecided. <\/p>\n<div class=\"visually_embed\" data-category=\"Politics\"><img data-opt-id=1336536512  data-opt-src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/2012\/07\/huffingtonpost_us_election_2012.png\"  decoding=\"async\" class=\"visually_embed_infographic\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Huffpost Politics Election Maps\" \/> <\/p>\n<div class=\"visually_embed_bar\"><span class=\"visually_embed_cycle\">Browse more <a href=\"https:\/\/visual.ly\">infographics<\/a>.<\/span><\/div>\n<p> &nbsp;  <script src=\"https:\/\/visual.ly\/embeder\/embed.js\" type=\"text\/javascript\"><\/script>  <\/div>\n<p> &nbsp;  Interaction plays a crucial role in <a href=\"https:\/\/visual.ly\/solutions\/data-visualization-information-design\">data visualization design<\/a>. There are many more than just these 11 ways in which interaction can be used, and understanding interaction in visualization is an active research topic. If you&#8217;d like to learn more about interaction in visualization, a good place to start are these two papers: &#8220;<a href=\"https:\/\/www.cc.gatech.edu\/~john.stasko\/papers\/infovis07-interaction.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Toward a Deeper Understanding of the Role of Interaction in Information Visualization<\/a>&#8221; by Yi et al. and &#8220;<a href=\"https:\/\/queue.acm.org\/detail.cfm?id=2146416\" target=\"_blank\" rel=\"noopener noreferrer\">Interactive Dynamics for Visual Analysis<\/a>&#8221; by Heer and Shneiderman. <em><a href=\"https:\/\/larsgrammel.de\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lars Grammel<\/a> is a PhD candidate at the University of Victoria. He researches how everyday users can be supported in data visualization and analysis. You can follow him on Twitter <a href=\"https:\/\/twitter.com\/lgrammel\" target=\"_blank\" rel=\"noopener noreferrer\">@lgrammel<\/a> and on Visual.ly <a href=\"https:\/\/visual.ly\/users\/lgrammel\" target=\"_blank\" rel=\"noopener noreferrer\">lgrammel<\/a>.<\/em><\/p>\n<p> }}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interactive data visualizations are an exciting way to engage and inform large audiences. They enable users to focus on interesting parts and details, to customize the content and even the graphical form, and to explore large amounts of data. At their best, they facilitate a playful experience that is way more engaging than static infographics [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":53024,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-62889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interaction Design for Data Visualizations - Pingback<\/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:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interaction Design for Data Visualizations - Pingback\" \/>\n<meta property=\"og:description\" content=\"Interactive data visualizations are an exciting way to engage and inform large audiences. They enable users to focus on interesting parts and details, to customize the content and even the graphical form, and to explore large amounts of data. At their best, they facilitate a playful experience that is way more engaging than static infographics [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-07T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-15T17:42:59+00:00\" \/>\n<meta name=\"author\" content=\"Carolina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carolina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/\",\"url\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/\",\"name\":\"Interaction Design for Data Visualizations - Pingback\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2012-08-07T00:00:00+00:00\",\"dateModified\":\"2025-09-15T17:42:59+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33\"},\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interaction Design for Data Visualizations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/en\/resources\/\",\"name\":\"Pingback\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/en\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33\",\"name\":\"Carolina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Carolina\"},\"sameAs\":[\"https:\/\/pingback.com\"],\"url\":\"https:\/\/pingback.com\/en\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interaction Design for Data Visualizations - Pingback","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:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/","og_locale":"pt_BR","og_type":"article","og_title":"Interaction Design for Data Visualizations - Pingback","og_description":"Interactive data visualizations are an exciting way to engage and inform large audiences. They enable users to focus on interesting parts and details, to customize the content and even the graphical form, and to explore large amounts of data. At their best, they facilitate a playful experience that is way more engaging than static infographics [&hellip;]","og_url":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/","og_site_name":"Pingback","article_published_time":"2012-08-07T00:00:00+00:00","article_modified_time":"2025-09-15T17:42:59+00:00","author":"Carolina","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Carolina","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/","url":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/","name":"Interaction Design for Data Visualizations - Pingback","isPartOf":{"@id":"https:\/\/pingback.com\/en\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#primaryimage"},"thumbnailUrl":"","datePublished":"2012-08-07T00:00:00+00:00","dateModified":"2025-09-15T17:42:59+00:00","author":{"@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33"},"breadcrumb":{"@id":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/en\/resources\/interaction-design-for-data-visualizations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Interaction Design for Data Visualizations"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/en\/resources\/#website","url":"https:\/\/pingback.com\/en\/resources\/","name":"Pingback","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/en\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33","name":"Carolina","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Carolina"},"sameAs":["https:\/\/pingback.com"],"url":"https:\/\/pingback.com\/en\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/62889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/comments?post=62889"}],"version-history":[{"count":2,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/62889\/revisions"}],"predecessor-version":[{"id":128688,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/62889\/revisions\/128688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/media?parent=62889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/categories?post=62889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/tags?post=62889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}