Data Sketch|es: A Visualization A Month - Shirley Wu and Nadieh Bremer

thank you very much Irene yes yes cool good morning everyone my name is Shirley and this is NY and we are super excited to be back at open viscom this year to talk to you about our project data sketches so let's start from the very beginning we actually met online virtually in the data visualization Centric slack in the fall of 2015 and didn't meet each other in person in real life until open bov in Boston last year those are our happy faces and at ois C we had the pleasure of giving talks and hanging out for three whole days where we hid it off super well so that when two months later when nauy put up her SVG tutorials um from her open V talk I went and dove into it with Vigor and I started chatting with naughty about all of the questions I had of her tutorials and somehow that whole conversation led into US lamenting the fact that we hadn't finished as many full-blown visualization projects as we would like and then I had an idea and I was like Hey naughty fully expecting to be rejected do you want to collaborate on something and then she say yes yay and that's how data sketches was born so in the following week we figured out that we both likeed the idea where we would create a visualization each month around the same topic and do do that for a year to see how two people would create a sort of visual two visualizations starting from the same seat the topic but then diverging into different paths based on our own interests and history but besides sharing the end result we also wanted to write about the creation process and we split this up into the three pillars that we find most important data sketching and coding and initially we thought we could pull data sketches off at about 5 to six hours a week but you know real life usually doesn't agree with plans especially coding plans so since starting in July 2016 we've clocked many many hours into creating a visualization each month and during this talk we'd like to take you through some of the lessons that we learned the challenges that we faced and how we tackled them and the insights that we gathered along the way so let's start with the data we often get asked this question do you get the data first and then come up with your ideas or do you get the idea first and go and find the data from that and for us the answer is always always idea first so for example for my November data sketches I wanted to visualize every single line in the musical Hamilton and I built this filter tool where I can filter by any set of characters as well as their conversations and any themes and then be able to dig into these set of lines from the songs that were left over and the idea came from a question of how do the relationships between the characters change throughout the whole Musical and then what are the recurring phrases and who are they associated with now as you can imagine this data set is not available anywhere online save for the lyrics themselves so I had to go through all of the lyrics and know all of the recurring phrases that pure for more than across more than one song group them into broader themes go through the lyrics manually again so that I can enter them into the computer associating them with the right song and line numbers and also do the same thing for the characters and conversations write the script to aggregate all of that information together to get my final data set in a more extreme example for my October data sketches I wanted to put emojis on the well former president Mr and Mrs Obama's faces and then I built this tool for exploration where you can go through any of the videos I found of their late night talk show interviews and then go through the whole entire YouTube video to look at all of the emojis that I put on their faces and this idea really came from a conversation with Eric Cunningham right there um where he was like wouldn't it be cool if you could just run facial detection on the videos and correlate their emotions with what they're saying and I was like hey you realize this say like I only have one month for this project and then I was like challenge accepted um so I started with first manually Gathering all of the late night talk show appearances off of IMDb I Then I then went and downloaded or I then went and found all of the videos correlating with those talk show interviews from the host channels used a note package to download all the videos and their captions get the time stamp from each of those captions so that I can take a screenshot for every single time somebody talked upload that to Google Vision API because they give me information about faces and their boundaries and emotions and how happy they are or angry or if they're wearing a hat um and then I took that data and then aggregated it with my caption data to get my final data set so what these two lesson these two months taught me was if I'm just curious if I have a curiosity there is some way that I'm going to be able to get my hand on that data set whether it's to manually um go through and enter them or write a script to automate them which by the way I found I think there is a not package for literally anything I can imagine Under the Sun as long as I do all of this responsibly and legally well thankfully not every month is as data intensive as that so for August the obvious theme was the Olympics especially since we're both big fans and I decided to visualize all 5,000 gold medal winners since the very first Olympic Games in 1896 so each of these circles represents uh a group of similar sports like water sports or Ball Sports and then each slice or feather within a circle represents one sport like Athletics we have the first edition over here going outward to 2016 the reddish background are female events and the bluish background are male events and then finally each medal is given the color of the continent in which the country lies that won the Medal so for example America is red Europe is blue and so on and we can see here that there were actually no female events in the very first editions of the Olympics but we've been catching up since then so I actually found the data for this piece from two articles published by the guardian for the 2012 games in London however after getting a rough shape of my visual on the screen I noticed some very obvious medals were missing like hockey from 2012 so my confidence in this data set suddenly dropped drastically even coming from such a respectable source as the guardian and I therefore had to get a sense of the accuracy of the complete data set but I didn't want to have to go manually through all 5,000 medals maybe surely wouldn't so I found a proxy instead so on Wikipedia I could find the number of events that happened during each of the additions and I then compared that to the number of gold medals I had in my data set and if there was a discrepancy I dug deeper to figure out where and how and that's how I found out that for some of the years the horses were also in the data set winning gold which makes for an interesting read to see princess and and Lady merka as women winning gold in the Olympics well eventually I ended up figuring out each discrepancy and making adjustments to my data to get it to the point where I trusted it again so my lesson here was that even if I have data from very respectable Source I really need to get a sense of accuracy and completeness missing data can be harder to find than wrong data and you don't have to check every value like every separate value but think about taking sums and counts and averages and comparing that just to plain common sense or even better a different data source so many people dive straight from data to final visual but take some time and actually sit back and sketch out your ideas on paper we filled many pages of our notebooks since starting because it helps us think and lay out ideas beforehand but my sketches often are very simple only focusing on the main abstract shape that I want to fit my data into colors and layout and design these are things I only vaguely think about but don't act on until I have the data on my screen there's just no use for me to think about these things until I figured out that the data actually works once I've morphed it into the main shape so for the Olympics for example example I had this idea of feathers placing emphasis on the more recent additions but I had no idea if that would look all right once I finally placed all 5,000 Metals together so I had to see if the general shape would work before moving on well I started laying out the feathers but it took a few steps until I saw that luckily it did show potential with the actual data but sometimes there's even no use to start sketching on paper although I will say that's very rare for me but networks are an exception and for our October month I decided to dive into royalty I've always been intrigued you know how intermar the royal families really are are they all cousins twice removed well luckily I found a genealogy data set that contained a gigantic family tree of the European Royal houses it was from 1992 so I had to add one or two more Generations in the main line of succession which was a fun night on Wikipedia not so here we have the final result of all 3,000 people in my family tree the bigger circles are actually the 10 current royal leaders and everybody's connected to their parents their partner and their children and to highlight the interconnections you can hover over anybody to see their Six Degrees of Separation light up and how far they reach into the web but you can also click on any person and let's see if I can get it to work here and any other person to see the shortest path between these two people because the entire web is connected they're all family in one way or another but when I started out with this data set I had no idea what it contained so I just sort of plotted everybody using the most basic network settings and then this happened an explosion of points and lines going out of my screen so I pulled in gravity a bit I could have used D3 expressed during this part but and then I ended up with a useless hairball yay so I call it the points by year of birth well still not helping well thankfully in d3's version 4 you can easily have gravity depend on variables so I pulled the web apart by year of birth as well which was better but it was still a rather uninsightful bundle and at this point I'd already invested several hours into playing with the network settings playing with different types of connections adjusting my data and I was really at the point where I thought about giving up maybe I could try a different angle like how much they're spending each year or something but I gave it one last shot and that's when I decided to focus on the current royal leaders so I plac these in a line and then I let the vertical gravity depend on which of these Royal leaders you were most closely related to and that's when I finally saw it insights for example that the queen of Denmark over here is very Central in the web but that we have the Prince of Monaco whose lines separated from the rest more than 200 years ago and it was around this time that I also started thinking more about the general design aspects and networks often remind me of constellations and with my astronomy background I have a bias for all things space so I turned it into a starring night but I could have never sort of designed this visualization beforehand and Illustrated or sketched it I had to go hand in hand with the actual data and apply my design choices to all of the data simultaneously so that I could see if the results were both interesting and engaging so NTI gave us a really great example of when you land on the right visualization earlier on but that's not necessarily always the case for our March data sketches we had the incredible opportunity to work with Google news laab and their search data dating back to 2004 which by the way launched this morning so please check it out yay um so with access to all of that data I wanted to look into what people are searching for and specifically what people in a country search for around the world so each of these blocks are a topic that the US have searched for in Spring and I can toggle between all of the different weathers weather Seasons um and see the topics the top topics as well as dig into a specific country and look at the top places there I can also expand on the topic so that I can see the search interest and seasonality for that particular topic and the question I really started out was what are the top search countries which turned out to be Brazil and then I was like who's searching for Brazil can I see actually what kind of topics are being searched for around the world in each country country including Brazil and can I see the distribution of uh those searches across the years and then let me actually get a little bit greedy because I want to see the search interest also okay maybe not okay so let's step back and let's try for circles for each of the topics and size them according to the search interest and maybe I can show the countries searching for each of those Topics by overlapping circles and this is kind of pretty and like bubbly so I kind of like it um but does geography play a part in who searches for a country's topics so let's try sorting maybe try sorting all of the topics by distance for a year um and that doesn't look really great so maybe I can just concentrate on one topic across all of the years and that actually kind of looks like it might lend well to a heat map maybe maybe not this is really not going anywhere um I need to step back but I did notice in an earlier exploration that seasonality is quite common in a lot of the topics so maybe I can keep the sorting by distance because that geography is actually still quite interesting but maybe this time around I can try and filter and group by the seasons and that sounds quite promising right nope so it turns out that all of the topics are searched for across all of the seasons making for all of the bar barographs to look exactly the same that was pretty sad but wait then I realized that because there's seasonality the search interest is actually different across all of the seasons so if I just size all of the heights of the uh blocks by the search interest I actually start to get very interesting insights like this one that the US searches for travel more often in the spring than in the fall and finally finally Tada I have my last uh visual my final visualization form that I'm quite happy about where each of the topics are grouped by the country that they're they belong to and there's interesting insights like for example if we just look at the topics for summer Mexico is actually not searched for that often but Canada is and and and um the hotter countries around the world like Thailand and the Philippines aren't search for that often but if we go instead to Winter the opposite is true where Mexico Peaks and Canada drops and bise and Thailand and Philippines the hotter countries actually go up in search interest so the lesson here was sometimes sometimes we don't get the right visual from our first sketch or second or even third try but be patient and go back and forth with a sketch and code because that will help figure out what works and more importantly what doesn't work so that we can go on to our next step so as expected most of our hours are actually spent on getting the data on the screen and here are some of our maybe less obvious coding lessons so in the very first month the topic was movies and therefore it was immediately clear to me I wanted to do something with the Lord of the Rings and I found this super interesting data set that contained the number of words spoken by each character in each scene of all three extended editions of Lord of the Rings amazing so I decided to focus on the members of the fellowship to see we have them here in the center and then to see how many words they spoke at each of the locations around here uh on the circle well no surprise maybe that Gand speaks the most but my favorite Insight is actually uh that Boromir who is really only alive during the first movie manages to speak more than legalist does in three but anyway when I looked at the sketch for this project I found that it was very similar to a chord diagram so I thought I could start from there and then slowly transform the chord diagram to my sketch and the most basic thing to me was if I could figure out how to get these chords to flow Inward and that actually took less time than anticipated which is very rare for me encoding but yeah it worked well getting rid of the excess space and now it's ready to handle the Lord Rings data and some more appropriate colors so we have nine members of the Fellowship so making sure that the centers end up at the right vertical location but this was looking very squished so I used the same setup that I I've used in my bad plot and pulled the two halves apart and finally as you can see these cords are now looking rather unnatural and I therefore decided to dive into learning SVD pads and that was the thing that took the longest in this project sort of figuring out how to make these pads look more natural and that's how this sort of new D3 layout came into existence mutated from d3's Court diagram and many people have done wonderful work that you can use so even if you think you are creating something new you don't always have to start from scratch just pick the thing that lies closest to your design or idea and start adjusting That Remix what's out there already but sometimes we dream up visuals that are unique enough there's no base for us remix off of for that same movie month I wanted to take a look at top summer Blockbusters in the last two decades and reimagine them as flowers so each of the colors are associated with a genre and the size and number of petals for the flowers are their IMDB ratings there are some really really beautiful flowers in here I think like The Dark Knight Rises and Slum Dog millonaire and my absolute favorite is the 1997 Batman and Robin which is this tiny teeny little thing that I think I think is super cute um and I've gotten questions about hey how did you make this um how long did it take and the answer is it's actually really quite simple it just really takes a good grasp of SVG pass and in particular the cubic bezier curve command and so how that works is we start out with a starting point of in my case 0 0 and the way that I like to think about it is we draw a line between that starting point and the end uh purple point and then we take the two anchor points the blue and green and nudge them out until we get the curve that we want and then drew some of the lines and made the curve on the other hand rotated the petals out and added the colors with some motion blur and uh and that's it that's all that it took so the lesson here really was that um when we're creating things really understand the tools that we're using because that's how we can go beyond the prescribed examples and in particular our favorite tool our favorite tool is SVG paths because with that under our belt we can make anything any shape that we imagine up for truly unique results so now that we've seen two examples of adjusting paths what about their positions well going back to the Olympic feathers you know all of these circles and and slices they depended on you know depended on each other but they were very structured they all followed the same concept and at first I tried to calculate all of the rotations of these circles and slices in JavaScript but after having written like 30 lines of code and still not achieving something I knew I could do in r in two lines I just pulled all of these preparations into r as well uh so even if they were visual variables they have nothing to do with the data only with how it will be laid out on the screen so for example I pre-calculated the initial rotation that each of these circles needed to have So eventually the center would end up at the bottom I pre-calculated the offset that each of these slices would need to have based on their predecessors the only placement variable that I kept in JavaScript to keep it Dynamic was the year scale from the center outward because then I could sort of scale the entire circle based on the screen size and even the metal offset is something that I pre-calculated in R and you can use the same idea of visual variables in networks as well that are static and fixed just download the final X and Y locations and the next time place them there immediately saving your viewers from having to run and wait on a heavy Force algorithm so even though they have nothing to do with the data it's perfectly fine to pre-calculate visual variables and attach these to your data set and that's more often the case for fixed data sets than you may think now sometimes it's just way easier to calculate some things outside of JavaScript or if can save you a lot of browser calculations making your visual easier to load and as an edit as a bonus it will make your Javascript file a lot more readable as well so far we've talked about what I like to call the initial 80% the data preparation the ideation the visualization itself but I like to I think that I like to think that the last 20% is extremely important as well so when I started thinking about the story for Hamilton I wanted to to reach a wider audience than usual and that meant that I wanted to make sure that they were engaged enough that they would keep scrolling down the screen so the first thing I did was I had the dots fly in as the as the page loaded into the center to form the Hamilton logo and as the user Scrolls down the dots fly apart and dance in the background and then come back together so that I can tell the reader hey each of these dots are actually the lyrics and as they go into the first section of analysis each of these sections actually correspond with a song so then I highlight the correct song to tell them where to to tell them where the what the song is for each section the next thing I do or one of the other small things I do is if the user decides they want to click on a song ooh that worked cool um I didn't expect the sound to work um you can see I put a progress bar on the right hand visualization oh and you can't really see much else um oh okay but um it gives users the context of where the song is relative to the musical itself another smaller example is for our March data sketches where I used animations um to explain how to read parts of the project but I don't actually trigger these animations until the user has scrolled into that section so that they can always start from the beginning of the explanation no matter where and how and how fast they're navigating and it's these small attention to detail and attempts at Delight that really make a piece for me because it tells the reader that we really care about their exper erience and some more examples of what you can do with the light well on a flight back to Amsterdam I was without Wi-Fi so I couldn't do anything essential and therefore I decided to animate the legend I had for my visualization about fantasy books just for fun and other non-essential things that I did are adding animated gifts of the most memorable moments of Dragon Ball Z that took like two hours to go through all of the gifts um or adding a hover with the most detailed information I had from music nerds in my December music visual or turning the top 10 songs into tiny vinyls or having annotations about weird and silly events that happen in the history of the Olympic games like Henry Pierce having to stop for ducks in the rowing event but still managing to win gold so although getting your data on the screen in such a manner as to make it insightful is key it's the other things to add such as animations annotations weird Legends gifts and more that can make it truly unique and special and even more of a delight to investigate so take some time to think about these aspects as well and now we get to the soft of or what I like to call the best stu um so when naughty and I started thinking about data sketches and talking about it we really didn't expect the kind of reception that we've had we thought that if we could just have fun maybe learn some things and if some of our our friends enjoyed the project that'd be really cool but we've gotten the most amazing responses on both our visualizations and the value of our writeups and we've gotten to meet incredible people and talk to them that we would have never had the opportunity otherwise and we've gained an amazing friendship with each other that we didn't expect at the B thank you we just wanted to have fun um but when we step back and um really thought about the transferable lessons the we agreed that the most most important was if you're about to take on an ambitious project make sure to bring somebody on along the ride with you and make sure that if you're not too responsible like me that the person that you bu that you bring along is very responsible so that you can keep each other accountable and relatively on track for for your project make sure that it's someone that you really respect and hopefully that respect is mutual and most importantly that it's someone that you trust or can grow to trust because that's absolutely crucial to receiving and giving feedback and finally if you're about to do something ambitious like make a visualization from scratch every single month no that no that it would be hard there's there are there have been months where we've been creatively drained and didn't know how to go on but remember you learn as you struggle and it's absolutely amazing the amount that we've learned both technically and personally and it's been absolutely worth the time so over the last 10 months we've learned to find data in the weirdest places that it's not blasphemy to pre-calculate visual variables that sketching can help weed out thinking errors but that you can also sketch with code that SVG pants are amazing and math is too but we already knew that of course and that surprising surprisingly small things can add a sense of delight to your audience and we didn't set out to learn or be confronted by these things like like Shirley said we set out to have fun and in that we definitely succeeded sure it's been intense there were times when we were coding into the night when we would have rather binged the TV show but it has opened up paths and opportunities that we weren't even looking for but happy to have gone so two more months too or maybe three and then what well I can assure you we will not keep on creating visualizations in our spare time at the same break night pace but we do want to share uh data sketches with everybody and we've had so many wonderful reactions especially about the rups so we've decided to create a data sketches publication on medium and anybody who has made a visualization and wants to share his or her writings about the creation process can do that here you can do a full data sketches month collaborate with others on the same topic but it's also fine if it's a single Standalone project the main point is to show how your final visualization is a product of iterations mistakes and improvements so please let us know if you ever have anything that you'd like to contribute well we hope that you'll join us in our final two months of data Ming sketching and coding up our topics and often weird fun and overly elaborate visualizations thank you very [Applause] [Music] [Applause] much