Gregor raised a couple questions (below) about the design of the common speedometer, so I’m going to use his post as a jumping off point for further exploration of the context of speedometers. As real estate professionals say, “location, location, location.” When it comes to data visualization, we say “context, context, context.”

Robert Kosara had a similar reaction, but he took it in a different direction.

But, back to those questions..

• Current speed is only one number, so why use a relatively large area to display a single data point?
• Speed data is not periodic, so why use a radial chart?

Here’s a drawing of the speedometer from my car. It displays speeds from 0 to 155 mph (0 to 240 km/h)

To address questions of how small or large a speedo can be, as well as how much information it can display, we first need to establish the physical context of the layout. You may not have noticed that when you look at your speedometer, you’re looking at it through a window. That window is created by the steering wheel. The upper gap in the wheel defines the boundaries of the canvas that we can design within. When you turn the wheel, the viewable canvas area is even smaller.

The speedo also shares space on that canvas with other critical instruments: tachometer (engine speed), odometer (mileage), coolant temperature, turbocharger pressure, and fuel level.

A numeric display alone is no good

So why not just take that space devoted to the gauge and smack a big digital readout of current speed in its place?

Because it would suck.

The movement of the needle around the gauge delivers a lot more information than first meets the eye. The speed of the needle indicates how rapidly the car is accelerating or decelerating. Imagine merging onto a highway. On the entrance ramp, you glance down and mentally note the movement of the needle as you begin accelerating. You return your eyes and lift off the gas when you think you’ve roughly reached the appropriate speed. Your intuitive sense of that target speed was informed by the prior glance at the movement of the speedo.

Having the full range of speeds displayed at all times allows you to establish zones on the speedo. Once you’ve learned the speed ranges of your particular car, you can glance at the cluster and get a quick approximation of your speed without having to read any of the characters on the panel. Usually, this rough awareness of speed is all that you need. Am I going slow, moderate, fast, or super fast?

Additionally, there are other “events” that occur at various points in the speed range. Many Porsche models have spoilers that deploy between 50mph and 75mph. European cars are sold with speed governors that cut engine power at 155mph. You can pay extra when you buy a BMW or Mercedes to have that governor deactivated. The latest high-powered Corvette has exhaust valves that open above 3,500 rpm for better performance. It’s nice to be able to gauge where you are relative to these events.

Here’s a use case where seeing the position of the needle within the full range of values is critical: Shifting gears with manual transmissions, which much of the world still does. Coordinating the position of the two main needles (the tach and the speedo) is essential both for properly timed upshifts and smooth downshifts (“rev matching”).

Each gear has a common range of RPM that correspond to a different range of speeds. My car has five gears, and each of those gears can drive the wheels between a given range of speeds. If you use a gear below it’s corresponding range, the engine may stall; if go above the range, you’ll redline the engine and risk damage.

The speedo is round because the wheels are round

The radial layout of the speedometer is a holdover from when it was a mechanical device. The typical speedo of the mid-1900′s transmits rotational speed from gearing in the transmission to the needle in the dashboard by way of a flexible, springy wire cable. The cable is sheathed in a jacket and squared off at each end so it can be spun by the transmission and thus spin a magnet where it terminates behind the instrument panel.

That orange needle itself is not physically connected to any rotating parts in the drivetrain. The needle is held in place by a lightweight spring pushing it toward the zero position. Behind the panel, the needle is attached to a metal “speedcup.” The magnet attached to the cable generates a magnetic field that grows stronger the faster it spins. This magnetic field acts upon the speedcup, providing the force that pushes the needle away from zero.

So, this mechanical design was the most reliable, cheapest way to translate the rotation of circular wheels (driven by the transmission) to the rotation of a needle around a circular gauge. “Circle” is the native language of the car.. at least for the drivetrain. Additional translation from circular rotation to the linear movement of a mercury thermometer, for example, would have added cost and complexity to the mechanical design.

When cars had lower top speeds, there were some dashboards with more linear instrumentation layouts, but they achieved that by shorter travel of a longer needle along the arc of a bigger circle. True linear movement speed gauges are very rare. Gregor noted that his speedo had a non-uniform scale. Well, check out this old Cadillac; the scale is stretched out on both ends.

However, in the 1980′s, there was an eletronical revolution that rendered the cable and magnet setup unnecessary; it was replaced with electromagnetic speed sensors, electronically controlled needles, and sometimes digital numeric displays.

Fast-forward to 2012 where we now have almost complete control over the instrument panel layout and can project graphics onto Heads-Up Displays (HUDs) that seem to hover in space in front of the driver. The cluster below from the latest BMW 5 series is a 10.25″ LCD screen that displays distinct graphics depending on the selected driving mode. Two modes are shown below; ECO PRO and SPORT. Note that in SPORT mode with manual shifts activated, the two main gauges are connected by a red glow to signify the important relationship between them, as I described above.

With adaptive display technology like the BMW LCD panel as well as alternative energy systems, we now have both new information to display, and new possibilities for displaying it. Now is the time to start brainstorming new instrument panel layouts. Speedometers of the future are not shackled to the radial layout of the past. I’m open to radically different shapes and sizes of displays, but they’ll have to be thoughtfully designed to outshine the beloved dial.

 
Paul Van Slembrouck (@ptvan) is a visualization designer with a lead foot, based in Detroit.

In the City by the Bay, I haven’t detected such seasonal changes. These drawings are my best approximation of what I’ve observed in San Francisco.

Data is everywhere, and you don’t even need a computer to visualize it.

Sort a room full of people by height.

Or, ask them to group themselves in different areas of the room depending on what smartphone OS they are running.
Sort them by birthday.
Group them by gender.
Divide them into pet owners and non-owners.
Group them by the number of bicycles they own.
Have them move to either side of the room based on yes/no questions.
Ask them to cluster based on which items on your meeting agenda they really want to talk about. (Let them know that leaving the room is a valid option too — vote with your feet.)

This can be a great way to rouse a room-full of people and get them interacting and collaborating. We know from experience. It forced us to learn the delayed timing function on a Nikon DSLR.

Oh, hold on. One of our designers was able to jump in at the last minute (via Photoshop).

Where do you use your iPad?

We’ve talked about viral infographics before, from a creative process standpoint: the story, data and design of an infographic all play a role in whether it will appeal to the masses, as does the way it is promoted.

But what does viral content have in common? There are more than 16,000 graphics and visualizations on Visual.ly, so comprehensive analysis would take some time. A good place to start is at the very top. Looking at the top 30 pieces of content on the site should yield some clues that will guide more analysis in the future.

The primary statistic used is unique pageviews accumulated since the Visual.ly website launched in July 2011. Each of the top 30 graphics received more than 23,000 unique pageviews. Most of the success of a properly promoted graphic happens within the first week or two of being published, so the length that a particular piece has been on the site will not make a substantial difference in performance here. Also, note that none of the most popular uploads are interactive graphics or videos.

The graphics can be grouped into buckets based on four dimensions:
1. Content Type
2. Content Domain, or topic: food, photography, sex, etc.
3. Design Type
4. Contains Data Visualization? – Yes or No

We’ll look at content type (1), design type (3), and data visualization (4) in this post, and leave a study of content domains, or topics, for another day.

Four Content Types

(The SVG charts embedded below link to the individual graphics, but may not appear in some browsers).

1. Observational Humor

This bucket includes graphics that pick up on trending memes or long-standing social phenomena to make them visible by illustrating what we already know, or by combining observations in a new way to come up with a humorous result. The graphic about popular Halloween costumes is a simple illustration of a trend with which we’re already vaguely familiar. The Future According to Films and Advertising vs Reality take ideas presented to us in media and compare them to what we know to be true in our daily lives.

54,097 avg. unique views per graphic (excluding outlier)

2. Novel Insights

This bucket includes any new way of looking at something, whether by presenting research that uncovers new information, or by combining existing information in a new way. To qualify for this bucket, the graphic must contain some new insight that has not generally been common knowledge before it was published.

45,440 avg. unique views per graphic (excluding outlier)

3. How To

Any instructional guide would fall into this bucket. Encyclopedic and “How It Works” graphics are included, too. The information is generally not time-sensitive, potentially providing content value for years to come. These designs are not particularly good from an aesthetic perspective, but that doesn’t matter much, as the value of the content lies in addressing questions that large audiences are interested in.

41,287 avg. unique views per graphic (excluding outlier)

4. Timely Issue

This bucket includes graphics tied to news events or significant dates, such as graphics made upon the death of an important person, the release of a video game, an upcoming holiday, a public offering of stock from a hot company, or the growth of a popular civil movement.

36,724 avg. unique views per graphic

Six Design Types

You can think of these six design types as differing by the way they are consumed. A process graph, like a flowchart or decision tree, is read differently than a single chart or a timeline. If we analyzed more than 30 graphics, we might come up with different buckets, but these serve the given sample nicely.

The average unique pageviews for each type are listed below, including the high-performing outliers. Should I Text Him? is the only process graph in the sample. We find that the two most viewed types do not contain visualizations of quantitative data (the process graph is a visualization of relationships).

Single charts are likely successful because they are easy to consume; the viewer only needs to learn how to read one “chunk” of visualization to get the whole story. Simplicity lends itself to quick understanding and sharing, whereas complexity can prevent a viewer from reaching those points. Curiously, mixed charts, which is what we commonly think of as the typical form of an infographic, is the least successful here, perhaps because they take more mental work to consume completely, again pointing to simplicity and brevity as strengths in visual communication.

The Three Outliers

There are three graphics excluded from some calculations above because they would heavily skew the resulting average. Why did these particular graphics perform so well?

What Are The Odds – 813,334 unique views

This is the single most viewed graphic on Visual.ly. Ali Binazir, the author of the study on which the graphic is based, strung a variety of statistics pertaining to mating, survival, and particles in the universe to come up with the probability that you are alive. Mathematically, it’s a nonsensical mishmash of stuff, but that doesn’t deter casual readers, because emotionally, it’s aimed directly at the ultimate question of existence that nearly every human has pondered. Here, the details of the content are less important than the uncommon moment of reflection and awe that this graphic creates, which inspires heavy sharing.

Should I Text Him? – 537,770 unique views

The second most viewed graphic on the site combines the content type of Observational Humor with the content domain of sex, something that’s on everyone’s mind whether they like to admit it or not. The graphic represents a situation that many people (male and female) can relate to, and the overall complexity is a sly joke about how women can over-think dating and romance.

Formal Dining Setting – 213,990 unique views
Apparently a whole lot of people want to know how to set the dinner table properly. This graphic is pure utility, with no humor, visual style, or marketing objective. One could make some incredibly successful graphics answering simple questions like this (hint, hint).

Does Data Visualization Matter?

Data visualization certainly matters when it comes to conveying information effectively, but when it comes to sharing, the answer is no: having data to represent is not a critical ingredient in infographics. More than half, or 53%, of the top 30 graphics do not contain data visualization. And by data visualization, we mean visual objects that are sized, colored, or positioned to represent numerical values.

The X-Factor: Social Promotion

An important caveat: the success of any content on the web is heavily influenced by how well it is promoted by blogs and social media power-users. Quality alone will not yield viral graphics. We see that the quality of visual style seems to have little importance, whereas the quality and simplicity of the idea represented has much more weight.

1. Try staying close to the ground…

2. Trying to forget something?

3. Seeking revenge?

4. Here’s a double shot (or, two idioms in one chart)..

Have ideas for others? Send your sketches to contact [at] visual.ly (include “drawn idioms” in the subject line). We’ll publish some of the best in a future blog post.

Over the past few years, animators have carved out a new niche for themselves promoting brands and causes, and explaining products, services, or complex subject matters. The wave of videos they’ve collectively produced and uploaded to YouTube, Vimeo, and the landing pages of startups everywhere fall under the heading “Motion Graphics.”

Considering that video is one of the most effective ways to quickly convey information, motion graphics are now high on the list of priorities for organizations wishing to woo customers or charm investors and donors.

Creating a motion graphic may cost as little as $5,000 when working with one or two independent artists, or up to $50,000 when working with a full-service production house. Currently, Adobe’s After Effects is the most common tool for creating motion graphics, but as web technology advances, we might start to see more in-browser animation using HTML5.

If you’re considering commissioning motion graphics or learning how to create them yourself, but aren’t sure where to start, here’s an overview of the production process.

Initial Concept

What is the video about? Identify the single idea you want viewers to come away with, and lay out the supporting points. What’s the structure of the story? You may pose a problem and then demonstrate how your product or service is the best solution to that problem.

Read more about structuring your initial concept in this article by visualization instructor Liz Burow.

Visual Style

Select a visual style to use in the animation. Will the artwork be cartoonish or realistic? Flat or three-dimensional? What color palette will you use? Will there be visual representations of lead characters (known as “heroes”) in the story, or does it consist only of text and artwork? What will those characters look like? Will your target audience identify with the style? What visual metaphors will you use to communicate the key concepts in your message?

To establish visual style when working with animators, find examples of videos that you like and send them as reference, or allow the creators to come up with an aesthetic from scratch based on their interpretation of your brand and objectives.

Script Writing

Start with a rough outline of the narrative of your story, which will later be translated into visual objects and movements, voiceover, sound effects, and music. First, lay out the main points you want to make, then start writing, word-for-word, what you want the narrator and characters to say (whether it’s voiced over or only text on the screen).

Keep in mind that time is very limited in videos: the shorter, the better. If you can get your message across in 30 seconds, that’s fantastic. Sixty seconds is acceptable; 90 seconds is typically the maximum recommended time. Reading the script at a moderate pace will provide a rough estimate of how long the video will be.

Story Template by Nancy Duarte

For example, Nancy Duarte uses a simple structure to create the drama that keeps viewers interested: repeatedly showing the state of the world now (“what is”) in contrast with your vision of a better way to do whatever it is that you do (“what could be”).

Then finish by painting a clear picture of the destination (think of it as a postcard from the future that you are inviting people to participate in).

It helps to understand that emotional appeal and convenience are significant factors in moving a viewer to action. Behavior often follows the path of least resistance, so you’ll want to make a call to action that ‘sas frictionless as possible to follow up on. All of the calculated, sensible reasons to take action won’t be effective without corresponding emotional impetus and clear directives.

Sample Storyboard Template

Storyboard

This is where you first start to create visuals and sounds that correspond to the script. Lay out all critical moments in the script, known as “style frames”. You may want to start with sticky notes that you can rearrange freely. At each critical step in the narrative, quickly sketch what is happening in the scene, and what actions any characters are taking. Write a short description of the scene and any narration, sounds, or on-screen text that occur at this moment.

Sound (voiceover, music & sound effects)

Some motion graphics may consist primarily of animated text, while a mood-setting song plays in the background. Others can have full-blown animated characters speaking with different voices, sound effects corresponding to their actions, and custom music. You may have to purchase a license to use copyrighted songs, or you may choose to have original music created for you.

Voiceover (or “VO”) involves a casting process similar to selecting actors for a TV show. If you’re working with a full-service producer, they’ll take a portion of your script and send it out to voice actors, who will then audition by recording their reading of your script. A single voice actor might return up to a half-dozen readings in different styles by changing the intonation, mood, and cadence in their voice. If you’re working independently, you will have to track down freelance voice talent online or through recommendations.

Animation

Now pieces start to come together. The animators will typically attempt to animate one or two style frames in the script using the established visual style. This is something of a rough draft and an opportunity for feedback before the bulk of the animation work happens, to minimize lengthy revisions later. Next, full animation will begin. The commissioner will see a full draft of the animation, including voiceover, and have a chance to make any minor changes. After the animation is finalized, final timing, voice over, music, and sound effects will be added and carefully placed to complete the project.

Browse motion graphics on Visual.ly

Now, drawing from a decade of working with maps, they’ve created these new tile sets for public use. Maps.stamen.com offers custom map tiles in three different flavors that can be used on top of the OpenStreetMap platform. Each has a unique visual style and can serve different purposes as a result.

Toner is a stark and minimalist black-and-white theme that allows for quick examination of major and minor roads, parks, and bodies of water. The high contrast lends itself well to use in a printed report or poster.

The Terrain theme is a rich representation of topography and foliage across the United States. It features detailed roadways and place labeling, as well as great typesetting with a pleasant, fresh-feeling font.

Finally, a throwback to middle-school art projects, Watercolor is a beautiful, label-free theme with rich texture, a rainbow of colors, and perhaps a bit of innocent inaccuracy due to the occasional bleeding of colors into each other.

Consider mashing up these map tiles with some of your own data to discover what new insights each theme makes visible. They’re available for use under a Creative Commons attribution license.