Category Archives: Resources

Make your Excel charts look more professional (and less like Excel)

The default settings in Excel spit out pretty terrible looking charts. But it’s not too difficult to turn something like this:

Screen Shot 2013-10-21 at 4.07.54 PM

Into something more like this:

Screen Shot 2013-10-21 at 4.08.03 PM

Note the specific steps for the transformation:

  • The move from a legend to direct labeling
  • The reduction of excessive axes lines and tick mark labels to reduce visual clutter
  • Highlighting the data of interest and de-emphasizing the others
  • Adding the headline, text, and source

Follow this tutorial from Storytelling with Data to see the step-by-step guide that took the default graph style to its more refined, and ultimately more effective, finished state.

 

Edward Tufte

Edward Tufte is a giant in the field of data visualization, and he laid out the groundwork for many of the ideas for effective visual representation of data. A Yale statistician, he now mostly works on his sculptures (he has a studio in Chelsea in New York), and gives talks around the country.

Some ideas worth pulling out from Tufte:

“Gratuitous decoration and reinforcement of the data generates redundant data-ink”

5 principles of data-to-ink ratio

1. above all else, show the data

2. maximize the data-ink ratio

3. erase non-data ink

4. erase redundant data-ink

5. revise and edit

Successful displays of statistical information:

1. have a properly chosen format and design

2. use words, numbers, and drawing together

3. reflect a balance, a proportion, a sense of relevant scale

4. display an accessible complexity of detail

5. often have a narrative quality, a story to tell about the data

6. are drawn in a professional manner, with the technical details of production done with care

7. avoid content-free decoration, including chartjunk.

“It is nearly always helpful to write little messages on the plotting field to explain the data, to label outliers and interesting data points, to write equations and sometimes tables on the graphic itself, and to integrate the caption and legend into the design so that the eye is not required to dart back and forth between textual material and the graphic.”….meaning, direct labeling, where possible.

Successful Graphics:

  • Induce the reader to think about substance (content, information) rather than form or color or design — too much “chart junk” and visual extravaganza distracts rather than focuses the reader’s/viewer’s attention
  • Encourage the eye to compare different pieces of data
  • Reveal the data at several levels of detail
  • Avoid distortion
  • The representation of numbers, as physically measured on the surface of the graph itself, should be directly proportional to the numerical quantities represented.
  • Labeling should be clear, detailed, precise, and thorough.
  • The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data. (compare to Illinsky’s redundant encoding)
  • Graphics must not use data out of context.

Criticisms of Tufte’s minimalist approach to information design:

Canadian study of Tufte’s chart junk rule (http://dmrussell.net/CHI2010/docs/p2573.pdf)
Inbar’s study on data-ink rule (PDF is not free but available, http://dl.acm.org/citation.cfm?id=1362587)

More on Map Legends

We discussed creating a custom legend with an HTML table, giving you more flexibility with design, placement, and content. A few additional thoughts:

Buckets vs. Gradients

Creating individual cells for colors and values suggests that your map displays data in discrete buckets. If you’re using gradients, you should show the gradient range and not just the minimum and maximum colors. For example, see the following map from a student. The legend lists the darkest and lightest green with their corresponding values. It assumes that readers understand that the intermediate colors are intermediate values.

Now look at the same map and legend with a gradient. The legend is clearer because we see the full range of colors.

Intermediate values could be displayed as well, but they aren’t absolutely necessary. If you have a diverging color gradient, then you would need to put at least three values next to your gradient: the maximum, the mid-point from which the values diverge, and the minimum (+100%, 0, -100% for example).

Creating a CSS gradient

Creating a gradient with code is a little tricky because of cross-browser compatibilities. However, there are a lot of fun CSS gradient creators on the web (just do a Google search for “CSS gradient”). The gradient legend above was created with the following <div> code. It looks like a mess, but it provides gradients for the major browsers. You essentially substitute the start color and end color Hex values.

<div style="width: 30px; height: 75px; background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0ffd4', endColorstr='#267114'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#e0ffd4), to(#267114)); /* for webkit browsers */ background: -moz-linear-gradient(top, #e0ffd4, #267114); /* for firefox 3.6+ */ "> </div>

Beyond Tables

Using tables for layout purposes is frowned upon these days, but it’s a quick and simple approach. A better way is to use CSS to position and style a legend. But that will be a post for another day… stay tuned.
 

 

 

Interactivity and Navigation

Navigation

This week, we talked about creating a structure to present your visualizaions. We discussed a few common approaches:

 

 

Interactivity with jQuery

Creating interactivity is straightforward with jQuery, a popular JavaScript library. Use the widgets in jQuery UI, like the Tab approach. After your visualizations are integrated in an HTML page with jQuery powering the interactivity, upload the HTML page to your server and iframe the HTML page in a blogpost. The iframe code is as follows:

<iframe src="http://yourURL" height="YYY" width="XXX" frameborder="0"></iframe>

Usability

Three important points for usability:

  • Visibility:  functional objects need to be visible (Differentiate between labels and buttons; between static and interactive elements). How are “usable” objects differentiated on the Web or on a touch screen device?

  • Affordance: the form suggests how the user should use it. What are some real life examples, and what are some online interactive examples? How do you know whether to push a door, or to pull a door to open it?

  • Feedback: provides a reaction. Feedback lets readers know that their action is being/has been recognized. What happens when you push an elevator button?

Other concepts to keep in mind:

  • Ben Schneiderman: “Overview first, zoom and filter, then details on demand”
  • Constraints: show your reader what they can or can’t do. Graying out buttons helps them understand navigation in what way?
  • Think about giving your users a roadmap. Where are you, where have you been, and where can you go? Can you think of common examples on the Web where you’re given clear signposts (think about shopping sites like Amazon.com)?

 

New York City High School Graduation Rates Rise Steadily, But Black Students Still Lag

Locavore Williamsburg nisi YOLO chambray, Pitchfork tousled. Selfies non salvia 90’s. Esse nesciunt mustache fanny pack Vice vegan four loko anim. Literally nesciunt elit ethnic scenester before they sold out. Sunt banh mi chia, art party slow-carb selvage meh et whatever cillum flannel. Sed scenester exercitation, 8-bit meh Echo Park slow-carb seitan sint 90’s paleo sriracha cliche commodo consectetur. Nulla American Apparel YOLO, four loko dolor chia fixie cupidatat cornhole brunch small batch voluptate artisan.

Source: NYC Open Data

Making a Simple Legend

We used a couple of helpful HTML tags to make a simple key or legend in class. We created a table using table, tr, and td. We used div to create an arbitrary box and then added a style="" attribute to give the box a height, width and background color. If you don’t already know the colors on your gradient, take a screenshot using cmd-shift-4. When you see the crosshairs, draw a box around the area you want a snapshot of. When you release the mouse, OSX will save an image to your desktop. Open that in Photoshop, and use the eyedropper to pick out colors. The color slider menu in Photoshop includes a “web color” mode that will give you hexadecimal color codes and an option to copy the color code directly to your clipboard.

Then, make your table. Nesting matters. The table is the outermost tag, followed by the rows tr and then the headings and cells th or td. The code below produces the table below that.


<table>
<tr>
<th colspan="2">Youth Unemployment</th>
</tr>
<tr>
<td><div style="background-color:#cfe2f3; width:10px; height:10px"> </div></td>
<td>Less than 2%</td>
</tr>
<tr>
<td><div style="background-color:#9fc5e8; width:10px; height:10px"> </div></td>
<td>2-18%</td>
</tr>
<tr>
<td><div style="background-color:#6fa8dc; width:10px; height:10px"> </div></td>
<td>19-35%</td>
</tr>
<tr>
<td><div style="background-color:#3d85c6; width:10px; height:10px"> </div></td>
<td>36-51%</td>
</tr>
<tr>
<td><div style="background-color:#0b5394; width:10px; height:10px"> </div></td>
<td>More than 51%</td>
</tr>
</table>

Youth Unemployment
 
Less than 2%
 
2-18%
 
19-35%
 
36-51%
 
More than 51%

Mapping

If you’re just getting started making maps online, start with Google Maps, but they’re not your only option. Many Eyes does well with state and country level maps. John Keefe blogs relentlessly about his Google mapping projects, how they work, and what he’s learned. CartoDB is new and more powerful and flexible than Google Maps. It is also more complex. MapBox is even more powerful, flexible, and complex.

Great places to start thinking about maps:
+ Dave Cole, John Keefe and Matt Stiles on Mapping Best Practices (NICAR 2013)
+ John Keefe, Albert Sun and Jeff Larson talk about making maps (Hacks/Hackers 2011)
+ Take Care of your Chloropleth Maps
+ When Maps Shouldn’t be Maps
+ Amanda’s maps and mapping tags on Tumblr
Continue reading Mapping