EJ Fox – ScribbleLive http://www.scribblelive.com ScribbleLive is the leading end-to-end platform for content marketing engagement. Mon, 15 Aug 2016 17:27:00 +0000 en-US hourly 1 http://s3.amazonaws.com/scribblelive-com-prod/wp-content/uploads/2016/06/favicon-91x80.png EJ Fox – ScribbleLive http://www.scribblelive.com 32 32 Organizing Your Research in 5 Easy Steps http://www.scribblelive.com/blog/2012/04/24/organizing-your-infographic-research/ Wed, 25 Apr 2012 02:36:42 +0000 http://www.scribblelive.com/blog/2012/04/24/organizing-your-infographic-research/ One of the most important steps in creating an infographic is organizing your research. As an infographic designer, your job is to take a tremendous amount of information, data and stories, and boil them down to visual concepts that your reader can easily understand. This means you need to know Read more...

The post Organizing Your Research in 5 Easy Steps appeared first on ScribbleLive.

]]>
One of the most important steps in creating an infographic is organizing your research. As an infographic designer, your job is to take a tremendous amount of information, data and stories, and boil them down to visual concepts that your reader can easily understand. This means you need to know more about your subject than you end up putting into your infographic: knowing the context of your data is as important as how you visualize it. To gain an understanding of that context, you need to gather all of that information. There is something important in seeing your data, research and notes, all in one place.

1. Building up your research

My first step when I think about an idea for an infographic is to perform some boilerplate Google searches about the subject. Take the Inequality in America interactive. (You can see my notes here.) I started by running searches that were almost caveman-esque in their simplicity: “American inequality data spreadsheet download”, “America income disparity data statistics facts.” Then I expanded them with terms I came across as I reviewed those initial search results. For example, in the ‘income disparity’ search, I saw a study about ‘income distribution.’ When you do searches, as you scan the results, you might see terms that relate. Swap out these various terms and grab as much data and info as you can. Skim through and try to get an understanding of what data comes from where. A lot of times there are incredibly interesting stories hidden in boring bar charts on researcher, non-profit, or government websites. Track down their sources, review the original data and re-imagine how to point out what you think is the interesting part of the story.

2. Organizing your results

Different people have different methods of keeping track of their records. I simply take screenshots of the charts and put a link to the source at the bottom, collecting a large mass of data and charts that I can then sort through to find the best pieces. Think about it as if you were a photographer editing photos for a story: you begin by laying out every photo that doesn’t have your finger over the lens. You look at the raw materials of your story. You might even lay them all out in chronological order to see context. Then you begin to take away all the photos that are blurry, that don’t clearly show what needs to be shown. Maybe it’s data that might be relevant, but comes from a 1997 study. Or data that shows something remarkable, but it turns out it comes from a sample of 85 people. Comb through and throw these slightly-blurry shots away.

3. Making the final cut

You’ve worked your way down to photographs that are technically perfect. Crisp snapshots. Clear, beautiful data, well-sourced and well-respected, that shows something really interesting. Now comes the hardest part: you need to grit your teeth and begin to cut out even some of those amazing visualizations you were dreaming about. Maybe you’re missing two crucial years from an otherwise awesome dataset, maybe the time it would take to actually create the visualization would make you miss your deadline. You might need to cut some stuff you absolutely love and boil it down to what’s absolutely necessary. That’s how you get the clarity that earns the best infographics their well-deserved praise. Cut out everything that you can’t easily justify being there. This means that the information you do have is be strong enough to hold up the truth of your story. Telling a story you know to be true with data that does not necessarily support that story is not honest.

4. Sharing and Collaborating

You should be using tools that allow you two crucial things: sharing and collaboration. Personally, I use Evernote, and many of my colleagues use Google Docs. (Those, of course, aren’t the only options — if you use others, please tell us what they are and why you love them in the comments.) There are a lot of obvious reasons to do this work using a tool/web service that allows you to share your document live with collaborators. I often share my Evernote notes live with my editors so they can see my progress and give me feedback on the reliability of various datasets and which angles are interesting and worth pursuing. I gather everything I can, and then begin cutting and pasting charts and bringing them further to the top as I learn more about them and figure out how they fit into the story. It’s important to note that when I talk about “cutting” data, that doesn’t mean it ever leaves my notes. Maybe down the line I might find that a prized dataset I planned on using has a crucial deficiency, and I need to go back to the drawing board and use something I’d previously dismissed for a new angle. I also find it incredibly useful to have all these notes in one place, as I can write down ideas I have on my way to work, using the Evernote iPhone app. If I have an idea about a way to tell the story while I’m on the BART, I can check my notes and see if the data supports my idea, so by the time I get to work I have a visualization planned in my head and can sit down and execute it.

5. Step away from the spreadsheet; clear your head

Getting away from spreadsheets and charts is crucial in boiling down a story to what’s interesting: when you have all these rows of data in front of you, it’s tempting to want to visualize it all. But by breaking away from the screen, your brain naturally loses the details that you don’t find interesting, and you can focus on the elements that best convey your story. A clear infographic comes from clear research, so you can’t neglect organizing your data and still expect a beautiful infographic. The visualization is merely a reflection of the data, and unless you understand it, you’ll never be able to simplify and clarify it. E.J. Fox is a staff designer at Visual.ly.

The post Organizing Your Research in 5 Easy Steps appeared first on ScribbleLive.

]]>
Visualizing the Occupy Movement http://www.scribblelive.com/blog/2012/03/27/visualizing-the-occupy-movement/ Tue, 27 Mar 2012 04:31:36 +0000 http://www.scribblelive.com/blog/2012/03/27/visualizing-the-occupy-movement/ This weekend in 7 cities across the world (including Oakland, Calif.), people hacked away at #OccupyData hackathons aimed at creating “data visualization for the 99%”. Data visualization is a natural fit for a movement that regularly chants about statistics (“We are the 99%!”), and we’re looking forward to seeing the Read more...

The post Visualizing the Occupy Movement appeared first on ScribbleLive.

]]>
This weekend in 7 cities across the world (including Oakland, Calif.), people hacked away at #OccupyData hackathons aimed at creating “data visualization for the 99%”. Data visualization is a natural fit for a movement that regularly chants about statistics (“We are the 99%!”), and we’re looking forward to seeing the products of those hackathons over the next few weeks. In the meantime, we’ve rounded up some of the most interesting data visualizations that will help you gain a better understanding of the movement, regardless of your politics. First, an establishing shot: this beautiful map symbolically links Wall St. in New York to all 1300+ Occupy locations that sprung up in response to the original protest in Zucotti Park. Here’s another, more stylized version of the same map:   Next, a visualization of “interventions” at a single OccupyBoston General Assembly, classified by perceived gender — an arguably irrelevant datapoint (click on the link above for a larger-size image): However, the interest of discovering patterns through visualization is clearly evident, as we see point of process interruptions increase towards the end of the assembly. Is this because it is getting late and people are becoming tired and decreasingly tolerant of nonsense? Or is it because more contentious issues are pushed towards the end of the meeting? Seeing patterns like this can help us analyze our processes and perhaps readjust them for better success: the true power of data visualization. The next graphic visualizes tweets during the last week of the encampment at Zucotti park, showing the volume of tweets over time, split by positive or negative mood, as well as the most relevant words (for the full image, click on the link above). The baseline of the bar chart winds back and forth between day and night, a design choice that contributes to the beauty of this visualization, but severely obscures a true understanding of the data for the user. The dotted line shows the relation between positive/negative tweets, showing the ebb and flow of support from the Twitter zeitgeist. The combination of these various data stories is really great and allows a lot of context to be included. It’s an undeniably beautiful piece of data art, though it will likely take you a while to decode it. This next map by J. R. Baldwin takes a unique look at the occupy movements, focusing on which supplies they uniquely requested most over Twitter, using the #needsoftheoccupiers hashtag. It paints a unique picture of the personalities of the various occupations in very different geographic locations: insights you’d be challenged to gather any other way than data curation and visualization. The last visualization looks at responses to the question “what are you trying to achieve with your participation”, using Many Eyes to visualize the depth of responses. You can drag words around to get a better understanding of the connections and detangle things. There is a clear consensus around strong links between ‘social’, ‘economic’, and ‘justice’ — helping visualize the complex issue of defining the motives of a movement that resists making single demands. AchieveQ - All Responses Many Eyes EJ is a staff designer at Visual.ly and a passionate Oakland Occupier. He recently developed Inequality in America, an interactive visualization of many of the issues at the core of the Occupy protests.

The post Visualizing the Occupy Movement appeared first on ScribbleLive.

]]>
TED Talk Video: Jer Thorp, The Weight of Data http://www.scribblelive.com/blog/2012/03/02/ted-talk-video-jer-thorp-the-weight-of-data/ Sat, 03 Mar 2012 01:52:52 +0000 http://www.scribblelive.com/blog/2012/03/02/ted-talk-video-jer-thorp-the-weight-of-data/ If you’re into data visualization or information design, you probably know – or at least have seen – the work of Jer Thorp, data artist-in-residence at the New York Times. Now, the TEDx Vancouver talk Thorp gave in November, has finally been uploaded to the TEDx YouTube channel, and we Read more...

The post TED Talk Video: Jer Thorp, The Weight of Data appeared first on ScribbleLive.

]]>
If you’re into data visualization or information design, you probably know – or at least have seen – the work of Jer Thorp, data artist-in-residence at the New York Times. Now, the TEDx Vancouver talk Thorp gave in November, has finally been uploaded to the TEDx YouTube channel, and we wanted to make sure you didn’t miss it. Thorp’s work is worth studying not only because of the unique and innovative methods he uses to visualize data, but also because of his always-visible goal of telling human stories. Though his work is often interactive visualizations primarily made with Processing, data artists and journalists can learn from his techniques and his approach regardless of what tools or data they use. Thorp starts out his TEDx talk with his childhood and the life-changing experience of getting his first Mac, and moves on to his work, including projects like Cascade, which he developed to enable visualizing how New York Times stories are shared. He also talks briefly about his work on the World Trade Center Memorial project, where he was tasked with placing the names on the memorial, while maintaining an overall structure of associations between the people. It began as an abstract idea from the architect: that the names not be ordered alphabetically, but my more meaningful connections. Family, friends, and coworker’s names are grouped by proximity using an algorithm and tool developed by Thorp. It’s worth learning about the finer details of the project, as the weight and care given to this particular instance of “data visualization” is incredible. Thorp makes a clear case for the power of visualizing data in order to give it meaning and give it, as he puts it, “a human context”. The most poignant moment in the video is when he talks about his OpenPaths project, which emerged from the controversy around the iPhone collecting GPS location data. Thorp shows the power of visualizing this data, and seeing it and making associations to the human stories that emerge. He shows an animation of his own data on a map, moving from place to place. He describes moving to a new big city, and we see the line move. We see him leave his house, go to work, go to lunch, and go back home. We get to see the day he meets his girlfriend, and he shows us the contrast between seeing that day animated on a map, and seeing that same datapoint as latitude and longitude gibberish. That contrast is incredibly important, and it should always remind us one thing:
at the end of the day, the data that we work with, analyze, dissect and create, usually boils down to human stories we’re meant to be telling.

When we make the connections between the two, we can create profound experiences and insights for users, readers, and viewers. If you want to see more about these projects, Thorp discussed them in depth in his Eyeo 2011 talk.

The post TED Talk Video: Jer Thorp, The Weight of Data appeared first on ScribbleLive.

]]>
How to Make Choropleth Maps in D3 http://www.scribblelive.com/blog/2012/02/01/how-to-make-choropleth-maps-in-d3/ Wed, 01 Feb 2012 23:02:35 +0000 http://www.scribblelive.com/blog/2012/02/01/how-to-make-choropleth-maps-in-d3/ Even if you think you don’t know what a choropleth map is, chances are you’ve seen one. And come November 2012, you’ll see plenty: one iconic example of a choropleth map is a map of the United States, laid out in red and blue, showing the results of a presidential Read more...

The post How to Make Choropleth Maps in D3 appeared first on ScribbleLive.

]]>
Even if you think you don’t know what a choropleth map is, chances are you’ve seen one. And come November 2012, you’ll see plenty: one iconic example of a choropleth map is a map of the United States, laid out in red and blue, showing the results of a presidential election. Choropleth maps can be simple, like in the example above, where the color of the state indicates whether the state goes in one direction (Democrat) or the other (Republican). The states can also be colored on a scale to indicate data, with a color like blue representing a low number and red representing a high number, leaving a number in between to be purple. These simple visualizations make large amounts of data easy to understand at a glance, allowing insights that would take much longer if you’re looking at a table of numbers. But the process of making these maps is not easily apparent. There have been tutorials for Python and Excel, but none that we’ve seen yet for D3 — and D3 is one of the easiest ways to make choropleth maps for the web. Once you have your data encoded on a webpage using D3, you can access it and display it in new ways. In this example we are going to be making a map of the results of the 2008 presidential election. Let’s start with our base map. We’ll get the .svg file of the United States from Wikipedia. Luckily, this map already has each state pre-labeled, so we can access and color it: a big time-saver. Otherwise, we would have had to go to our own U.S. map in Illustrator, bring each state onto it’s own layer, and name that layer with the abbreviation of the state. Once you’ve put the .svg file in a new folder, create a basic HTML file, or download the template we’ve provided. You’ll need to include jQuery and D3. For our purposes, you are simply going to copy and paste the contents of the SVG file into a div in your HTML file. If you’re using TextMate, you can just drag in the SVG to the proper place. You’re going to see a whole bunch of raw SVG, which makes up the map. Each <path> element is a state, and has an ID attribute that maps to the state abbreviation. The “d” attribute, which has “M”, “L”, and a bunch of numbers, actually contains all the coordinates of that state. With the SVG embedded in your HTML, if you open it up in a browser you should see a map. Unfortunately, this SVG file comes with each state already colored gray, and we want to assign our own colors. So we need to find and remove from the SVG all instances where the fill color “#d3d3d3” is defined. Now, when we view our page in a browser, the states come up black. This map lives inside the DOM, and we can access each of the states by its ID. If you’re familiar with jQuery or web development, you can already imagine things you could create. One way to start out quickly is to simply manipulate one of those states, in jQuery it’s as simple as
$('#NY').css('fill', 'red')

Now we need our data, and we are going to use Google’s JSON data of the 2008 presidential election. Save the .json file and add it to your folder. If you open it up in TextMate, it appears as one long line, which makes it hard to understand the data you’re working with. If you copy that line to your clipboard and head over to JSONLint and paste your JSON into the field and hit “Validate,” it will reformat your JSON into a more readable format. You can paste that back into your JSON file. Look over your data and get a sense of what is available to you. You’ll notice in the very beginning they assign a unique ID number to each candidate, we will need this for later. To use this JSON you’re going to need to assign it to a variable for use in your main file. To do this, add

var  statejson = [

to the very beginning and add

]

to the very end. That’s it. If you add

console.log(statejson)

to the end of your page, you can go to the console in Chrome and explore the structure of your data. It looks like they store the winner in statejson.locals.STATENAME.races.President[”].final. You can find that out by getting more and more specific in your console.log and checking what is returned in the console in Chrome. You can test your theory by trying

console.log(statejson.locals.Alabama.races.President[''].final);

This should return the ID of the winner of Alabama, “1701.” Now we know where to get the data we need, we need it in a format that will help us make our map. To map the winner data to the paths in our SVG, we are going to need the abbreviation for each state. In another situation we might need to have a separate JSON file that would help us map our full state names “New York” to their abbreviations “NY,” but the election data includes the state abbreviations. You can find them in

statejson.locals.STATENAME.abbr

We are going to use these two pieces of data to create a whole new JSON object. We want that object to be very simple, and contain only two pieces of data: the state abbreviation and the candidate who won that state. But right now we only have the IDs of the candidates who won, so we need to write a little decoding function based on the information we got from the beginning of the JSON file.

 function candidate_id_decoder(president){	 	// Decode president name based on codes 	// because our data doesn't just give us their names 	if(president == '1701'){ 		return 'McCain'; 	} 	else if(president == '1918') { 		return 'Obama'; 	} 	else { 		return false; 	} } 

Using all of these pieces, we can now create our new data.

 var state_data = []; $.each(statejson.locals, function(key, data){  	// Grab the ID of the candidate elected president in that state 	var president = data.races.President[''].final;  	// Grab the abbreviation of that state 	var state_abbreviation = data.abbr;  	// Create a JSON object containing the state abbreviation 	// and the name of the president who won that state 	var datarow = {"state_abbr": state_abbreviation, 		       "president": candidate_id_decoder(president)};  	// Add that JSON object to our data 	state_data.push(datarow);  }); 

Now we can check out the new data we’ve created by doing

console.log(state_data);

Now that we have our data how we want it, let’s manipulate our SVG to make our map. We are going to use D3 to select all of the path elements on the page. In our case that’s each individual state. We’re going to change the fill attribute based on the ID of that path. So once we encounter the “AL” path, we’re going to look for our “AL” key in the data we made, and then return a different color depending on the candidate associated with that state.

 var state = d3.selectAll('path').attr('fill', function(d){  	// Get the ID of the path we are currently working with 	// Our SVG uses the state abbreviation for the ID 	var abbr = this.id;  	// Loop through the state data looking for 	// a match for that abbreviation 	// Then returning the corresponding president 	// who won that state, from the array we made earlier 	$.each(state_data, function(key, data){ 		if(data.state_abbr == abbr){ 			state_president = data.president; 		} 	})  	// Return colors 	// based on data					 	if(state_president == "Obama"){ 		return "blue" 	} 	else if(state_president == "McCain"){ 		return "red" 	} 	else { 		return "#CCC" 	} }); 

Refresh and you will see your data reflected in your SVG! You’ll notice that South Carolina and Missouri have no fill color: it appears that the data is not formatted correctly for these states. If this were a real visualization, you would need to go in and correct that by hand (as you often do when working on projects like this). There is also a strange shape in the bottom left caused by some stray paths included in Wikipedia’s SVG file. You can delete them in the SVG in your main HTML file. EJ Fox is a staff designer at Visual.ly.

The post How to Make Choropleth Maps in D3 appeared first on ScribbleLive.

]]>
The Real World: Data Visualization http://www.scribblelive.com/blog/2012/01/06/real-life-dataviz/ Fri, 06 Jan 2012 21:35:41 +0000 http://www.scribblelive.com/blog/2012/01/06/real-life-dataviz/ Real-world infographics, analog data visualization, physical visualization… there’s no official term for it yet, but the idea of visualizing data away from your computer is taking off — and anyone can do it. Artists create bar charts that span the height of a brick wall, or area charts with balloons Read more...

The post The Real World: Data Visualization appeared first on ScribbleLive.

]]>
Real-world infographics, analog data visualization, physical visualization… there’s no official term for it yet, but the idea of visualizing data away from your computer is taking off — and anyone can do it. Artists create bar charts that span the height of a brick wall, or area charts with balloons blown up to varying sizes. These visualizations, when artfully photographed, can add intrigue to a simple piece of data. It’s one thing to see bar charts for average daily water consumption per capita in the United States, Mexico, the United Kingdom, China and Haiti… … it’s another to see those bar charts shown as cups of water filled to different levels. These visualizations can draw the viewer in, provide a better understanding of the topic, and as long as the tried-and-true principles of data viz are respected, they can be a powerful tool. (Plus, they’re fun to make.) An important thing to consider: for real-world visualizations to really work, the physical visualization must add to the content of the infographic. For example:
  • data on baseball fan attendance visualized by having fans hold up signs to make a bar chart;
  • data on declining police budgets visualized as a bar chart traced in the dusty rear window of a police cruiser;
  • data on holiday sales made by stacking presents in piles of varying heights in front of a christmas tree to make a bar chart;
  • balloons filled to different sizes to show the declining reserves of helium…
  • not to mention the near-infinite possibilities for proportion-related visualizations you are confronted with every time you eat a pie.

(Want to give any of the above ideas a try? Send us pics, we’ll be sure to feature them on our blog!) These visualizations are interesting because as humans, we are not yet hardwired to understand and compute the things we see on screens and on paper. We are built to understand the real world, and we are very good at evaluating the things in it, and this lends an immediate grasp of the subject that rectangles on a screen sometimes can’t imitate. But real-life visualization has its risks. As visualizers, we must be careful not to lie through carelessness. We are spoiled with the ease in which we transport data from computer to computer, and from spreadsheet to chart. When we create these visualizations, we must maintain proportion the old way, by hand. In those water-cup bar charts, the water should be measured in a measuring cup and be based on a scale that maintains proportions. Obviously, this is not an exacting science: most people will not be able to see minute mistakes. But the point is to always be as close as possible to the data, and one easy way to do it is to actually have a chart made in a charting program to double-check against your real-life visualization. If something seems disproportionate between the two charts, make sure you are not mis-representing the data in your physical visualization. It’s also important to focus on the photography of the real-world data visualization once it is complete. Get it in good light, whether that’s outside, or from a collection of lamps or professional photography equipment indoors. Keep the photo free of distractions, people, or photoshop them out later. You don’t want extraneous elements confusing your visualization. Take your picture and add some explanatory text, a source, and a title in an image-editing program. Then upload it to Visual.ly and link to your post in the comments, so we can all appreciate it.

The post The Real World: Data Visualization appeared first on ScribbleLive.

]]>