All posts by Russell Chun

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

Mapping the Gun Permit Controversy

Original story on Lohud.com about gun permits in Hudson Valley: Where are the gun permits in your neighborhood?

Screen Shot 2013-09-25 at 12.51.25 PM

Reactions, responsibility, context: David Carr in the NYTimes (Guns, maps, and aata that disturb)

Alternatives: NYWorld, normalized per 100 residents by Zip code (Digging deeper into Westchester’s gun permit data).

Screen Shot 2013-09-25 at 12.57.40 PM

McGregor in Columbia Journalism Review:  “All data … is the product of choices made by human beings as to what is worth observing, recording, and disseminating. As journalists and citizens, it is our job to question those choices.”

PBSMedia Shift: Where the Journal News went wrong

Jeff Jarvis’ support of publishing (Public is public…except in Journalism?)