Using Design and Emotion to Create an Impactful Data Visualization
This session will walk through the process of creating a data visualization based on product design principles and ideas, focusing on overall product goals and user context. A step by step walk through of the design process for two data products, "Twitter TV Set" and "Firework Injuries" will be used as examples to highlight the impact that design and emotion can add to a visualization.
42. Using design and emotion can be effective in
creating a data visualization ―product‖ that
had a strong impact and is therefore a
success.
anya@datablick.com
Editor's Notes
Product must provide value or a solution to a needHow do you measure success? In value / impact (i.e. business value, user views, message conveyed, etc.). If it is not viewed / used, then what is it’s value? How do you prove good decisions were made as a result of data viz?My background is in Economics and Industrial Design so I treat a viz like designing a product.
Link to Tableau WorkbookThis was one of the first visualizations that I did where I played with the custom shape files. It was around version 4 I believe. While very silly and a bit on the “bright” side, it was a success as a “product”.The context was that I was on a plane to Scotland (a very long flight from SF) with my 5 year old son. He wanted to know what I do for a living.There were a few goals:Explain what I did.Make it interesting for a 5 year old.Push the boundaries of what custom shapes could do. In one
When designing a product - your ability to create and communicate is limited by many constraints
Very often, the only ones you have much control over are the Designer constraints. Your narrative ability increases with the more tools, experience, etc. Design and Emotion are some of the strongest tools you have control over.
Often times statisticians are critical of using anything such as graphical “chart junk” elements as the data should speak for itself and anything else is obstructing clarity and potentially misleading.Statistics them selves are a distillation of key attributes and metrics, and not necessarily the whole picture.
http://www.ursuswehrli.com/deUrsusWerhrli is a Swiss comedian and artist. His work is taking famous paintings and other object such as nature (stars, leaves, etc.) and “cleaning them up.If you were a statistician trying to explain Paul Klee – this would be a likely representation
MagritteVan GoughSurat (pointillism)KandinskyStars (nature )Pollock (just put the paint back in the cans…..
Quoted from IF THIS BE TREASON by Gregory Rabassa (translator of Gabriel Garcia Marquez’ One Hundred Years of Solitude)Data can loose some of its meaning without emotion / context, etc
Link toyoutubehttp://www.ted.com/talks/lies_damned_lies_and_statistics_about_tedtalks.html?quote=704Sebastian Wernicke: Lies, damned lies and statistics (about TEDTalks)Video shows how distilling and summarizing information can be very misleading.
This was a quote written by the screen writer for the movie of Ghandi (1982)Not that all data tells a story as amazing an complex as the like of Ghandi, it does however share that capturing correct “spirit” is critical.
Increase use and value by adding an emotional componentWhile working on my Masters in Industrial Design, I read an article on a man that brutally beat his mother for washing his cast iron pan with soap. I found this disturbing, but fascinating and did a research project on emotional attachments to cooking objects to try and understand this attachment. Research on Emotional attachments to Cooking Objects - favorite cooking items:Cast Iron Pan - nurturing, emotional investment in “seasoning the pan” involvementKnives - feeling of power Copper Pots - prestigeInterview with Chuck Williams - favorite item is pairing knife as it is practical useful – best friend in the kitchenHow to incorporate elements of these types of emotional attachments to data viz?
Visualization as communication and analysis deviceUsing three different data visualizations, compare the goals, context and impact that emotion can play on a viz “product”Link to Viz
Link to Viz http://www.jeromecukier.net/projects/crime/murders.html
Link to Viz http://guns.periscopic.com/?year=2013
This was the data viz that won the TCC 2012 Iron Viz Championship. There were many constraints:Data provided was not a topic of particular interest to meData didn’t have any really “interesting stories” and due to structure was hard to link to other data sets. An options under consideration had been, how does poverty effect fatalities and damage. There was only 20 minutes to create the viz, onstage while people watched and commented on the whole thingUsing design and emotional elements, a story was created and presented with impact.The original with no formatting is great as is, showcasing Tableau’s amazing default formatting, but a with a few design modifications, it became a real “winner”.In this case it was very hard to find a “story in the data” so design was emphasized to add impact and emotion to the viz. NY times look and feel: It has to be valid – it looks like news!Credibility: Annotation Layer – talking about the scientific researchersAccessibility: Added the Dorothy intro to make it something everyone can relate toInvite user interaction: Year mention -to draw user into interact with bar chart belowEmotion: Color scheme Red = fatalitiesIs this honest or dishonest?
Again, using Tableau’s well designed default formatting, the viz is already interesting and informative.
Original idea was to be a mash-up of :Dumb Ways to Die video http://www.youtube.com/watch?v=IJNR2EpS0jw And Schoolhouse RockIt was to be a kind of silly public service announcement.
My own arsenal…..
Idea was how silly it is that we blow ourselves up to celebrate independence….
Is the best way to show these things....actual injuries with blood? Or cutaways to hands, fingers, eyeballs...with injuries? Hmmm
Went to a meeting at YetiZen and got inspired by a comic book concept…..
Wanted to work with the crash, boom, pow from old Batman and Robin cartoons.
The images were blocking the bars so it made the data hard to read. When they were added as squares, they were super cool – goal… but in the context of the whole piece, they distracted too much.Many iterations and “playing with the views” to see what worked together to convey the data and a comedic yet advisory “product”
Had to be done as 4th of July was coming up. Wanted to launch a couple days before the holiday.Went with no cartoons and didn’t feel they added to the story. Kept the comic look and feel though and emotion of the violence in cartoons.http://public.tableausoftware.com/views/FireworkInjuries/FireworkInjuries?:embed=y&:display_count=noDesign elements, cartoon colors, narrative “frames” done as a black layer behind the view and black outlines of chart elements added a hand drawn look. As no embedding of fonts, I had to create Headers and view titles in Illustrator and add as images. The only element that I couldn’t get quite right was the year drop down
Not much different in terms of data and layout, but design and emotion made a big impact.
The original idea was that Twitter was the live blog of the world, based on the them of their conference that had just been in SF. Using Viral Heat’s free trial, I tracked 4 keywords on twitterThen I noticed that some of the messages were a bit less than news worthy…. Really people? Royal Baby is that big?I started to think about how everyone is given this opportunity to have a voice and speak what is important to them….. And sometimes it is just blah blah blah….
I started to think about how everyone is given this opportunity to have a voice and speak what is important to them….. And thought of this Shel Silverstein poem
Had I added George Zimmerman and Edward Snowden to the key terms, the results would have been different
And sometimes it is just blah blah blah….So then I thought of this one which made fun of the viewer becoming the view-ee, just like twitter allowed the tweeter to become more news than the news itself.
This viz was much more constrained by time. I had only two nights to work on it….
Cut and pasted images of the charts into Photoshop where the layout was thought out.Headers had to be custom created as did labels. The TV image was used to size the screen for the tv, etc. Once this was laid out it was recreated using images and the floating feature in Tableau 8.
http://public.tableausoftware.com/views/TwitterTV/TwitterTV?:embed=y&:display_count=nohttp://datablick.com/blog/The Final Product – Artistic, interactive, data visualization!