Animated Information Graphics: using data and motion to reveal the story

2. Introduction: Hi. I'm Graham Roberts. I'm a Graphics and Multimedia Editor at the New York Times, where I work with a team of visual journalists who aim to shape and deliver information by reporting, writing, designing, drawing, and programming information graphics for both the printed newspaper and our various digital editions. This work takes many forms as: charts, maps, diagrams, interactives, motion graphics, and long-form multimedia pieces. In the videos that comprise this class, we're going to look specifically at the animated information graphic form, and I'll share some of the knowledge and best practices that I think helped to make this storytelling successful or not. We're going to start with how to approach choosing the right kind of story, and proceed step-by-step towards creating a storyboard for an information-based motion graphic. For those of you looking for a software training and animation training, that's really beyond the scope of this class, but we'll cover that in some follow-ups to the class. This class will serve as a guide for how to think about your approach in making these projects compelling, clear, and revealing. Note that the storyboards you create however are your graphic in the sense that all the thinking, and, decisions, and reporting necessary will be well represented once you've reached this point in the process. I'm going to be teaching by example, and give you a behind the scenes look at my approach and thinking in my own work, and hopefully through that share some insight into ways to approach your work. I hope you'll join me, and let's get started in Step 1. 3. Finding the story: The first step is to find your story. An obvious beginning, but one that should be considered carefully. Choosing the right kind of story for your graphic is key. Not every story after all, will lend itself to visual explanation or to the animated information graphic form. So choose your story carefully. Consider whether or not the event or data set you are exploring can be best expressed by a visual explanation. Make sure that by showing you aren't just adding flare or eye candy to a story, but that the story demands a visual presentation to be fully revealed. In other words, if the story can be fully comprehended without your visual explanation, you're on the right track. At the same time, and this may sound counter-intuitive, file away any visual ideas. Don't discard, but also don't get too attached. You may have some potentially great ideas about how you want to present your story visually at this stage, but you don't want to jump too early to make the graphic you think you should make. I find that it's best to wait until you have fully reported the topic and let this reportage guide what direction you will ultimately take. As I mentioned in the introduction, I'm going to use some of my own projects to give a real-world impression of each step. In each step, I'm going to return to a motion graphic called Up And Down from Ground Zero, that I created about the rebuilding of ground zero in Downtown Manhattan to demonstrate how I used each of these steps in my own process and how I made the necessary decisions to arrive at the structure of the final piece. For example, in choosing a story, this project blend itself well to the animated information graphic form, and that it includes a great deal of visual complexity in need of a clear explanation. The story that needed to be communicated about this culturally significant event demanded a visual treatment to be fully understood. For each step, I'm also going to give an alternate example to give some more perspective and maybe help spark some ideas. For this step, let's take a look at a project that blend itself well to this kind of visual storytelling called "Held by the Taliban". In this project, we tell the story of New York Times reporter David Rhodes' escape from a kidnapping by the Taliban. Using David's recollections of the space, we recreate the moments of his escape step-by-step. Only a visual explanation could give such a rich understanding of the events and clearly demonstrate how his escape played out. It was something you really needed to see in order to get. Having unique access to a source with firsthand experience of an event can make for a perfect story to choose for this format. The approach I took with this project was to model the physical space in Maya and make adjustments with David right beside me, almost like a sketch artist. This is another good example of the type of story that works well for an animated information graphic treatment. If you're working along with your own project in this class, think about the kind of story you want to tell and the side of a visual explanation will best reveal the core ideas. 4. Reporting your story: Once you've decided on your topic, the next step is to report your story. Keep in mind that the beginning stages of your reportage will likely be nonspecific to the form in which you're going to tell that story, same kind of general collection you might do for a purely written piece. Try to learn everything you can about your topic and only then begin to consider the more specific reporting you'll need for a visual approach. You may ultimately need a more complete data set to do a comprehensive visual display of the information, then you might need in comparison to the data you might use for a written piece. If you're going to be working with diagrams, you may need to collect reference photography that goes beyond the traditional photography coverage a news photographer might consider, especially if you're going to use photos as reference for recreating a scene. Overall, educate yourself fully on your topic so that you'll have a broad context for whatever approach you may take later. You'll also want to consider at this point the expert sources, technical sources and data sources that can later provide the level of detail that you'll likely need for your visual explanation. By example, in Up and Down, I collected information on the history of the site and the plans going forward for the site in order to understand where it had been and where it was going. This included learning about the original slurry wall and how that interfaced with the planned museum space, what infrastructure will need to be built underground versus above-ground, what kind of partners and departments were involved with the construction, what influence will the original World Trade Center design have on the new design, what iterations had the designs gone through, and more generally, what were the challenges and opportunities. I took many photographs from as many different angles as possible to have good visual reference to tap into later. I also pursued sources that could provide me with, in the best cases, architectural models of elements of the site and show out of that architectural plans that I could use to create my own models if necessary. Sometimes the reporting stage will mean capturing as much as you can about a singular moment or event. In our projects called Connecting Music and Gesture, the goal was to demystify the world of conducting and try to better understand how and why it's so important. Not knowing exactly what we were going to do visually, we captured everything we could about this moment of performance. We used motion capture to track the conductors movements. We shot video of the performance. We recorded audio of the performance. We used a microphone on the conductor to capture his comments. We recorded an interview with the conductor. Capturing an event in this comprehensive way will give you the flexibility you'll need later when you begin to narrow the focus of your project. Find out everything you can about your topic of choice, and we will continue in step 3. 5. Separate the signal from the noise: The next step is to look at what you've collected and begin to separate the signal from the noise. Having taken abroad look at your subject, it's time to hone in on the most interesting aspects that you'll want to highlight. Showing everything and anything will likely not be the most revealing way forward and any story will have a number of angles and approaches. Find the best angle for your explanation. What specific elements of the story can be best illuminated through the use of visual explanation. Think of ways to make your presentation visually exciting and engaging. This will be your best opportunity to demonstrate your unique vision. It's possible your story's been covered visually in some way or another already. You should try to find a unique and clarifying way to organize your presentation, but at the same time, always focus on clarity. Your explanation should always have clarity of understanding as its highest goal. Avoid choosing forms that are different, for differences sake. You've likely collected a large amount of information. Your job now is to bring to the surface out of that noise the signal or all of the points that matter that are revealing and that are interesting. Back to our primary example, after learning everything I could about the Ground Zero site. I was struck by how much work had actually been accomplished there, most of it underground. The general public perception at this time seemed to be, having not seen towers rise from the site, that therefore, not much was going on and I sense that this was a point of frustration for the people working on the site, as well as for New Yorkers who wanted to feel that progress was being made. I also learned how challenging it was to weave a museum, subway system, commuter train system, and many other elements together into such a small area. Projects controlled by entirely different companies and organizations, forced to work together by circumstance. Many highly detailed renderings of what the new skyline would look like had already been created by this point. What would be the best explanation for what was going on there and top of that, what would be a fresh approach? Despite the great level of detail on reference I had in some cases, I decided that rather than create slick photorealistic renderings, I would instead try to convey how complicated the project was, both below and above ground. The challenging and intricate way that all of these disparate projects fit together reminded me of the 1980s classic game Tetris and so this is my influence. I devised a visual language in which simple colored blocks, each representing a major distinct element of the project, would fly together slowly building up the site and to help understand below and above ground and to see both at once. I design the street grid as transparent, glass-like surface representing ground level. We're going to talk more about collecting data and assets for the next step. But if you already have a data set at this point in the process, it can be helpful to sketch with that data to find the best angle for your story. You can do this in Illustrator or processing or with a pencil if you prefer. By example, in our 2012 Olympic results graphic for long jump, my colleagues sketches with the results data revealed that, what made the story interesting was not merely seeing all of these results together, but by emphasizing something very unique about the sport. That results don't continue to improve steadily like in many other Olympic sports and the best results still stands from Bob Beamon jump in 1968. This is what we ultimately emphasized in the animated visualization 44 years. Even the winner in Beijing, just four years ago, is the most two feet back. Take a close look at all the reporting you've gathered on your story and try to separate out the truly interesting elements, and we'll continue in Step 4. 6. Collecting data and assets: We've chosen a story fully reported on it, figured out some interesting things to reveal. Now we need to collect all the data and assets our visual explanation will require. Knowing your approach to the story will affect the kind of data and assets you will ultimately collect and to what level of detail. Determine what you will need to create the project. If you're working with an architectural scene, for example, can you work with photo reference to build models that may not be built accurate but still tell the story, or do you need a level of detail that requires architectural plans and elevations or even CAD models? If you're collecting a data set, will you be working with specifically narrow timeframe, or will you require data across all time? Collect and organize your data and assets. A good source for 3D models to play around with is Google's 3D warehouse. You can use SketchUp, which is a free download to play around with these. A Google search will lead you to many free online data sets you can experiment with. But one place you can start is Data.gov or you can learn a bit about data scraping, which is a fairly common task in journalism. If necessary, clean up your data or assets into a usable form. Back to our up and down example, working with an architectural project in this case, my ideal assets would be CAD or architectural models of the various structures received directly from the builders. This was possible in a few cases, but because of the nature of the project, which involved a wide range of old and new structures and a tight level of security around the specifics of the site, architectural models were only available in a limited capacity. Additionally, the models I did receive were so highly detailed as to become a burden. While architects want to know where every screw and bolt will be, the detail I would require for the story I wanted you to tell me these assets difficult to work with and so a great deal of cleanup was required to get these models into a usable form. I think if you're working on this project, you'll find this happens more often than not. For the rest of the buildings. I use the reference I've collected, including photos I'd taken and renderings produced by various partners of the project. To create the underground elements, I collected plans and elevations that when combined with renderings and photography, could be used to guide a modeling of the site in Maya. As we discussed, deciding the angle you will focus on will help you decide what level of detail you need to collect. In this case, having decided to tell this story as an overall comprehensive view of the site in total, I knew I wouldn't need to worry about the smallest details and instead could focus on creating more generalized shapes from plans. For an alternate example, let's take a look at a project called One Race, Every Medalist Ever from the same series as the long jump project we discussed in the previous step. One Race aims to provide context for the current year's results by visually representing these results alongside every result, going back to the first modern Olympics, back in 1896. This was at heart a data-driven project, but to make this happen, we needed to collect and create a variety of assets. Data wise, we needed the result times for every medalist for all of the modern Olympics. This is available on the Olympic results website. Charting this data in our revealed the surprising rate of improvement over time. The animated scene required a revisional, representational figure that could be used for each runner, which I use the figure animation package poser to produce. In Maya, I created a virtual field of a 100 meter tracks that would bring all of these elements together. We also collected photography of the most iconic runners in history that we would want to bring further attention to in the piece. Marrying this interesting data set with these assets yielded an animated infographic that both guided viewers on how to interpret the data and engage them in the story. Since the collection of data and assets is such an important element in this process, I'll use as a second alternate example a piece recreated for the 2012 election about the importance of Ohio called the Swing State of Swing States. This graphic, among other things, aims to use precinct level data from 2008 to show how Obama won this state in that election, and juxtapose that data with newly registered voters in the current election. The data was available from a Stanford project on collecting election data. Additionally, we needed to create a variety of maps and a 3D scene to bring everything together. In print, the scale of the circles represented the number of people in each precinct. The advantage of presenting this data in 3D and with animation was that we could represent the number of voters in each precinct as height instead of circle size, which meant that precincts need not overlap as they did in print. The animation helped us guide the viewer through this data set. A simple script imported the data into Maya, assigning to each precinct pin a corresponding location, color, and height. Many 3D animation packages allow you to use scripting languages to handle data sets in 3D, which can be a powerful asset in creating animated information graphics. Does your project need a data set, 3D models, photo reference or something else? Gather your data and assets and we will continue in step 5. 7. Creating a hierarchy: The next thing you should consider is creating a hierarchy. Once the materials you'll need are in hand and you've decided what points to focus on, you should structure your story by creating a hierarchy of importance to help direct attention. Decide what is most important. It is unlikely that everything you've collected is notable or of equal importance in telling the story you want to tell. The points you make will all benefit from a clear organizational structure and order, and from being carefully considered in the context of one another. You don't want to say to your audience, "Here is some data, I hope you find something interesting". Curate the information. I like to think of a narrative information graphic format as a thoughtfully curated presentation of data and story, organized through a clarifying flow and structure. Think carefully about the way you build up the story visually. Is there continuity? Are you drawing attention to everything flatly, or do you have a clear hierarchy that is easy to follow and revealing? In up and down, the main point to convey was the difficulty in fitting everything together and how much had to happen beyond the most visual and public aspect of the project, which of course is the towers. I decided to focus on elements that people would most interact with, like public spaces, transportation, and museum space, or that would have the most impact on the site. I found that by stripping everything away and then slowly building everything back together piece by piece, I could convey the great complexity of the underground work and how important that was to the site overall. For our alternate example, let's look at a graphic we created for the 2011 New York City Marathon, where we took a look at the changing demographics of the city through the lanes of the marathon route. There were many ways to look at this demographic data, but not all of it was equally interesting or revealing. Even though by charting this data we were showing all the changes along the route, by curating a set of the most interesting elements and traveling along the route with animation, we can direct attention to the most interesting changes in this data without forcing the audience to search for it. From the steep rise in median incomes and park slope among Long Island City, to the significant drop in the black population in Fort Greene. Take a look at your story and all the things you've found to be the most interesting or revealing, and decide what kind of a structure will best organize these ideas. 8. Writing a script: The next step is to write a script. By this point, you've figured out a great deal in terms of your approach. Now, you'll want to consider the language and annotations that will drive your project. Decide if you will use a voice over. Animated information graphics are often produced with a voice over. This has the benefit of freeing the screen, to focus solely on the visual presentation you create. Of course, it does not have to be this way. This determination should be made based on how the graphic will be consumed, and the context in which it will be consumed. Can sound be counted on? Is there a lot of language involved? Is the viewer encountering the piece as a watching and listening experience, or more as part of a reading experience? Whatever you decide, any language involved should be written and carefully considered at this point in your project, with an emphasis on tight editing. As you write your script, aim to be as functional and clear with your language as you hope to be with your visuals. In writing the script for up and down, we needed to consider that there was a lot of general information to provide about the plans for each element on the site, including completion dates, building heights, architectural firms, etc. We decided a voice over was the best way to convey this information. We use this voice over to immediately establish the theme, that even though skyline transforming towers were rising at the site, the complex underground architectural task, is the aspect of the story the piece would focus on. For an alternate example, let's take a look at an animated information graphic showing the flow of a deadly avalanche. No voice over was used in this case because the context of this graphic was a reading experience, and so the graphic needed to feel as if it was part of that reading experience as well. The script's main purpose is to provide annotation of the key moments, in order to give a better understanding to the reader, as the avalanche progresses down the mountain. With these considerations in mind, go ahead and write a script for your project, and then in the next and final step, we'll put everything together as we storyboard. 9. Creating a storyboard: Having written a script, collected all of your data and assets, decided on your angle and approach, you'll be tempted to jump in and just start creating, don't do it. I fight against this impulse with many projects myself, but storyboarding is an absolutely essential part of the process and will serve as the master guide for your piece. Consider the flow of the piece. The flow and pacing you establish in this step will help you find out if the hierarchy that you establish earlier is working or not. Storyboarding more often than not influences me to go back to earlier stages in the process and make changes to suit the way I'm presenting the information. Consider what shape the arc of your narrative should take. Does it want to bring an idea full circle or is it a compare and contrast between two or more ideas? Maybe it has multiple threads that should ultimately converge or perhaps it should build cumulatively until it reveals a final hole. It will help you to have an overarching structure in mind as you begin to storyboard. Create a template for your storyboard. How you lay out your storyboard is ultimately up to personal preference, but however it is presented, it should generally include these three things per frame. A visual preview of the moment. This can be anything from a crude pencil sketch to a screen grab of a 3D scene. Whatever allows you to think you're best. A visual description. Even though you have an image, you often will need more to explain the idea. It could be a camera move, a transition,, or a clarification of what the moment should eventually look like. Keep in mind that, if you're working in a collaborative environment, this can be an important tool to communicate how the project will ultimately take shape. Someone just coming to the project will likely need more than just the image to understand your intention, and the segment of your script that the frame corresponds to. This is the merging of your script with the visuals, so it ought to be included. I also think it's helpful to keep your storyboard panels at the same aspect ratio as your project. If you're producing something at 720 P, your panels should similarly be 16 by 9. Aspect ratio will affect how you frame the visual elements and so can affect the decisions you make when storyboarding as well. In up and down, I organized my storyboard in a grid of nine pins to a page. In addition to the image, each pin includes the visual preview, a space for visual description down the left side, and a space for the corresponding bit of script. In this case, I had already set up my scene in Maya and had done some style test rendering. So I worked with these tests to organize my storyboard. For this project, this is what worked well for me, but it's entirely up to you how to organize these elements into your storyboard. You also don't need to limit yourself to a single round of storyboarding. Sometimes it can help to have several iterations as you more finally describe the direction of your project. In a piece called Mariano Rivera, king of the closers about the Yankees closer, I started with what I would call a storyboard sketch. Just a rough impression to help think about how the general flow of the piece could be developed. This can be helpful to do even before the script writing step in some cases. Once a script was established, I put together a more specific storyboard to guide the project. So that concludes this class. If you're working on your own project, please submit your storyboards and I'll do my best to check them out and give feedback where I can. If you have the ambition to execute your storyboard into a completed animated infographic, don't hesitate to upload that as well and stay tuned for future classes on this topic.