Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; WP_MatchesMapRegex has a deprecated constructor in /home/stevensa/public_html/wp-includes/class-wp.php on line 635

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Translation_Entry has a deprecated constructor in /home/stevensa/public_html/wp-includes/pomo/entry.php on line 14

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_Reader has a deprecated constructor in /home/stevensa/public_html/wp-includes/pomo/streams.php on line 12

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_FileReader has a deprecated constructor in /home/stevensa/public_html/wp-includes/pomo/streams.php on line 106

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_StringReader has a deprecated constructor in /home/stevensa/public_html/wp-includes/pomo/streams.php on line 150

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_CachedFileReader has a deprecated constructor in /home/stevensa/public_html/wp-includes/pomo/streams.php on line 189

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_CachedIntFileReader has a deprecated constructor in /home/stevensa/public_html/wp-includes/pomo/streams.php on line 204

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; WP_Widget_Factory has a deprecated constructor in /home/stevensa/public_html/wp-includes/widgets.php on line 405

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/class.jetpack.php on line 25

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack_User_Agent_Info has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/class.jetpack-user-agent.php on line 61

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/shortcodes.php on line 79

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/shortcodes.php on line 109

Deprecated: Unparenthesized `a ? b : c ? d : e` is deprecated. Use either `(a ? b : c) ? d : e` or `a ? b : (c ? d : e)` in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/shortcodes/soundcloud.php on line 131

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; safecss has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/custom-css/custom-css.php on line 1448

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack_RSS_Links_Widget has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/widgets/rsslinks-widget.php on line 9

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack_Image_Widget has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/widgets/image-widget.php on line 9

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack_Notifications has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/notes.php on line 25

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack_Subscriptions has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/subscriptions.php on line 39

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Jetpack_Subscriptions_Widget has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/subscriptions.php on line 519

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/load.php on line 545

Warning: Unterminated comment starting line 10 in /home/stevensa/public_html/wp-content/themes/themuse-child/functions.php on line 10

Deprecated: Function get_magic_quotes_runtime() is deprecated in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/BootsTrap.php on line 6

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/core/REQUEST.php on line 13

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Nav_Menu_Widget has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Nav_Menu_Widget.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Archives has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Archives.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Calendar has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Calendar.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Categories has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Categories.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_flickr has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Flickr.php on line 5

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Login has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Login.php on line 4

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Meta has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Meta.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_newsletter has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Newsletter.php on line 5

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Pages has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Pages.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Recent_Comments has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Recent_Comments.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Recent_Posts has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Recent_Posts.php on line 4

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Search has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Search.php on line 5

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Tag_Cloud has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Tag_Cloud.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Text has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Text.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TFuse_Widget_Twitter has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/widgets/TFuse_Widget_Twitter.php on line 2

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/helpers/GENERAL.php on line 405

Deprecated: Function create_function() is deprecated in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/core/INIT.php on line 84

Deprecated: The behavior of unparenthesized expressions containing both '.' and '+'/'-' will change in PHP 8: '+'/'-' will take a higher precedence in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/extensions/reservationform/config/utils.php on line 4

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TF_SEO_SitemapGeneratorXmlEntry has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/extensions/seo/helpers/SEO.php on line 4

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; TF_SEO_SitemapGeneratorPage has a deprecated constructor in /home/stevensa/public_html/wp-content/themes/themuse-parent/framework/extensions/seo/helpers/SEO.php on line 21

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; S2_Form_widget has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/subscribe2/include/widget.php on line 2

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Sharing_Service_Total has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/sharedaddy/sharing-service.php on line 352

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Sharing_Post_Total has a deprecated constructor in /home/stevensa/public_html/wp-content/plugins/jetpack/modules/sharedaddy/sharing-service.php on line 374
Data Viz in 6 weeks. Wk 4: Interaction design | Creative Technology
Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Warning: count(): Parameter must be an array or an object that implements Countable in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/theme_includes/THEME_FUNCTIONS.php on line 1681

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 1697

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 1697

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 1697

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Indirect modification of overloaded property WP_Post::$Array has no effect in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Warning: Illegal string offset 'output_key' in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Indirect modification of overloaded property WP_Post::$Array has no effect in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Warning: Illegal string offset 'output_key' in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Indirect modification of overloaded property WP_Post::$Array has no effect in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Warning: Illegal string offset 'output_key' in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Indirect modification of overloaded property WP_Post::$Array has no effect in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Warning: Illegal string offset 'output_key' in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Array to string conversion in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Notice: Indirect modification of overloaded property WP_Post::$Array has no effect in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Warning: Illegal string offset 'output_key' in /home/stevensa/public_html/wp-includes/nav-menu.php on line 601

Warning: count(): Parameter must be an array or an object that implements Countable in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/theme_includes/THEME_FUNCTIONS.php on line 1681

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Warning: count(): Parameter must be an array or an object that implements Countable in /home/stevensa/public_html/wp-content/themes/themuse-parent/theme_config/theme_includes/THEME_FUNCTIONS.php on line 1681

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 1697

Data Viz in 6 weeks. Wk 4: Interaction design

An adventurer has brought to life the floating home from Pixar movie Up

Last week’s topic, Perception and Cognition, dealt with perceptual processing at the level of basic visual forms: shape, size, colour, value, texture, pattern etc. However, visual design and communication are much richer and more complex than that. They involve metaphor, wit, irony, surprise, narrative, interaction, animation and both 2D and 3D form. This week’s class, and the next, addressed these kind of design issues.

Interaction
William Playfair’s bar chart of Scottish imports and exports in 1780 was a static, black and white image intended for print. Needless to say, it had no layers, filters or information tool tips. Its bars could not be manipulated and its data was not live. It was not possible to either drill down into detail or aggregate 1780 Scottish exports with another country’s or another year’s.

Scottish Exports, 1780 bar chart

William Playfair. Scottish Exports, 1780.

As I wrote in Week One of Data Viz in 6 Weeks, data visualization today is more about interacting with data than simply representing it. Designing data visualizations, therefore, involves designing user interface and interaction as much as it involves designing the representation.

Traditional tools for data interaction include layers, filter boxes and query lists, amongst other things. They are a great start, but have some weaknesses from a usability standpoint:

  • • layer and filter menus force your eye off the visualization. Sometimes query lists make you leave the visualization space entirely to make your selections.
  • • as menu items are ticked on or off, the corresponding visualization changes can happen instantaneously, making them difficult to spot, especially if your eyes are still on the menu. This is made worse if the change is subtle or there are multiple views in a dashboard, making it impossible to look everywhere at once. The last thing you want is for your viewer to be checking and unchecking menu items repeatedly, just to try to spot the change in the visualization or the different dashboard windows.

By contrast, direct manipulation is a more hands-on approach to interacting with data. With direct manipulation you interact directly within the data visualization itself rather than via external or peripheral menus and filter lists.

Brava visualization

The Brava visualization, above, employs direct manipulation. The large green dot provides an overview of a patient’s condition on a green/yellow/red spectrum. A second smaller dot, the same colour as the first, provides redundant coding for users with colour blindness as well as a means of direct manipulation. First, its position between green at the top and red at the bottom corresponds to its position on the colour spectrum. Second, its number is mapped between +1.0 (green) and -1.0 (red) to reinforce the colour and provide more precision. Additionally, the small dot has a tail which fades into the background, providing context and trajectory information. Here’s where the direct manipulation comes in: the user can move the smaller dot to any point along the tail to go backwards and forwards in time and access the associated health information.

Animated transitions
Animated transitions also help the user understand changes in the data much better than instantaneous changes. Fathom Information Design’s (aka Ben Fry) Powering the Kitchen is a great example of how and why.

Powering the Kitchen Viz

Click on Appliance View from the tabs on the right side of the screen. Then add the Range from the appliance menu on the left side and watch the energy consumption from the oven range, in green, be added to that of the fridge, in red. Being animated, it’s easy to spot, even if your eye has to move from one side of the visualization to the other.

It goes without saying that movement catches the eye. It is one of the strongest preattentive perceptual features mentioned in Week 3 of Data Viz in 6 Weeks.

Bill Buxton wrote that you need to think about designing the transistions between static states (i.e. views, web pages etc.) as you do about designing the static states themselves. The Powering the Kitchen is a great example of that principal in action.

Learning is a full body experience
Because you learn with your hands as much as your eyes and ears, this course is more than a lecture-based Data Viz ‘studies’ course. Each week, students also get their hands dirty using different open source data visualization programs. This week’s was Gephi, a network mapping tool.

Students also formed teams to played a design charrette card game. By drawing one card from each of three piles, teams randomly chose a Viz Type (eg. treemap, block histogram, small multiples etc.), a Design Feature (eg. metaphor, colour/hue, direct manipulation) and a Data Scenario (eg. pollution levels around Pearson Airport, spread of infectious diseases, Alice in Wonderland). Then they had twenty minutes to brainstorm and sketch as many data visualization ideas as possible that incorporated all three (or more). At the end of the charrette, they presented their ideas to the class to be torn to shreds (joking).

Next week
More Data viz design issues
Data scraping tools

DataViz in 6 Weeks is my blog about teaching Introduction to Visual Analytics at OCAD University in Toronto. Comments, follows and shares welcome. #DataVizInSixWeeks

Anne Stevens I am a multidisciplinary designer working in data visualization, interaction design, innovation and critical design. I am particularly interested in non-screen based physical representations of data and tangible user interfaces.


Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/stevensa/public_html/wp-includes/formatting.php on line 3466