New Excel with Tufte’s Sparklines

Posted: November 25th, 2009

It is quite rare that data visualization topic makes it into the headlines, but a recent dispute between data visualization guru Edward Tufte and Microsoft made it into Slashdot. According to Wikipedia, “a Sparkline is a type of information graphic characterized by its small size and data density. Sparklines present trends and variations associated with some measurement, such as average temperature or stock market activity, in a simple and condensed way. Several sparklines are often used together as elements of a small multiple.” Read more about Sparklines in Edward Tufte’s book Beautiful Evidence (page 62).
An entry in Tufte’s blog titled “Microsoft patent claim for ‘sparklines in the grid’” outlines the conflict about intellectual property rights resulting from a patent application which had been filed on May 7, 2008 by Microsoft employees, claiming various aspects of Sparklines’ implementation in Excel 2010.

Visualizing Citation Patterns

Posted: November 20th, 2009

I found a nice example of how to visualize information flow in science. The Eigenfactor Project (data analysis) and Moritz Stefaner (visualization) cooperated on this interactive visualizations which is based on the Eigenfactor™ Metrics and hierarchical clustering in order to explore emerging patterns in citation networks. It shows citation patterns over time, a clustering and maps based approximately 60,000,000 citations from more than 7000 journals over the past decade. Interestingly, a recent blog at BMJ Group blogs by Richard Smith “The beginning of the end for impact factors and journals” discussed the end of impact factors as a measure of research quality and their substitution by article-level metrics (see Next Generation Science)

Visual-Literacy.Org: Demo Module: VizInfo

Posted: June 18th, 2009

Today, I would like you to point to another useful online course developed by Riccardo Mazza, Dominique Brodbeck, Michele Lanza and Richard Wettel. The Demo Module: VizInfo provides an introduction to the main concepts and techniques on Information Visualization. They present many topics, such as illustrate data and relationships between data elements, the basic principles of infovis, different usage of infovis (presentation, explorative analysis, confirmative analysis), strategies and techniques that help us transform large multidimensional datasets into structures that are conducive to visualization and much more. Check it out!

Logo Art

Posted: June 3rd, 2009

The New York Times had a nice piece about logo art on May 31, 2009. Bill Marsh compiled a list of recent logo changes of big corporations, like Walmart, Kraft, Cheer, Sysco and Blackwater and discovered some commonalities among their redesigns. If you read the article carefully, you will see that the new logos actually apply many of the regular typographical rules which are often violated in logo design to make them “loud” and supposedly memorable. Interestingly, the trend towards all lower case seem to match the writing style of microbloggers who use their cell phones and other devices to just type along without considerations for capitalization. Happy reading!

DemoModule: VizBiz

Posted: May 28th, 2009

In order to access DemoModule: VizBiz you will need to login as guest. The instructors of this online course, Martin Eppler, Remo Burkhard, Ralph Lengler & Patricia Klarner will give you a brief overview on the fascinating world of visualization for Business and Communication. Some of the topics cover (1) how we perceive and process visual information in the brain; (2) how to improve your (passive) visualization skills is by assessing visualizations from others; (3) exploring the differences between Information Visualization and Knowledge Visualization; (4) knowledge-intensive issues that can be made clearer through visualization methods; and (5) benefits of visualization in the context of strategic management.

WikiViz–Wiki for Information Visualization

Posted: May 18th, 2009

I have discovered a very informative Website which compiles a comprehensive list of visualization resources. WikiViz was created and is maintained by Riccardo Mazza and is hosted by Institute of Innovative Technologies at the University of Applied Sciences of Southern Switzerland. For instance, under books, it lists the classics, like Bertin, Tufte and Harris. Or under videos it lists famous TED talks by Hans Rosling and Steven Johnson. Check it out!

Em- and En-Dashes

Posted: May 4th, 2009

There are some typographical rules when it comes to dashes, following or violating them can be easily spotted and is often used as first indicator for typographical sloppiness. While there are many different dashes, I only want to focus on the most common ones: hyphen, en-dash and em-dash.
The em-dash is often misused for a comma and overused “Dashes surround a series punctuated by commas: ‘The governor will face many problems—unemployment, declining revenue and rising costs—in the election year.’ Also use dash to mark an abrupt change in continuity of expression: ‘The balance of payments is—but you know all that.’ … Do not use a dash alongside a comma, a semicolon or a colon. … Avoid [] dashes in headlines because they are ungainly in large type” (source: NYT Manual on Style and Usage).
An em dash is ASCI character 151, so Alt+0151 (on the numeric keypad) inserts it. If its not available in your program, for instance in ASCII email messages, it is common to use to two hyphens.

The en-dash is also called the figure dash because it is used between numbers, like in phone number 724-934-0706 or to denote numerical ranges. If not available you can use a hyphen or a minus sign instead.

The hyphen is used for hyphenation—I guess you would have figured that—but, it can also be used between numbers in cases when an en-dash is not available and to hyphenate compound words.

The em-dash or m-dash has the width or the lower case “m” and the en-dash or n-dash has respectively the width of the lower case “n.” The en-dash is wider than a hyphen. There should be no spaces before and after an em-dash.

Slanting or Italics

Posted: April 14th, 2009

One of the most common type crimes is to use so called pseudo italics. To the defense of all who regularly use slanting instead of italic fonts, Microsoft with its popular MS-Word has lured us into slanting by placing the little “I” icon in the formatting bar. Their crime is to actually use an “I” instead of an “S” because the all what a push on this icon does is slanting. Slanting creates wide, ungainly forms of these skewed letters which makes them look forced and unnatural. The italic form of a font is not just a mechanically slanted version of the roman: it is a separate typeface. Letters have actually a different shape (Figure 1)! Photoshop calls these “Faux Italic” and they can be invoked using “SHFT+CTRL+I” when text is selected for fonts which do not come with a separate italic typeface.

Figure 1: Compare italic font with slanting (Adobe Garamond Pro). Click on the figure to see enlarged version.

Figure 1: Compare italic font with slanting (Adobe Garamond Pro)


The same concept applies to the type crime pseudo bold which just pads around the edges making the letters look blunt and dull. Bold versions of traditional fonts were added to meet the need for emphatic forms. Again, you cannot create these using the “B” icon in MS-Word (Figure 2)! Again, Photoshop calls these “Faux Bold” and they can be invoked using “SHFT+CTRL+B” when text is selected for fonts which do not come with a separate italic typeface. Resist using them!
Figure 1: Compare bold typeface and faux bold (Adobe Garamond Pro). Click on the figure to see enlarged version.

Figure 2: Compare italics and slanting (Adobe Garamond Pro).

What is anti-aliasing?

Posted: March 23rd, 2009

Anti-aliasing is an often-used term when talking about text on a screen. The technique uses shades of gray to create the illusion of a curved edge. It is especially effective for presenting text on a screen at large sizes. At small sizes, however, anti-aliased text looks smudgy. Readers prefer pixel fonts.

Figure 1: Anti-Aliasing versus Bitmapping

Figure 1: Anti-Aliasing versus Bitmapping

Points for Font Sizes

Posted: March 8th, 2009

I am often ask what “points” stand for and how actual font sizes relate to printed size on posters and on the Web. Here is the short explanation for font sizes everybody needs:
In typography, a point is the smallest unit of measure and is commonly abbreviated as pt. The measurements of type referred to the dimensions of a piece of metal bearing a single character when printing presses were used. The history of this measurement unit goes back to 1735 and a French guy who based it on the size of the king’s foot. As we know, foot size changes over lifetime and eventually they got rid of the monarchs in France. So, today we use a DTP point which is standardized and is defined as 1/72 of an inch, or approximately 0.0139 inch. Twelve points make up a pica, and six picas make an inch. A program which uses pica by default is Adobe InDesign where you can find it as measurement unit for page size (51p0 x 66p0 for 51 picas and 0 points x 66 picas and 0 points = 8.5’’ x 11’’ = US letter size page).

So, next time you want to have text half an inch high, you know that a point is 1/72 of an inch which means you need a 36 pt font to achieve this size.

Typography for posters should allow that titles are readable from at least 6 feet away, so use no less than 1-inch high type. Your text body font should be readable from at least 4 feet away, so use no less than ½ inch high type.

On the Web, font size can be determined in various ways and we don’t want to go into the details of Cascading Style Sheets or HTML. Jacob Nielsen, the Web usability czar, wrote already in 2002 about font size on the Web complaining about crammed pages with small font “Tiny text tyrannizes users by dramatically reducing task throughput.” Most browsers allow the user to change the font size (mostly with the keyboard shortcut CTRL and + and CTRL and -). This feature is very useful for people with visual impairments or for people who just like to read smaller or larger text. No Web design approach should disable the reader’s ability to change the font size!
Nielson recommends to use at least 10 point as default font size so that very few users have to resort to manual overrides. And in case your targets are senior citizens, use bigger default font sizes (at least 12 point). However, the actual size of the text appearing at the end user’s display depends on resolution of the screen and the screen size. So, a 10 pt font is certainly smaller on an iPhone (screen size: 3.5’’; resolution: 480×320 pixels at 163 ppi, with 3:2 aspect ratio) compared when displayed on a 50’’ plasma high definition screen (screen size: 48’’; resolution: 1366 x 768 pixels at 72 ppi, with 16:9 aspect ratio).
In general, avoid too many different font sizes in one document or screen display. A whole text book usually can be well structured with five different sizes.