Nadieh Bremer_ Shirley Wu - Data Sketches_ A journey of imagination, exploration, and beautiful data visualizations

["An Ode to Cardcaptor Sakura CardcaptorSakura.VisualCinnamon.com Fig.12.19 The main visual outlining the 50 chapters around the outside and the characters along the inside circle.","Fig.12.20 401 FEARLESS When hovering over a character, such as Sakura here, the lines reveal in which chapter they have appeared (while awake). Sakura is the main character of the story and is in all chapters. Fig.12.21 Hovering over a chapter \u201cpill\u201d in the outer ring, such as Chapter 50 here, shows all the characters that appeared in that chapter.","NADIEH Fig.12.22 Being Sakura\u2019s best 402 friend (and classmate and dress creator and maker of videos), Tomoyo also appears in almost every chapter. a bc Fig.12.23 (a,b & c) When hovering over any of the \u201crelationship lines,\u201d a small annota tion provides more detail about it.","Fig.12.24 403 A close up of the outer CMYK dotted circles, where each cluster of circles gives an idea of the FEARLESS colors used on the (gorgeous) cover art of each chapter. Hovering over any cluster will reveal a line for the characters appearing on the cover (here just Sakura). Fig.12.26 A zoom in on several CMYK dotted circles. Fig.12.25 The fnal legend using the visual itself to overlay explanations on what each of the diferent rings represent.","","One Amongst NOVEMBER 2019 Many 405 SHIRLEY FEARLESS For the last few years, I\u2019ve been wanting to bring my data visualizations into the physical world, to express my data driven stories as immersive installations that people can walk through, explore, touch, and feel. I struggled with this dream for years, until I realized why I felt such a mental block: because I designed and coded primarily in 2D and not 3D, I had no idea how to even think in the third dimension. As soon as I realized that, I created Legends with Three.js and WebGL, and it really helped me understand how to think about space and lighting in the third dimension. But being able to code in 3D isn\u2019t, by itself, enough to create a physical installation; I also needed to learn hardware. In the fall of 2019, I did an Artist in Residency at New York University\u2019s Interactive Telecommunications Program (ITP), a master\u2019s program that is at the intersection of art and technology. I went to ITP with two major hopes: to learn more about hardware and to collaborate with talented people on a physical data installation. To learn hardware, I audited \u201cIntroduction to Fabrication,\u201d where I learned about power tools and machines and played with the laser cutter, and \u201cIntroduction to Physical Computation,\u201d where I learned about circuits and sensors and lights and Arduinos. Through those classes (and the ofce hours I was asked to hold as a resident), I was able to meet my two collaborators: Christina Dacanay1 with her beautiful illustration style and bold uses of color, and Tina Rungsawang2 with her architectural background and keen awareness of space. When I asked them if they wanted to collaborate with me on a project for ITP's Winter Show, they immediately agreed. 1 Christina Dacanay: http:\/\/www.cdacanay.com 2 Tina Rungsawang: http:\/\/tina.pizza","Data SHIRLEY From the very beginning, we agreed that we should focus the project on women For my data gathering in computing. It\u2019s a topic that I\u2019ve been interested in since I created Legends process, please see with women Nobel Laureates, and Tina and Christina agreed that it would also the data section be a perfect topic for ITP, with its emphasis on combining code and computation of \u201cMyths & Legends\u201d with art. where I did almost exactly the same I started my data gathering with a Wikipedia article\u2014the same way as Legends. thing. For the I was able to fnd a page titled \u201cWomen in Computing,\u201d and from there I discovered analysis, I looked at the Wikipedia category \u201cWomen computer scientists.\u201d I started by scraping the list distributions of birth of women in the \u201cWomen computer scientists\u201d category, but after a day of cleaning years and backlinks, and exploring the data, I realized that both the data I pulled and the analysis I did and intersection were too simplistic to tell me anything interesting. Instead of trying to devise a more of keywords in the sophisticated analysis (we were quite limited on time), I decided to take a step back summary\u2014none and try my hand at another dataset. I had initially avoided scraping the \u201cWomen of which produced in Computing\u201d article because the women\u2019s names were scattered throughout the anything noteworthy. paragraphs instead of cleanly in a list, and that would be more work to extract. But once I realized that the data in there was much richer\u2014the paragraphs succinctly described each woman\u2019s accomplishments and even gave an approximate timeframe for most women\u2019s contributions\u2014I knew immediately it would be worth the trouble. For this second attempt at scraping the data, I wrote a script to: 406 1 Use wikijs to access all the links in the \u201cWomen in Computing\u201d page, and flter down to only those that link to other Wikipedia pages. 2 Use Google\u2019s Knowledge Graph Search to determine whether the Wikipedia page is for a person or thing, and only keep those that the Knowledge Graph returned as \u201cPerson.\u201d 3 For each person, use wikijs to pull their Wikipedia article summaries, and for each summary, see if it includes \u201cshe\/her\u201d or \u201che\/him.\u201d Keep those that have more mentions of \u201cshe\/her.\u201d 4 If there were no mentions of either, mark the person for a manual check. 5 Save name, summary, and certainty of gender into a spreadsheet. Once I had the spreadsheet, I went through each person to double check their gender. For each of the remaining 46 women, I wrote a one sentence summary and found an approximate year for their contributions by reading through the \u201cWomen in Computing\u201d article and cross referencing their own Wikipedia pages. Because of the space constraint for the ITP Winter Show, we could only design an installation with a maximum of 20 women. While gathering and cleaning the data, I highlighted approximately 30 women that I found particularly inspiring and brilliant. For the fnal pass, Christina, Tina, and I sat down and narrowed the list down to the 16 women that we found undeniably inspiring. (We achieved \u201cundeniably inspiring\u201d if all three of us, upon reading her summary, said \u201cwow, she\u2019s so cool, I want to learn more about her!\u201d\u2014a very scientifc process.)","Sketch For our very frst brainstorm, we asked ourselves what we\u2019d make if we had This was the most no restrictions on time, space, or money. We went through many diferent ideas, unique and interesting but at the core of all of them was the desire to highlight the invisibility of these sketch section out of women and raise awareness of their incredible contributions through our all the Data Sketches installation. We also wanted to create an experience that would leave people projects I\u2019ve done, and feeling inspired, stimulated, and wanting to go through it again. Finally, we wanted should more accurately to create something interactive, where people\u2019s interactions with the piece could be called \u201cPrototype.\u201d potentially alter it and leave something of themselves behind. For the second brainstorm, we narrowed our ideas down to the more budget and time friendly ones and looked at existing installations for inspiration. We especially liked Judith G Levy\u2019s \u201cMemory Cloud,\u201d3 where nostalgic photographs are placed within small souvenir viewers and people are invited to walk through dozens of these viewers and peek in to see each 35mm slide. We loved the idea of people interacting with each object and decided to do something similar: mapping each object to a woman and placing their information inside (Figure 12.1). We wanted people to take their time reading and learning about each woman, and I especially loved the motion of looking inside, like looking into a secret world and learning something precious. Fig.12.1 407 FEARLESS Initial notes on the aesthetic, interaction, and data mapping of the installation From there, the rest of the data mappings came quickly: the women would be organized in the z axis by the year of accomplishment, from earliest to most recent. The y axis would correlate to the number of their backlinks, so the more backlinks they had and the more \u201crenowned\u201d they were, the higher up we would suspended them from the ceiling because they were more \u201cout of reach.\u201d And for the women with fewer backlinks and less \u201crenown,\u201d we placed them lower and easier to reach, so that more people could read and learn about them. 3 Judith G Levy, \u201cMemory Cloud\u201d: https:\/\/judithglevy.com\/section\/421361 Memory Cloud 1 Indianapolis Museum of Art an interactive installation.html","SHIRLEY To encourage people to \u201cleave something behind,\u201d we wanted to include a \u201csummary board\u201d near the exit with a prompt for participants to place a (gold, 408 star shaped ) sticker by women they felt particularly inspired by because of the installation (Figure 12.2). When we shared our initial ideas in class, our professor suggested an interaction where when one object is pulled down, it triggers others to drop down. This feedback inspired us to group the women so that when a visitor walks up and reads about one woman, the others in the group would drop down and create a path, guiding them through the rest of the installation. Fig.12.2 Initial foor plan with the \u201csummary board\u201d placement courtesy of Tina. We originally wanted a clear enter and exit, so that people would have a path they could follow, but we weren\u2019t able to do this in the Winter Show with the space we were given. With the majority of the idea feshed out, Christina went about sourcing materials, and Tina and I began work on fguring out how to detect a person interacting with our objects in the installation. We brainstormed several ideas: a pulley system that would complete the circuit when pulled, a motor at the top that would unwind the cord when pulled, a capacitive touch sensor on the object, infrared motion sensors placed somewhere nearby \u2026 all the options felt overly engineered, fnicky, or sensitive. When we went to our Fabrication professor\u2019s ofce hours, he suggested we go simpler. He gave us a vibration sensor (where the circuit completes when we shake the sensor, Figure 12.3), and a tilt sensor (the circuit completes when it\u2019s tilted up, Figure 12.4) to experiment with. Fig.12.3 Vibration sensor, which unfortunately would only trigger when I ficked it at full force.","Fig.12.4 Tilt sensor, which completes the circuit when tilted above a certain angle. Slightly fnicky but fairly reliable. Unfortunately, the vibration sensor took quite a bit of force to trigger, which meant We also considered 409 that if we used it in our object a person would have to really shake it (instead an accelerometer, of gently picking it up) for us to know that they\u2019d interacted with it. On the other which would have more hand, though the tilt sensor wasn\u2019t perfect\u2014there didn\u2019t seem to be an exact angle sophisticated readings that it started sending \u201con\u201d signals, and even then those signals were quite noisy\u2014 than a tilt sensor but it was a much better option. was 4x more expensive. We quickly decided Through this process, we realized how fnicky and fragile a motor would be, against it. especially with the thousands of people (many with kids!) coming through the Winter Show and pulling on the cords. Even though we really liked the idea\u2014motion FEARLESS is always great for capturing attention\u2014we decided to nix the idea. Instead, we agreed to put lights in the objects since changes in light are quite noticeable and even more importantly, much easier to control. As soon as we settled on using lights, we knew the perfect way to take advantage of it: we would start the installation with each of the objects dimmed\u2014 a metaphor that despite their important contributions to computing, these women are still largely unknown\u2014and as people went through and read about each woman, their lights would grow brighter and brighter, until by the end of the show, all of their lights would be brightly lit. This not only gave us a great overarching metaphor, it also accomplished our goal of having people\u2019s interactions alter the piece itself. For the lights themselves, we went with Adafruit\u2019s brand of individually controllable RGB color lights called the Neopixel. We originally went with them because we wanted to map data to the color of the lights, but quickly decided against the idea when we realized how hard it was to distinguish most colors from each other (unless they were very diferent, like between red, blue, and green). We did end up keeping the Neopixels though, because they gave us better programming control than most LEDs (and also we\u2019d already spent money on them (\u3003\uffe3\u03c9\uffe3\u3003\u309e).","The hardest part about prototyping and working with these Neopixels was having On the bright side, to solder them to wires. Because the conductive areas on the Neopixel strips I eventually learned were so small and close to each other, we ran the risk of the solder touching and how to use causing short circuits if we weren\u2019t being careful. Fortunately, a kind ITP student a multimeter to test taught me about soldering paste (Figure 12.5), which makes the solder stick only for shorts\u2014but only to the conductive part and nowhere else and it was such a magical time saver. I also after accidentally learned to use a hot glue gun after soldering to make sure that the wires wouldn\u2019t fall short circuiting of easily. These are precisely the sorts of lessons I went to ITP for. (\u0e51\u2022`\u3142\u2022\u00b4)\u202b\u2727\u0648\u202c my (and Tina\u2019s) Arduino boards\u2026 SHIRLEY Fig.12.5 Soldering a Neopixel strip with the help of soldering paste, which was life changing. 410 Fig.12.6 The spray painted orbs, which unfortunately did not have a mirror like fnish. At the same time we were fguring out the electrical components for each object, Christina was sourcing and experimenting with materials. She quickly landed on using fllable Christmas ornaments, and we went about acquiring one from a nearby Michael\u2019s to prototype with, while also ordering three dozen from Amazon at the same time. Christina then went about sanding the nobs of of each ornament and carefully drilling holes into the center for running the wires through. To hide the tilt sensor and Neopixel within the orb, we frst tried to spray paint the interior of the orbs. We had bought refective spray paint that was supposed to give a mirror like fnish, but it didn\u2019t turn out well. That was the night we learned refective spray paint only works on glass and not plastic (Figure 12.6). (\u2312_\u2312;)","Fig.12.7 We also took the opportunity to test out two competing ideas we had: we couldn\u2019t decide whether we wanted people to peek in through a small hole to read the The two options we information, or whether we should leave the orb as is and have a larger area considered for how the to read the information from (Figure 12.7). So it was really great to have the spray orb should look. painted prototypes, because right away we could tell that the peephole would be way too small and too much of a struggle for people to read large amounts of information through. We also realized that we should place the information placard at a certain angle so that people would: 1) know that there was a placard inside they needed to read, and 2) be incentivized to pick it up in the correct direction to trigger the tilt sensor: Fig.12.8 411 FEARLESS Prototype of the second option with no peephole and a large transparent area to read the information through.","As the refective spray paint didn\u2019t work out, Christina suggested cellophane (Christina was an absolute pro when it came to materials). This not only hid the tilt sensor and neopixel, it also had a beautiful efect when lit up in the dark: SHIRLEY 412 Fig.12.9 It was really fun to prototype the materials. The whole process was so diferent from working digitally, where we never have to worry about gathering materials, A quick prototype with that it felt like a fun new challenge. Overall, it took about two weeks for us to settle cellophane and the on all the parts. information printed on vellum, a translucent We had to be strategic about buying just paper to help mimic enough material to test with and ordering frosted acrylic and the rest early enough to get them by the difuse the light, that time we had to start production. can also be printed on. I also learned a lot about prototyping with cheap, readily available materials (like masking tape, cardboard, and tin foil) to mimic the efect and quickly try out an idea.","Code 413 FEARLESS Once we had all the physical components fgured out for the orb, I started on the coding. To control the tilt sensor and Neopixel we settled on, we used the Arduino: Fig.12.10 An Arduino Nano on a breadboard. Arduino is a brand of microcontrollers, and the way we use it is by wiring the pins on the Arduino (circled in orange in the photo) to our lights, sensors, motors, etc. Each of those pins have a corresponding number it is identifed by, and in our code, we can tell Arduino to read a certain pin as input (usually a sensor) and another as output to write to and control. (You never thought you were gonna get a run down of Arduino from Data Sketches, did you? Well, we aim to go above and beyond! (\u0e51\u2022`\u3142\u2022\u00b4)\u202b)\u2727\u0648\u202c Because this was my frst full project with Arduino, I started by keeping my code simple. I used a button as a stand in for the tilt sensor and an LED in place of the Neopixel. I used an array to keep track of which pins the buttons were wired to and another for which pins the LEDs were wired to. I also had an array for keeping track of which buttons were pressed and another for each LED\u2019s brightness. Every time the button was pressed it was the equivalent of a \u201ctilt\u201d and I\u2019d increase the brightness of the LED and save it to the brightness array. I wanted to use the button and LED (which I was already familiar with how to code) frst so that I could get the functionality working frst, before having to worry about incorporating the tilt sensor and Neopixel\u2014both things I hadn\u2019t worked with before.","SHIRLEY Once I had the basic functionality, I went about replacing the LED and push button We needed to set with the Neopixel and tilt sensor in my code. The Neopixel actually comes with its up the Neopixels own library of functions, but because it assumes that I\u2019m programming a strip individually because of many Neopixels, it took me a long time and a lot of guesswork to setup each the wiring between orb\u2019s Neopixel individually. each Neopixel was too long, and the Reading the tilt sensor was a little more straightforward, though I did have electronic signals that to adapt an Adafruit example to accomodate for noisy signals. One of the most carry the instructions interesting lessons I learned working with hardware is that nothing in the physical would decay at those world is clear cut like it is in digital and all sensor readings are noisy. lengths\u2014another physical constraint I\u2019d With the Neopixel and tilt sensor code incorporated, the rest of the code from have never expected. my frst iteration worked perfectly. 414 With one orb working, I had to make sure it could work both scaled up and with groups. As a team, we\u2019d decided to group our list of 16 women into four categories: mathematicians, computer scientists, creatives, and other (executives, inventors, etc.). If any one orb was interacted with and lit up, the rest of the women in the same group would also light up in a delayed stagger. To implement the delayed stagger, I needed to incorporate time into my code. The only way to do this in Arduino is with mills(), which returns the number of milliseconds since the Arduino began running. I refactored my code to store the following information: whether the whole group should be lit up or not, which orb in the group triggered that change, and at what millisecond that change was triggered (which I called startTime ). I could then use that information to loop through each orb in the group, and given the index of the orb that triggered the change (activeOrb ), calculate each orb\u2019s startTime based on the distance of that orb from the activeOrb. I would then set the orb\u2019s brightness if the time was past that orb\u2019s startTime . Fig.12.11 Four Neopixel strips and one orb with Neopixel and tilt sensor all frighteningly wired up for my code testing purposes.","I also included a fade animation by storing a starting and ending brightness 415 FEARLESS for each orb, which made the change in lighting much gentler. Finally, I added in code for a pulsating introductory orb to catch visitor\u2019s attention and explain the installation. Coding in Arduino was an interesting challenge in trying to make sure I was being memory efcient, especially when I had to add in groups and remember milliseconds (which were stored as unsigned longs). It defnitely made my code more complex, but I had a really fun time trying to fgure out the challenge. Fig.12.12 Lifting up the orb makes it shine at full brightness, and putting it back down leaves it slightly brighter than before. I got this interaction working around 1 AM after a few late nights and I was so deliriously happy. Fig.12.13 The Neopixels lighting up with a staggered delay when the tilt sensor in my hand is lifted, and dimming down when the tilt sensor is down.","Production SHIRLEY One of the frst things that Tina did to kick start the production phase was to 3D At this point, I had model an enclosure to hold both the tilt sensor (which is very sensitive to the angle to return home (and of its placement) and Neopixel in place (Figure 12.15, top left). We also received then to a conference a brilliant suggestion to use a phone jack to connect our orbs to our wires, so that in Tokyo), so I wasn\u2019t we could make the orbs easily detachable (Figure 12.15, bottom left). That way able to help through if an orb malfunctioned, we could easily separate it and debug it away from the production. I highly rest of the installation. Tina incorporated the phone jack into her enclosure design, recommend reading and together with Christina, 3D printed seventeen of them and spent roughly both Tina\u2019s4 and 30 hours soldering them all. Christina\u2019s5 write ups for more details on this section. 416 Fig.12.14 3D model of the enclosure (top left), the soldered parts (top right), tilt sensor and Neopixel soldered to a phone jack within the 3D printed enclosure (bottom left), and the 3D printed enclosure inside an orb (bottom right). 4 Tina Rungsawang, One Amongst Many: https:\/\/tina.pizza\/one amongst many 5 Christina Dacanay, One Amongst Many\u2014Connecting Women in Computing: http:\/\/www.cdacanay.com\/itp blog\/2019\/12\/23\/one amongst many connecting womxn in computing","To hang the orbs from the ceiling, they mapped each woman\u2019s position data to long They pre labeled the planks of wood and drilled holes to run the wires through (Figure 12.18). The wires wires to make sure were then plugged into an Arduino Mega, which was powered by an iPhone USB the correct orbs were power adapter connected to a wall plug. plugged into the correct Arduino pins. Fig.12.15 A prototype of the orb wired up and working as a stand alone piece! Fig.12.16 417 FEARLESS Each woman\u2019s information laser etched into acrylic. Fig.12.17 Position data mapped to each plank of wood, the wires taped to the wood and Christina plugging the wires into the Arduino Mega.","SHIRLEY Reflections 418 It was absolutely incredible to see this whole project come together. We received great feedback at the Winter Show, where more than 200 people experienced our installation. Christina and Tina told me stories of young women looking inspired, of little girls giddily sticking gems on our summary board, but my favorite story is that of an older woman who had spent her entire life working in computing. As she went through our installation, she became emotional with the thought that someday, future generations might come to highlight and recognize her contributions as well. I\u2019m so happy that we created such meaningful work that has resonated with so many people, and I\u2019m really grateful for Tina and Christina, the best teammates I could have pulled of this ambitious project with. I\u2019m also grateful to the teachers, residents, and students who graciously ofered their time and wisdom; I don\u2019t think we could have done so much anywhere else except at ITP. I\u2019m also really happy and grateful that I get to wrap up Data Sketches with this project. It encapsulates all of my personal and professional growth from the last three years; I\u2019ve grown from someone who used to only care about the code, to someone who also values design and the end experience. I started freelancing with the hope of learning the kind of challenges I want to work on and the problems I want to solve. I\u2019ve found them. I want to tell human centric, data driven, and personally meaningful stories. I\u2019ve been able to expand the formats in which I do this, from 2D to 3D, from digital to physical. As I fnish Data Sketches and enter a new decade, I\u2019m excited to move onto the next phase of my career and to boldly, unapologetically, courageously pursue my biggest dreams. Thank you, Data Sketches, for all of that courage. Fig.12.18 Dream team (in our natural habitat)!","Fig.12.19 My friend Alice gave me this card before I left for ITP and it perfectly encapsulates my feels as I wrap up Data Sketches and move onto the next phase of my career. 419 FEARLESS","One Amongst Many oneamongstmany.com Fig.12.23 Summary board where people could place a gem in the categories (mathematicians, computer scientists, creatives, and other) they identify most with. Fig.12.21 A timelapse of the Winter Show. More than 200 people came through our installation! Fig.12.24 The major downside of a physical installation is that people outside of that area can\u2019t experience it. Because we wanted people around the world to learn about these women in computing, I created a digital counterpart with D3.js, Three.js, Greensock, and Vue.js.","421 FEARLESS","LESSONSThe lessons are grouped into the sections Data in which they appear in the chapters. However, a few lessons appear in multiple Check Data Accuracy and Completeness chapters. These have been placed in the Olympics Nadieh page 63 section most appropriate. Data Can Be Found in Many Diferent Ways 422 Presidents & Royals Shirley page 135 Books Nadieh page 152 Nostalgia Nadieh page 218 Nature Nadieh page 250 Exploring Data: Ask Questions Culture Shirley page 304 Exploring Data: List Attributes Travel Shirley page 105 Exploring Data: Use Charting Libraries Community Shirley page 336 Manually Add New Variables to Your Data Movies Nadieh page 30 Travel Nadieh page 93 Books Nadieh page 153 Sketch Add Context Using Remaining Visual Channels Olympics Nadieh page 64 Music Nadieh page 194 Design to Maximize for Delight Books Shirley page 176 Music Nadieh page 196 Nostalgia Nadieh page 219 Fearless Nadieh page 398 Design with Code Presidents & Royals Nadieh page 125 Nature Nadieh page 256 Culture Shirley page 306 Marks and Channels Movies Shirley page 47","Sketch to Discover and Remove Thinking Errors Remix What\u2019s Out There Olympics Nadieh page 66 Movies Nadieh page 38 Travel Nadieh page 94 Myths & Legends Nadieh page 353 Culture Nadieh page 283 Scales in D3.js Movies Shirley page 53 Visual Metaphors SVG vs. Canvas Community Shirley page 338 Olympics Shirley page 82 The Extensive Applications of D3.js\u2019 Functions Code Community Nadieh page 325 Trigonometry Annotations Are of Vital Importance Travel Shirley page 109 Myths & Legends Nadieh page 362 Web Workers Nature Shirley page 266 Canvas Interactions Books Shirley page 181 423 Combine Tools Music Nadieh page 200 Fearless Nadieh page 399 Custom Animations Nature Shirley page 269 Dataviz for Both Mobile and Desktop Culture Nadieh page 290 Drawing with SVG Movies Shirley page 50 How Scrollytelling Works Presidents & Royals Shirley page 140 Know When to Ask for Help Community Nadieh page 329 Learn to Love Math Culture Nadieh page 287 Myths & Legends Nadieh page 350 Fearless Nadieh page 390 Outside Strokes with SVG Music Nadieh page 197 Precalculate \u201cVisual\u201d Variables Olympics Nadieh page 68 Books Nadieh page 161 Fearless Nadieh page 387","THE STARTING AND THE FINISHING Interview with Series Editor Tamara Munzner In this interview, we sit down with Tamara Munzner, beyond just the technical. When I went into Data Sketches, professor of computer science at the University of British I had about four years working as a software engineer on the Columbia and editor for this series of visualization books, front end. I knew I was strong with D3.js and would be able to discuss how we came up with the idea for Data Sketches, to create visualizations in SVG or canvas. But when the \u201cbookifcation\u201d process, and what we plan to do when I frst started, I didn\u2019t know what I didn\u2019t know. I didn\u2019t fully it\u2019s fnally printed. understand how important the design component would be. I didn\u2019t know how much there was in terms of data analysis. This interview has been edited for brevity and clarity. I also didn\u2019t know what it took to tell a compelling and easily navigable story. All of this is so important to me now, but when Tamara Munzner: This has been a long process, but you\u2019re I frst started with Data Sketches, I often approached it with almost done. What do you know now that you didn\u2019t a focus on fun and less of a focus on the end user. But now know before? I recognize that the end user is extremely important, that their ability to read and understand the whole visualization Nadieh Bremer: I learned a lot of new techniques, such as is critical and I should not do something just for the technical working with WebGL, getting a better grip on canvas, and fun of it. I think that\u2019s my biggest learning lesson, coming fguring out how to visually render bigger datasets on the in as an engineer but then refocusing to place more emphasis screen. I also learned how to go from making singular and on design. smaller visuals to making an entire dataviz driven story. This taught me that it\u2019s more than just the visuals and the layout; TM: What fantastic answers. You learn so much when writing you must be able to design for multiple visuals and make them a book, and what, if anything, did you learn from the process fow together. That\u2019s what I took away from Data Sketches of bookifcation? in terms of the technical part. I also learned how extremely valuable it is to have a teammate that you can go through this SW: Writing is hard! I don\u2019t know about Nadieh, but I know process with. I didn\u2019t have to do everything on my own, and I really struggled with the bookifcation part. Data Sketches knowing that Shirley was there for me helped immensely. started out as something we were just doing for fun, so I never felt the obligation to have the write ups make 100% sense. Shirley Wu: I don\u2019t know if I can say that any better than In fact, sometimes I would just dump all the screenshots, add Nadieh did. It was so valuable to have someone to bounce some words in between and that was my write up. I think my ideas of of and to discuss visualizations with. We also that was still helpful for people because they got to see all went through this whole freelance journey together, learning of those notebook sketches and all of the diferent iterations together. From a personal perspective, for Data Sketches, of my code. But for the bookifcation part itself, the biggest the biggest thing for me is that I\u2019ve really expanded my skills struggle I had was having to really think through and explain 424","my process; not just show it, but also explain it. I had to help about the format, too, and we fgured we could just pass code people understand my thought process and explain why back and forth and maybe it could be a 12 month thing with I did certain things\u2014which is often, honestly, for no apparent 12 projects. I didn\u2019t even think about how big that would reason other than simply trying it out. So, I was really be in terms of time commitment. We came up with the format challenged by turning all my write ups into applicable in an hour, just shooting ideas back and forth, and we spent learning lessons. much more time on the name. We literally took two days just brainstorming the name. NB: For me in general, the bookifcation and the writing of the chapters themselves, wasn\u2019t too difcult. I don\u2019t mind writing. TM: Do you have any advice for people who might want However, I have a tendency to want to explain everything to do something similar? in lists: \u201cAnd then I did A and then I did B and then I did C,\u201d and my write ups were a lot like that. So as the projects NB: My advice is to thoroughly understand the project before became bigger, the write ups became longer and longer and you start and consider placing constraints on how you longer. For example, my frst write up was about nine pages approach your work. For example, if we\u2019d placed one, saying in the book manuscript, and my fnal one started out at 25! that whatever we made after 20 hours, we\u2019d use, it may have This process taught me how to downsize what information been a little easier. You don\u2019t want to constrain your creativity, I give to a reader and to present it more succinctly. This, of course, but sometimes constraints can actually make you in turn, helped me get a better grip on what is interesting and, more creative. I also recommend doing it with somebody else. conversely, what is just rambling. I learned that it\u2019s not easy Working with Shirley helped with this process a lot and I think and it was a little bit painful to have to downsize but I\u2019m thrilled the partnership works really well. with the result and I know people will enjoy the writing better. I didn\u2019t want to be responsible for making this a 600 page SW: I appreciated that a lot too. Basically, between the two book, so making it more concise was critical for me. I wanted of us, I prefer to look more into the future and plan for the to focus on the actual story without going on too many future and Nadieh is so good at making sure that what needs tangents and potentially losing the reader. The most painful to be done in the present is done in the present. It\u2019s a very part for me, overall, was mostly the fact that this process has good balance. been a long one. This book was always in the back of my mind and that can get kind of stressful, so I really wanted to have TM: I\u2019ve got to say, I think it was a match made in heaven. it fnished. You were both able to push each other towards doing things you might not have done individually. TM: Fair enough. I think the process of creating a book is always a mix of the logistic and technical, and then just SW: Yeah, defnitely. the emotional part of doing the thing and making it be done. It is not at all easy. Can you say a little more about the mindset TM: Both for the starting and for the fnishing, which are you had when you started the project? Why did you decide two excellent verbs. What are you going to do the day you this would be a good thing to do? physically pick up a book that is your book? NB: Well, it seemed like a fun way to make new projects. SW: Cry in joy. Cry with joy. It\u2019s done! We started Data Sketches because we felt as if we hadn\u2019t created enough actual projects in the previous months. NB: Yeah, happy dance! We felt like having this collaboration and forcing each other to work on it would be a great way to consistently create new SW: Just hug it, cry, tears, dance around, and then things\u2014and with a high level of fun woven into it. I did not go on with life. expect it to become the thing that it became. Even though this is the end of our Data Sketches \u201cAwesome SW: Yeah, defnitely. When we started this project, we were Collaboration Marathon,\u201d we intend to keep working on chatting back and forth on Slack. It\u2019s not even that we were projects that excite us, together or individually. Follow our like, \u201cOkay, we\u2019re going to do this super serious, big project. latest progress on Twitter and Instagram at @sxywu and It\u2019s going to be a big deal.\u201d We were actually saying \u201cHey, @NadiehBremer, and on our websites at shirleywu.studio do you want to do something together?\u201d We were very casual and VisualCinnamon.com! 425","Acknowledgments No book (or large-scale project) happens in a vacuum. We want to thank our loved ones, our friends, and all of the friendly strangers on the Internet that have supported us through this journey and gotten us to this point. To Alberto Cairo, for giving us the idea of creating a book and all of the encouragement, feedback, and mentorship he\u2019s given us; Tamara Munzner, for never hesitating to champion us, including us in her data visualization book series, and encouraging us every time we needed that extra push or piece of advice to keep going. To our editors Stephanie Morillo and Tianna Ma\u00f1\u00f3n, for making sure our rambles and tangents were turned into beautiful, coherent sentences; Kirsten Barr, Elliott Morsia, Sunil Nair, and the staf of CRC Press who have guided us throughout the publishing process. To the team at Praline who turned our written manuscript and images into this wonderfully designed book weaving together the images and text in such a way we were once afraid was impossible. To Alice Lee, the creator of our gorgeous cover, who had endless patience and listened to every one of our exceptionally specifc requests. To the many people who have looked at our works in progress to provide thoughtful feedback, gave tips to solve particularly gnarly coding problems, or replied to our Twitter calls for help. In particular, we wouldn\u2019t have reached the same level of sophistication in our projects without the help of RJ Andrews, Taylor Baldwin, Tony Chu, Erik Cunningham, Matt Daniels, Matt DesLauriers, Sarah Drasner, Russell Goldenberg, Ian Johnson, Isaac Kelly, Susie Lu, Elijah Meeks, Philippe Rivi\u00e8re, and Sam Saccone. For giving feedback on our fnal manuscript to polish it as much as we could: Zan Armstrong, Peter Beshai, Mike Brondbjerg, Chen Hui Jing, Jen Christiansen, Michael K Freeman, Andy Kirk, Maarten Lambrechts, John Burn Murdoch, Mollie Pettit, Visnu Pitiyanuvath, Jane Pong, Lisa Charlotte Rost, Sara Sprinkhuizen, Alli Torban, Jan Willem Tulp, Jim Vallandingham, Jonni Walker, and Amelia Wattenberger. To Sonja Kuijpers and Nicholas Rougeux for joining us as guests for two of the topics in the online version of Data Sketches, and experiencing the stress of creating an elaborate data visualization from scratch with us.","From Nadieh From Shirley My biggest hug to Ralph, my highschool sweetheart for 16 To Alex, who\u2019s been my boyfriend, fanc\u00e9, and now years and counting now, for understanding that my visuals husband through Data Sketches and the creation of this needed many evenings of sitting behind my laptop and still book, who\u2019s stayed with me and cooked delicious food for making sure that I remembered to drink, eat, and go to bed me as motivation\u2014even through all of my whining about this on time. To Snookie, my weird laser pointer obsessed cat, book; my (Asian) parents, who really don\u2019t understand my who has been my cuddle support throughout it all, sleeping career choices but are (silently) proud of me nonetheless; on her pillow next to me on my desk while I was drawing, and my (Asian American) sister, who frequently tells me how working, and writing on each project. proud of me she is to make up for how much our parents rarely voice it. And thank you so, so very much, Shirley, for taking me along on this amazing journey which I\u2019d never dared to have done And, fnally, a huge thank you to Nadieh without whom I don\u2019t on my own. think I could have ever fnished this gigantic, monumental, ambitious project. Liefs, Nadieh \u0295\u3063\u2022\u1d25\u2022\u0294\u3063 (\uff89^\u30ee^)\uff89*:\u00b7\uff9f\u2727! \u2661 Shirley The diferent ways Nadieh\/Shirley\/Bremer\/Wu would combine into one person, as imagined by our friend Susie Lu."]