Download as PDF, PPTX
Uploaded byMollie Pettit
Datascope: Designing your Data Viz - The (Iterative) Process
The document outlines a course on data visualization led by Mollie Pettit, emphasizing the importance of storytelling with data. It discusses iterative approaches to problem-solving, brainstorming techniques, and includes case studies like Procter & Gamble's data-driven explorations. The course promotes the integration of human-centered design and agile programming methodologies to enhance data visualization processes.
Datascope: Designing your Data Viz - The (Iterative) Process
- 1. Mollie Pettit •@MollzMP designing your data viz - the process for Data Visualization Course • MSiA • Northwestern School of Engineering • May 18, 2017
- 2.
- 3.
- 4. agenda - why visualizedata? - a common approach to data problems - trying to plan in an ambiguous world - a better (iterative) approach - getting started (the importance of brainstorming) - case studies (three examples)
- 5.
- 6. tell a story MonaChalabi mona_chalabi
- 7. explore data Same meanfor x and y Same variance for x and y Same correlation Same best fit line
- 8.
- 9.
- 10.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. identify the bestlocations to plant new trees unclear problems the data world
- 18. how many? what kindsof trees? move old trees? replace old trees? identify the best locations to plant new trees unclear problems the data world
- 19. aesthetically pleasing? maximize growth? increasefoliage? offset CO2 emissions? how many? what kinds of trees? move old trees? replace old trees? identify the best locations to plant new trees unclear problems the data world
- 20. ecosystem consequences new bugspecies toxins in ground soil drought starts aesthetically pleasing? maximize growth? increase foliage? offset CO2 emissions? how many? what kinds of trees? move old trees? replace old trees? identify the best locations to plant new trees new data emerge unclear problems the data world
- 21. aesthetically pleasing? maximize growth? increasefoliage? offset CO2 emissions? how many? what kinds of trees? move old trees? replace old trees? identify the best locations to plant new trees new data emerge ecosystem consequences new bug species toxins in ground soil drought starts and new solutions! build a bike path add benches plant bushes introduce ladybugs unclear problems the data world
- 22. identify the bestlocations to plant new trees why trees? unclear problems the data world
- 23.
- 24. anticipate refining yoursolution iterative problem solving generate ideas build prototypeevaluation 1-4 week iterations
- 25. human-centered design personas, usecases build device prototypessurveys, interviews, ethnography generate ideas build prototypeevaluation 1-4 week iterations anticipate refining your solution iterative problem solving
- 26. business requirements minimum viableproductsplit testing, A/B testing personas, use cases build device prototypes generate ideas build prototypeevaluation 1-4 week iterations lean startup human-centered design anticipate refining your solution iterative problem solving surveys, interviews, ethnography
- 27. business requirements story/user cards writecodeQA; requirements churn minimum viable productsplit testing, A/B testing personas, use cases build device prototypes generate ideas build prototypeevaluation 1-4 week iterations agile programming lean startup human-centered design anticipate refining your solution iterative problem solving surveys, interviews, ethnography
- 28. scientific method hypothesis experimentmeasurement agileprogramming story/user cards write codeQA; requirements churn lean startup business requirements minimum viable productsplit testing, A/B testing human-centered design personas, use cases build device prototypessurveys, interviews, ethnography generate ideas build prototypeevaluation 1-4 week iterations anticipate refining your solution iterative problem solving
- 29.
- 30. - defer judgement(no blocking of ideas) brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 31. - defer judgement(no blocking of ideas) - encourage WILD ideas brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 32. - defer judgement(no blocking of ideas) - encourage WILD ideas - build on the ideas of others brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 33. - defer judgement(no blocking of ideas) - encourage WILD ideas - build on the ideas of others brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 34. - defer judgement(no blocking of ideas) - encourage WILD ideas - build on the ideas of others - stay focused on the topic brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 35. - defer judgement(no blocking of ideas) - encourage WILD ideas - build on the ideas of others - stay focused on the topic - one conversation at a time brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 36. - defer judgement(no blocking of ideas) - encourage WILD ideas - build on the ideas of others - stay focused on the topic - one conversation at a time - be visual brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 37. - defer judgement(no blocking of ideas) - encourage WILD ideas - build on the ideas of others - stay focused on the topic - one conversation at a time - be visual - go for QUANTITY brainstorm https://challenges.openideo.com/blog/seven-tips-on-better-brainstorming
- 38.
- 39. - explore tools/ libraries - learn more about Chicago - play with social media data - write a blog post the goal recent passion project
- 40. brainstorm recent passion project -text - pictures - geolocation - networks - timestamps - where? - when? - to go? - to avoid? - who?
- 41. iterations recent passion project += - map Instagram activity to Chicago neighborhoods eat at which Chicago restaurants?
- 42. iterations recent passion project putone day on the map
- 43. missing something? missing data recentpassion project
- 44. redefined solution recent passionproject - what patterns might you find?
- 45. - map Instagramactivity to Chicago neighborhoods recent passion project + = eat at which Chicago restaurants? redefined problem
- 46. recent passion project += ? - who’s (not) represented in Chicago’s Instagram activity ? redefined problem
- 47.
- 48.
- 49. final output recent passionproject
- 50. final output recent passionproject @jessfreaner
- 51.
- 52.
- 53. iterative who is missing fromChicago’s instagram?
- 54.
- 55.
- 56. procter & gamble datadriven expertise exploration
- 57. procter & gamblefortune 50 10 product categories multinational 110,000+ employees backstory
- 58. Kathie Bob Grace George Lyle Tim Mollie pizza falafel burrito tacos salad veggies 2 kids girlfriend wife husband dog roommates diapers metals chemistry english healthcare geology informal conversations to clarify goals procter & gamble
- 59. informal conversations toclarify goals procter & gamble Kathie
- 60. Kathie informal conversations toclarify goals procter & gamble
- 61. informal conversations toclarify goals procter & gamble
- 62. informal conversations toclarify goals procter & gamble
- 63. foster collaboration ? ? ? ? informal conversationsto clarify goals procter & gamble
- 64.
- 65.
- 66.
- 67. Lorem Ipsum: anarrative about blankets. Author: Charlie Brown Date: 31 Jan 2012 Lorem Ipsum is a dummy text used when typesetting or marking up documents. It has a long history starting from the 1500s and is still used in digital millennium for typesetting electronic documents, page designs, etc. In itself, the original text of Lorem Ipsum might have been taken from an ancient Latin book that was written about 50 BC. Nevertheless, Lorem Ipsum’s words have been changed so they don’t read as a proper text. Naturally, page designs that are made for text documents must contain some text rather than placeholder dots or something else. However, should they contain proper English words and sentences almost every reader will deliberately try to interpret it eventually, missing the design itself. However, a placeholder text must have a natural distribution of letters and punctuation or otherwise the markup will look strange and unnatural. That’s what Lorem Ipsum helps to achieve. I would like to thank Peppermint Pattyfor her support on studying Lorem Ipsum as well as the infinite wisdom of Linus van Peltand his willingness to use his blanket in my experiments. data-driven expertise exploration procter & gamble
- 68. VS concept sketch comparisons procter& gamble what matters & why?
- 69. VS concept sketch comparisons procter& gamble what matters & why?
- 70. VS concept sketch comparisons procter& gamble what matters & why?
- 71. VS concept sketch comparisons procter& gamble what matters & why?
- 72. VS concept sketch comparisons procter& gamble what matters & why?
- 73. VS concept sketch comparisons procter& gamble what matters & why?
- 74. what matters &why? search engine with relevance metrics demographics human readable expertise summary moving forward procter & gamble
- 75. Lorem Ipsum: anarrative about blankets. Author: Charlie Brown Date: 31 Jan 2012 Lorem Ipsum is a dummy text used when typesetting or marking up documents. It has a long history starting from the 1500s and is still used in digital millennium for typesetting electronic documents, page designs, etc. In itself, the original text of Lorem Ipsum might have been taken from an ancient Latin book that was written about 50 BC. Nevertheless, Lorem Ipsum’s words have been changed so they don’t read as a proper text. Naturally, page designs that are made for text documents must contain some text rather than placeholder dots or something else. However, should they contain proper English words and sentences almost every reader will deliberately try to interpret it eventually, missing the design itself. However, a placeholder text must have a natural distribution of letters and punctuation or otherwise the markup will look strange and unnatural. That’s what Lorem Ipsum helps to achieve. I would like to thank Peppermint Pattyfor her support on studying Lorem Ipsum as well as the infinite wisdom of Linus van Peltand his willingness to use his blanket in my experiments. data-driven expertise exploration procter & gamble
- 76.
- 77.
- 78. prototype iterations procter &gamble high fidelity
- 79. procter & gamble data-drivenexpertise exploration – Kathie Felber, Technical CoP Leader They delivered an innovative, one-of- a-kind tool that I use every day to increase collaboration and better understand our company
- 80.
- 81.
- 82.
- 83. iterative search for expertise ina company
- 84.
- 85.
- 86. Outlier data viz forpublic consumption
- 87.
- 88.
- 89.
- 90. I think youlearn about computer safety. :) When you are a genis at electronics :) Using code and fixing and making computers. :)
- 91. science on acomputer programming / coding how computers work how to use computers studying computers a website, program, or game typing / testing using computers to solve problems engineering someone good at computers internet safety experiments / research / modeling I like it! class / learning / lessons making apps, games, or websites I don’t know what’s inside a computer
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102. keywords/phrases in freetext word cloud
- 103. keywords/phrases in freetext clusters
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 113. like how ucan control the angry birds like u make stuff move :) Learning how computers work.:) blurb list
- 114. like how ucan control the angry birds like u make stuff move :) Learning how computers work. :) slide blurbs
- 115. slide blurbs like howu can control the angry birds like u make stuff move :)
- 116. Learning how computers work. likehow u can control the angry birds like u make stuff move crowd blurbs
- 117.
- 118.
- 119.
- 120. doing is better thanplanning
- 121. while doing keep askingquestions! refine your approach get feedback
- 123. Thanks! Mollie Pettit •@MollzMP• @DsAtweet designing your data viz - the process
Editor's Notes
- #2 -How we go about all data projects at data scope -not specific to data viz -Case studies are data viz specific, but sometimes might speak more generally
- #3 Often in data science, you will get your hands on a new data set and will ask yourself… -now that they have this data, what do you do with it? -In the case of data visualization, -What are the interesting questions to ask/answer? -Why tell the story we’re trying to tell? -Why display it one way over the other? -Why visualize it in the first place?
- #4 -comes down to process and asking WHY questions. -without thinking about the WHY behind what we’re doing -There is a Limit to how much we can accomplish -limit to how effective our end product can be
- #7 -share particular insights, conclusions tell a story to your audience -in a way that’s much easier to digest than table or written word. Could be anything from telling a story in the NYT, or expressing information through an internal tool obvious one
- #8 -most common -often overlooked -get to better questions and figure out next steps. -same summary statistics
- #9 -by visualizing, can see these differences immediately and can figure out how you want to treat them. -Great example of how visualizations can help you make better decisions faster.
- #11 An oversimplified depiction of a typical approach to data problems goes something like this….
- #12 You start with some dataset
- #13 based on data, identify the problem you want to solve
- #14 determine the solution you will take
- #15 communicate the results in some way, be it an interface or a report.
- #16 call this the “Linear” approach - makes a lot of sense on paper. (And wouldn’t it be nice if everything were so simple?) Issue - requires a clearly defined problem from the onset. Not taking into consideration other datasets that might have been useful to define the problem -Additionally, when we start by focusing just on the data we currently have, it limits the kind of problems and solutions you end up exploring and pursuing. -In real-life application, we rarely have such clearly defined problems. -In reality, we need to allow room for the problem (and the solution) to morph and evolve.
- #18 For instance, take this challenge: -identify the best place to plant new trees. -This is an pretty ambiguous problem - so, let’s make it more clearly defined
- #19 For instance, we can define “new trees” by figuring out details like -how many, -what kinds, -whether we want to move or replace old ones, etc.
- #20 And we can define what we mean by “best locations” by asking -best for who and/or what and in what timeframe. -potential goal - bring more people to the river and so we want what is aesthetically pleasing and adds foliage / shade. -Or focus on environmental impact with the goal of offsetting CO2 emissions. -By considering whether the benefit is for the environment, people, or people 5 generations from now, we can set a clear actionable objective and if you want, you could spend a whole year (or more) refining your plan to maximize the exact impact you want. But what happens when plans actually start going into action?
- #21 Typically, new data emerges or circumstances shift. -All of a sudden we discover that there are unintended ecosystem consequences, scientists discover a new bug species, or a drought starts that we didn’t predict. -new information is not inherently problematic, but it is an opportunity to find better solutions or augment current plans by allowing the solution to be redefined.
- #22 By locking in that our solution will be “new trees” too early, -miss the opportunity for more impactful results, especially if we invest too heavily in this initial plan. -Maybe to get people to use this space, we really need more benches and a bike path. -And maybe for the environmental impact we want, we need to introduce ladybugs and plant bushes.
- #23 But why am I talking about trees in a talk about data viz process? I’m using this example to illustrate how in every problem, -there is a lot of room for interpretation and to make choices. -From the onset, no one path is inherently better than another but context can make some solutions more appropriate for a given need. -And not giving yourself the option to redefine this need restricts what comes next.
- #25 Better approach - iterative one -Start with understanding of problem statement -use this to generate lots of ideas about what problems to solve and how (sketches) -From ideas, build low-investment prototypes (sketches) -For evaluation/feedback - put crappy sketches in front of person solving problem for -Based on feedback, find out what sucks about your ideas and generate new ideas to better define problem and possible solutions -next set of prototypes (more sketches/wireframes) -find out why these suck -generate more ideas -higher fidelity prototypes -REPEAT and REPEAT -Rapid iterations help you to hone in on what problems you should actually be solving and coming up with more refined solutions that can actually address this need. -By doing this process in quick spurts, you prevent locking in too early on one path and the crappiness falls away. (1-4 week iterations)
- #26 -not new or unique to data science. -You can see it expressed in lots of different ways (though spoken of in different terms). -For instance, designers in the human-centered design community (like the folks at IDEO),
- #27 entrepreneurs advocating the lean startup,
- #28 and coders involved in agile programming all embrace practices tied to rapid iteration and frequent feedback.
- #29 Really you could even say it is rooted in the scientific method, where you hypothesize, experiment and measure results, just done on overdrive and, over and over again. (Some line about this making us data scientists…)
- #31 REFERENCE IDEO <3 QUANTITY OVER QUALITY
- #39 To illustrate how the iterative process works I’ll now walk through a quick informal example.
- #40 -Last year, my coworker Jess worked on passion project that started with pretty ambiguous goals. -New to Chicago - wanted to learn about the city, play with social media data, and write a blog post at the end.
- #41 The brainstorm started with thinking about -different social media platforms, -what data they contained, -what questions could be asked of the data, and -for what purpose were the questions being asked.
- #42 The project ended up starting as an attempt to map Instagram activity to find out -which restaurants were popular among foodies (who take all those food porn ‘grams).
- #43 -As a quick exploration / sanity check - one day’s activity was plotted to a map. Right away clear that there were: -particular clusters of activity, -but more interestingly, some distinct gaps.
- #44 Was something missing? Or could there be some way to explain what she was observing?
- #45 She started to think about the patterns that might be found if one dug deeper. -proxy for population density? -Or are there areas that are over- and under-represented despite taking population density into account? -If so, does it even matter? -Maybe some folks just like Instagram and other don’t. -Why should anyone care?
- #46 These questions seemed a lot more interesting than the initial question -problem / solution evolved from wanting to figure out -where to eat in a new city -to…
- #47 -to who was (not) represented in Chicago’s Instagram activity. -The reason this is interesting is because social media datasets are sometimes analyzed to find insights about a population, if the social media data itself is skewed, then any results will be skewed.
- #48 -more instagram data was collected -necessary census data,
- #49 -iterations occurred on exactly how to combine, explore, and visualize the data.
- #50 In the end, it was found that black and hispanic populations were indeed underrepresented while white and asian populations were over represented.
- #51 -blog post - “Instagram’s Blind Spot: Chicago as a case study in the limitations of social media datasets”. This blog was -featured on Datascope’s blog, -cross-posted on Partially Derivative’s blog, -and spawned another post about “The Pros and Cons of Social Media Datasets” for Markets for Good.
- #52 If she had taken a linear approach to this project, it would have started with the question about restaurants
- #53 and resulted in recommendations.
- #54 By using an iterative approach, this evolved into a question that is far more interesting and important to explore.
- #55 I like this example because this is a case where using a non-linear iterative approach: -gave the creator, Jess, the flexibility to discover what was to them the more interesting story, -and tell that story accordingly through visualization.
- #56 -At this point, you might be thinking, “Well sure, of course this works for something like a blog post where you make all the decisions. What about the business world?” -two case studies that I think highlight different points, -both are real Datascope client projects.
- #58 A little backstory, -P&G is a Fortune 50 multinational company with 110k+ employees. -matrix company structure: employees are grouped in 10 product categories and under each product exist all sorts of functions (HR, legal, R&D, etc). -In order to foster innovation, P&G also has communities of practice (CoP) where folks that share the same function but belong to different product verticals collaborate. P&G - had the goal of how can we better train people in their R&D departments.. INTERNATIONALLY. We decided to identify individuals who would be best nodes of transmission of information. To do this, we looked for domain expertise. P&G is a big company with lots of people.
- #59 Our client was Kathie, a manager of an R&D CoP. (community of practice) -Thing to know about Kathie is that she has a memory like a steeltrap rolodex. -If she meets you, she remembers your name, the last meal you had together, your home life, the last project you worked on, etc.
- #60 Somehow, she could actually use this skill to memorize -the names, -roles, and -research history of all 2,000 employees that she managed.
- #61 This extraordinary ability helped her perform the important task of fielding requests for subject matter experts from researchers and engineers working on projects.
- #62 But when Kathie was promoted from overseeing 2,000 employees…
- #63 …to 20,000. -Not even Kathie with her phenomenal memory could retain all the information in her head to keep fostering collaboration. She needed a new system. That’s where we came in.
- #64 Our goal was to help Kathie continue to effectively foster collaboration with all these unknowns.
- #66 If we had taken a linear approach to this problem, we would have likely stuck to our initial assumption of the best solution…
- #67 …which was to visualize expertise in a company. -This would have likely manifested with expertise being overlaid on top of a…
- #68 social network graph of the company. -In fact, someone who was involved in the project recently said they were so certain this was going to be the final output that they would have taken bets on it at the onset of the project. This is NOT where we ended up though. I’ll now walk you through how we actually got to our final solution.
- #69 -In a workshop session, we brainstormed on the data sources that could contain the data we needed about people’s connections and expertise. -All the while, we generated a lot of ideas on how to visualize. -From this ideation, we honed in on 2 internal unstructured datasets: -personnel records, which had names, roles, and location information, and -internal research papers, which contained information on who worked on what with whom.
- #70 -Knowing we had these building blocks, we began the quick and dirty prototyping process by drawing many, many sketches to explore… -how to present the information we extracted and -to learn what pieces of information would be truly valuable. -By presenting Kathie with these low-fidelity and low-investment versions of interface components, we got instantaneous feedback and were able to glean insights that were not immediately apparent or articulated. As mentioned earlier, Some of our earliest proposed solutions revolved around the expertise overlaid social network view -To Kathie, these all looked like hairballs stuck at the bottom of the drain, they were hard to interpret, and they wouldn’t help her much --- she hated them! -But she loved the idea of presenting expertise in a clean and simple bar chart that she could quickly read and easily understand. -From here we continued to iterate on what to present and how. -A few of the questions we explored and Kathie’s feedback included:
- #71 Q: Should expertise be presented as static or as dynamic over time? Kathie: the kind of skills she was concerned with did not tend to change over time.
- #72 Q: What is the best way to present evidence of expertise? A facebook type timeline of relevant activity? A profile with capability to click through to original source material? Kathie: both are too text heavy and unnecessary. What was most important was to know who a person was and their expertise, not how they got it.
- #73 Q: How should the tool go about finding the needed connections? Using a search engine that returned recommendations? A “missing links” capability that used machine learning to find missed opportunities for people to work on similar projects across products or locations? Kathie: “missing links” could be very useful down the line, but it does not address her immediate need of fielding requests for subject matter expertises for current projects.
- #74 Q: in a search engine option, how should the search function? Should it be Google style with freeform text? Or Yahoo style with click-through hierarchies? Kathie: hierarchies only add to what has to be memorized. But being able to paste in the exact requests from employees and retrieve recommendations based on keywords would be very useful.
- #75 Q: are recommendations enough or should we include metrics of expertise and connectedness? After all, if we want collaboration to continue past current projects, people tend to build stronger connections when they have more in common. Kathie: metrics to make informed recommendations would definitely help and continued collaboration would be ideal.
- #76 These explorations, along with several I didn’t show you, helped us to determine that for Kathie a valuable interface would include a -search engine with relevance metrics, -profiles with demographics, and -human-readable expertise summary. Understanding these needs we had a blueprint for how to proceed.
- #77 As we continued to iterate and experiment with exactly how to extract and analyze the relevant data from our unstructured textual sources, we continued to iterate on what to show and how to show it in the final interface.
- #78 -We did this by continuing to present Kathie with prototypes, moving gradually from low to higher fidelity. -We also ended up incorporating information that we were only able to learn was important during the exploration of the data itself, (such as presenting the likelihood of collaboration as captured by activity over time. -This mattered because when researcher activity suddenly dropped it usually indicated a shift toward a managerial role and, while expertise did not wane, their ability / willingness to collaborate in research would.)
- #79 -We did this by continuing to present Kathie with prototypes, moving gradually from low to higher fidelity. -We also ended up incorporating information that we were only able to learn was important during the exploration of the data itself,
- #80 -We did this by continuing to present Kathie with prototypes, moving gradually from low to higher fidelity. -We also ended up incorporating information that we were only able to learn was important during the exploration of the data itself,
- #82 -Had we stuck to our original understanding of the problem and solution, we could have spent the whole budget on making…
- #83 …the social network interface pretty badass but we wouldn’t have ended up where we did. -This is not to say that the original idea was wrong. In fact, I still think it’s a great one just not for Kathie’s particular needs.
- #84 Through this iterative process, we were able to develop a tool that Kathie ended up using every single day and met her particular needs.
- #85 Through this iterative process, we were able to develop a tool that Kathie ended up using every single day and met her particular needs.
- #86 Through this iterative process, we were able to develop a tool that Kathie ended up using every single day and met her particular needs. So in this example, we started with a much more complex visualization in mind, but in the end, simple bar charts were the most ideal.
- #89 US is pushing to improve STEM education in the US. code.org is a nonprofit helping to make this happen by providing resource to teachers and schools looking to incorporate computer science education into their curriculum.
- #90 -Important for them to figure out if they’re doing a good job at what they’re trying to do. Reached out to Outlier who helped them develop a series of surveys to help evaluate how they’re doing. -Outlier reached out to Datascope because they wanted to create an visualization for the general public that could hone in on a specific subset of the survey results. -The subset we had to work with is a snapshot of student’s opinions prior to exposure to the data science curriculum.
- #91 Free form text response
- #92 It turns out the students did not have an agreement on what computer science is. Small sampling of three out of thousands of responses. -When the understanding of what computer science is varies so drastically, it’s hard to have a conversation about the topic.
- #93 Outlier grouped them into categories and came to us with these categories and responses. Wanted them to be visualized in some way, but didn’t know the best way to go about it.
- #94 Sat down, had a brainstorm. Sketched out as many ideas as we could think of. Good and bad. Presented them to the client and did our best to convey what would be stressed or not stressed by different types of visualizations. Pen, marker, paper. Nothing fancy.
- #95 Really easy to group people by category in this way and then make comparisons among them. very good for easy comparison scales well no granularity no concept of the size of the study no individuality to students - all clumped together
- #96 Also thought about how to show information on subgroups with barographs. Maybe they’d expand with a click
- #97 or be shown in stack bar charts
- #98 or maybe more information could be displayed on hover. Could get more context, maybe some key words.
- #99 -See everything on more of a macro-scale -show relative sizes in a compact amount of space
- #100 group responses into these bubbles. Circles are not the easiest for the brain to understand, but we thought, well, it might be fun. Because that’s what you do - you write down all the ideas. Also, basically same thing in boxes, maybe simpler for comparison
- #101 Although I don’t love tree maps because they make comparisons difficult, it was worth considering because it would emphasize the fragmented nature of the data.
- #102 Called it cohort view because every single student would be represented by a dot, with different categories represented by different colors. -Harder to show comparisons in the data here, and a bit noisier. -What’s good about it is it would -give individuality to the students and -really emphasize the size of the study that was done. -Also more visually compelling
- #104 We also decided to take a step away from categories and subcategories and explore what was going on within the responses themselves. Word clouds with: -all words in responses could also do this for emotion words, like exciting, cool, fun as well as proper nouns such as code.org, google, and angry birds Although we don’t super love word clouds, by getting these kind of ideas in front of the client, you can get an understanding of whether or not this kind of information is important to them, and you can come up with other ways that these representations can be done that might have more analytic value
- #105 How often certain words co-occur together
- #106 How about the punctuation happening? Are there lots of questions or strong feelings?
- #107 Maybe the kids nowadays only talk in emojis. How many happy or sad faces are going on in these responses?
- #108 How important is it to see specific responses? Do we want to display the raw data itself?
- #109 Also, for each response, would they want to know if they were positive or negative, and perhaps get a collection of the top in each category?
- #110 Upon showing all our sketches to the client and having a conversation about all of them, we learned a few things. -subgroups We also found out what they really wanted to stress -have the individuality of students shine through -to stress the size of the study - how many people took the survey -individual responses and uniqueness of them
- #111 Still a lot of things to figure out. How will we fit in individual responses, etc. That’s when we started prototyping higher-fidelity versions. Here we’re switching from our pencil and paper drawings to starting to get into designing with javascript and D3.
- #112 Even at that point, there is constant iteration and we feel it is important to get designs in front of the client early and often so that we can have constant feedback on what works, what doesn’t, and what’s important. One of the first things we found out is that they thought having the dots in a grid like this made them lose their personality, and made it less clear that these are actual people. Wanted it to be more like a crowd.
- #113 So, gave them a crowd-like feel. Also, didn’t like that the dots weren’t filled in. It was hard to see the color.
- #114 So, filled that in. -Additionally, you’ll notice that almost ever single slide has different colors because unsurprisingly it’s difficult to find 26 colors for a group that don’t look like each other. We eventually, later on, came up with something that worked well.
- #115 -Wanted to show different ways that responses could be displayed. -We made examples using keynote slides because we didn’t want to spend time implementing this if we didn’t know which direction to take. blurb list: shows top five responses
- #116 slide blurbs: show more sentences, gives user control to browse or just watch them cycle through, more compact
- #117 slide blurbs: show more sentences, gives user control to browse or just watch them cycle through, more compact
- #118 crowd blurbs: have quotes pop up and disappear in a rotation. cute, humanizes the dots. First two really good at giving the user control over what they saw. The third was really good at furthering the individuality of the dots, but took away audience control.
- #119 Here’s the end result As you’ll see, we did end up going with the popups, but we had to play with exactly how to implement that. In the end, what we ended up coming to after all these iterative cycles was something that really highlighted what our client wanted to highlight. It also presented things across different cohorts so that you could explore that easily.
- #120 Would like to point out that, as far as iterations go, this was actually a pretty straight forward project. They are often a lot messier than this. If we had started with this idea and gone forward, perhaps it wouldn’t have looked all that different from the end product. However, as you saw earlier, even discovering that this is the idea we should start with was part of the discovery in this process.
- #121 Additionally, there were a lot of details along the way that needed to be worked out, and feedback from our client helped us to know what tweaks needed to be made to deliver the best end product.
- #122 This is all to say that doing is better than planning.
- #123 And while doing, refine your approach, get feedback, and keep asking questions. Because, with data visualizations, there’s no one correct path on how to visualize a thing.
- #124 Because, with data visualizations, there’s no one correct path on how to visualize a thing. -Sometimes data is best presented in a simple bar graph as in this P&G internal tool. -Other times, it is best presented in a way that is less obvious or more complex, like with the Outlier visualization. -And sometimes your story will change all together as you gather more information, as with the Instagram post. Without being open to letting your problem and solution evolve, you might very well get stuck with a less-optimal result and not finding the best way to present your information. All three more successful due to the iterative process and a constant feedback loop. The entire story being told by the visualization changed based on discoveries made during data exploration A corporate tool that took on a form much different than what was originally envisioned. A data visualization created for public consumption that evolved to best stress specific aspects of the study, tell the story in a particular way. TKTK - sometimes complex is better, sometimes simple. Best to go through iterative process to find the best result for that use-case.
- #125 Data Visualization for the Masters of Science in Analytics (MSiA) program at Northwestern School of Engineering.