Information Design Watch

February 14, 2012, 9:47 am

Big Data in the House

By Henry Woodbury

The New York Times Sunday Review highlights Big Data. Big Data is that rapidly backfilling reservoir of web analytics and real-world sensor data. It is also a million rivulets of meandering incident, logged at its portages and tracked by its jetsam. The projected revolution starts with the ability to find meaning from it all:

Most of the Big Data surge is data in the wild — unruly stuff like words, images and video on the Web and those streams of sensor data. It is called unstructured data and is not typically grist for traditional databases.

But the computer tools for gleaning knowledge and insights from the Internet era’s vast trove of unstructured data are fast gaining ground. At the forefront are the rapidly advancing techniques of artificial intelligence like natural-language processing, pattern recognition and machine learning.

Unfortunately, the examples in the article are not inspiring. There is a difference between real scientific discovery and arbitrage opportunities and other than engineering-driven examples such as Google’s robot-driven cars, most of the focus is on arbitrage opportunities.

Case in point is the invocation of Moneyball. I am a big fan of baseball sabermetrics, and, among those paying attention, the work of Bill James and other analysts has revolutionized the way people evaluate baseball players. But this is work on the margins. It doesn’t trump the expression of true talent that anyone can spot, and it doesn’t void the enormous impact of chance. Hubris may be more dangerous than confusion:

Big Data has its perils, to be sure. With huge data sets and fine-grained measurement, statisticians and computer scientists note, there is increased risk of “false discoveries.” The trouble with seeking a meaningful needle in massive haystacks of data, says Trevor Hastie, a statistics professor at Stanford, is that “many bits of straw look like needles.”

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: Sports, Technology

January 30, 2012, 10:49 am

“a tougher, more defined panther”

By Henry Woodbury

After 15+ years in the league, the NFL’s Carolina Panthers are changing their logo.

In a press release the team proclaims:

[The identity] has been designed to provide a more aggressive, contemporary look to the logo while making it more three-dimensional for ever-increasing digital use.

Carolina Panthers Logotype

I’m not sure how three-dimensionality relates to digital use, other than the fact that all the other kids are doing it.

Will Brinson at CBS Sports has some design review fun:

…this cat’s a little less hairy — the whiskers are significantly reduced from the old version, and the eyebrows (Panthers have eyebrows right?) are reduced as well.

It’s a more streamlined cat and, frankly, a little more ferocious and realistic looking of an animal. The team’s calling it “a tougher, more defined panther” and that’s an accurate assessment.

The Panthers typeface is also different: it’s no longer written in 80′s hair-metal font. Or cat scratch font. Or whatever.

Click through to the Brinson article to see the old logo for comparison.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Branding, Design, Marketing, Sports

August 10, 2011, 11:55 am

The Key to the Masthead

By Henry Woodbury

It may not work for every web site, but it does for Flip Flop Fly Ball. I’m talking about a site masthead with more iconography than a pre-renaissance painting.

Flip Flop Fly Ball Masthead

The key to the masthead is a nice example of information design in itself.

Key to Flip Flop Fly Ball Masthead

Click through to read the labels.

p.s. Flip Flop Fly Ball creator Craig Robinson has a book out. Good stuff. I’ve linked to him before.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Books and Articles, Charts and Graphs, Diagrams, Information Design, Sports, Visual Explanation, Web Interface Design

May 23, 2011, 2:02 pm

Small Uniform Multiples

By Henry Woodbury

The Baseball Hall of Fame’s Uniform Database offers an elegant showcase of the power of small multiples. Here is a simple example:

Brooklyn Dodgers Uniforms, 1935, 1936, 1937

The database output, by year or team, shows the remarkable variety in baseball uniform design, within the simple confines of cap, jersey, pants, and socks. The outline style shown above was created by Marc Okkonen for his book Baseball Uniforms of the 20th Century which concludes in 1994. Post-1994 slightly more naturalistic — and uglier — images are provided by Major League Baseball Properties.

Sadly, where this online exhibit succeeds as information design it fails as information architecture. The search engine is very clumsy. One cannot compare specific teams or specific years. For example, earlier this season the Boston Red Sox and Chicago Cubs played in throwback 1918 uniforms. There is no way to compare Red Sox / Cubs / 1918 / 2011. For larger searches, one cannot show more than three images in a row, or more than eighteen in a page. Please, BBHOF, publish an API.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Illustration, Information Architecture, Information Design, Sports, Visual Explanation, Web Interface Design

October 14, 2010, 11:44 am

Don’t Tweet the Scoop

By Henry Woodbury

I’m going to link you to a Bill Simmons football column at ESPN. Here we go.

If you’ve never encountered the Bill-Simmons-stream-of-consciousness style of sports writing before, you might wonder where I’m going. Ostensibly the column is about how Simmons accidentally tweeted a trade rumor involving wide receiver Randy Moss. And it is. But it also contains a host of interesting observations about how Twitter affects reporters, how a media company like ESPN responds, and the consequences of that interaction.

How does Twitter affect reporters?

Twitter, which exacerbates the demands of immediacy, blurs the line between reporting and postulating, and forces writers to chase too many bum steers.

How does ESPN handle that fact?

We have a rule at ESPN that all breaking news must be filtered through our news desk (not tweeted). That’s why our reporters (Schefter, Stein, Bucher, whoever) tweet things like, “JUST FILED TO ESPN: Timberwolves sign Frederic Weis to $35 million deal.” Even if I wanted to tweet something like the Moss scoop, technically, I couldn’t do it without flagrantly violating company rules.

What are the consequence?

In the Twitter era, we see writers repeatedly toss out nuggets of information without taking full ownership. It’s my least favorite thing about Twitter (because it’s wishy-washy) and one of my favorite things about Twitter (because nonstop conjecture is so much fun for sports fans)…. Call it “pseudo-reporting”: telling your audience that you think something happened or that you heard something happened, and somehow that sentiment becomes actual news.

The other thing Simmons points out: Don’t direct message and tweet at the same time.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Current Events, Social Media, Sports, Technology

July 22, 2010, 9:01 am

Fastball, Cutter, Slider

By Henry Woodbury

In an appreciation of New York Yankees’ closer Mariano Rivera, the New York Times has put together an impressive animation that shows how he pitches. Even if you are not a baseball fan, this is worth a look for its artistry and integrity. By modeling and animating a season’s worth of data the visualization connects process — how Rivera throws the ball — with outcomes — a scatter plot of where his pitches cross the plate.

One highlight of the visualization is the comparison of three pitches — fastball, cutter, slider. Each is distinguished by a different spin, created by a different grip and release.

Still from Mariano Rivera Animation

Credit for the visualization goes to Graham Roberts, Shan Carter, and Joe Ward.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (1) | Filed under: 3D Modeling, Charts and Graphs, Sports, Visual Explanation

May 4, 2010, 10:17 am

Jobs Takes Flash to the Mat

By Henry Woodbury

Get your ringside seats for the Apple vs. Adobe fight, right here.

Apple CEO Steve Jobs tries the headscissors takedown:

Besides the fact that Flash is closed and proprietary, has major technical drawbacks, and doesn’t support touch based devices, there is an even more important reason we do not allow Flash on iPhones, iPods and iPads… We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform.

Adobe CEO Shantanu Narayen bounces back with a half nelson leg sweep (video here):

The technology problems that Mr. Jobs mentions in his essay are “really a smokescreen,” Mr. Narayen says. He says more than 100 applications that used Adobe’s software were accepted in the App Store. “When you resort to licensing language” to restrict this sort of development, he says, it has “nothing to do with technology.”

Meanwhile, Adobe plans to demo Flash for Google’s Android OS this month — and give Android phones to all of its employees.

By the way, here’s Rey Mysterio performing the headscissors move:

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Business, Sports, Technology, User Experience, Web Interface Design

March 19, 2010, 10:38 am

It’s Tournament Time

By Henry Woodbury

The Mens Division I NCAA Basketball Tournament bracket is one of the most iconic images in U.S. sports. Voila:

NCAA Mens Division I Basketball Tournament, 300 Pixels Wide NCAA Mens Division I Basketball Tournament, 150 Pixels Wide NCAA Mens Division I Basketball Tournament, 75 Pixels Wide

So what can an information designer do with this?

Cliff Kuang at Fast Company looked around the web to find out. His selection for “best designed bracket” goes to NBC Sports:

Why? Because it’s a bonafide [sic] infographic–basically a cheat-sheet that allows anyone with only a passing interest in college basketball to sound smart after about five minutes of studying.

The NBC Bracket is here. It’s interactive, but broken. Hey NBC! Fix that absolute positioning.

Update: It’s fixed now.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (3) | Filed under: Current Events, Diagrams, Information Design, Sports, Web Interface Design

February 15, 2010, 4:01 pm

Cressey Performance Web Site Relaunches

By Henry Woodbury

Our latest web site design is for Cressey Performance in nearby Hudson, Massachusetts. Cressey Performance is a weight-training gym with an international reputation for its work with competitive athletes, from youth sports to professionals. Directed by the highly-respected Eric Cressey, the facility is a go-to training destination for professional baseball players, including Kevin Youkilis of the Boston Red Sox, as well as other elite athletes such as 2010 USA Olympic Bobsledder Bree Schaaf.

The site is designed around a tight core of informational pages about the facility, while a new CP Blog provides an ongoing venue for current news, training videos, and links to the top stories at the separate blogs maintained by Eric Cressey and staff nutritionist Brian St. Pierre.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Sports, Web Interface Design

July 3, 2009, 9:39 am

Innovation at Wimbledon

By Henry Woodbury

Britain's Andy Murray serves to Stanislas Wawrinka of Switzerland under the closed roof on Centre Court, during their match at the Wimbledon tennis championships in London, on June 29. (Kieran Doherty/Reuters)

The most visible innovation is the retractable roof over Centre Court.

But this year’s Wimbledon Championships at the All England Club is also host to several IT innovations, most dramatically a smartphone application that superimposes match data on top of the phone’s video display.

IBM, Wimbledon’s long-term IT partner, developed the “Seer Android” app for the T-Mobile G1 mobile phone:

Pointing a G1 phone at a court, for example, would tell the user the court number, details of the current and previous matches and Twitter comments from experts and players, such as Andy Murray and Roger Federer.

The championship’s first official Twitter feeds are also up and running at @Centre_Court and @Wimbledon.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (1) | Filed under: Current Events, Sports, Technology

June 30, 2009, 1:00 pm

How Tall is the Green Monster?

By Henry Woodbury

Flip Flop Fly Ball is Craig Robinson’s collection of “baseball infographics”:

Essentially, this site is what I’d have been doing when I was 12 years old had the Internet and Photoshop been available to me in the eighties.

What stands out for me from this collection is Robinson’s ability to ask good questions — intriguing or amusing or both.

In some of the work, the question is more the point than the answer. What if baseball players literally stole bases? For more complex questions Robinson often produces just a well-drawn pie or bar chart. But occasionally, Robinson combines question, data, and visual idea into a smart visual explanation that goes beyond that.

For example, the left field wall in Fenway Park is 37 feet and two inches tall. And how tall is that?

Thumbnail: Green Monster

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Charts and Graphs, Infographics, Information Design, Sports, Visual Explanation

June 2, 2009, 1:08 pm

The Break of the Curve

By Henry Woodbury

Here is a very cool optical illusion — with an equally interesting (to me) real-world example.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Sports, Visual Explanation

December 29, 2008, 3:20 pm

The Year in Pictures

By Henry Woodbury

Almost every newspaper web site has a mesmerizing show.

The New York Times arranges their collection by category. I prefer the chronological order — and startling juxtapositions — of The Boston Globe’s collection (part 2, part 3).

Sports, politics, war, and disaster predominate, but some of my favorite pictures are those of science and nature, such as this photo from The Boston Globe:

The Chinese Shenzhou-7 manned spaceship

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Art, Current Events, Photography, Sports

June 4, 2008, 12:37 pm

Olympic Medals: Small is Beautiful

By Lisa Agustin

With the Beijing Olympics just around the corner, the Economist’s Daily Chart presents a different way of considering wins per country. Using the 2004 Athens Olympics as an example, the typical approach is to show the total number of medals won by each country. As one might expect, the bigger “superpower” countries make up the top ten. But slicing the data a different way — in this case, medals per million citizens — puts the Bahamas in first place. It’s an interesting take; an added plus would have been some reference to total populace for each of these smaller countries to put it all in perspective.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (1) | Filed under: Current Events, Sports, Visual Explanation

August 5, 2007, 5:57 pm

Around the Bases — 500 Times

By Henry Woodbury

I’ve often been critical of New York Times interactive graphics, but this one works for me, a chart of home runs by age for the 22 Major League Baseball players who have hit 500 or more. Hank Aaron’s line in bold red is the default. A mouse rollover on any other line highlights it and identifies the player responsible.

Paths to the Top of the Home Run Charts

For followers of baseball, the most statistically-minded of sports fans, each line on the chart tells a story: the injuries that cut down the output of Mickey Mantle; the lost years of Ted William’s career when he served in WWII; the late start of Mike Schmidt; the early decline of Jimmie Foxx; the extraordinary consistency of Hank Aaron.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Current Events, Sports, Visual Explanation

August 4, 2007, 3:14 pm

A Beautiful Orbit

By Henry Woodbury

A foam boomerang with LED lights creates a beautiful visual explanation showing the path and rotation of the device from launch to landing. The picture accompanies a Popular Mechanics article on the sport and science of boomerang throwing.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Illustration, Sports, Visual Explanation

August 10, 2006, 1:58 pm

Animations, Small Multiples and Alex Rodriguez

By Henry Woodbury

Baseball fans may be interested in this analysis of Alex Rodriguez’s current power dropoff.

Visual explanation fans may be interested in swing instructor Jeff Albert’s use of video clips (in the form of animated gifs) and small multiples to support his analysis. The video clip discussion, focused on subtle differences in hip rotation, is fairly technical. More interesting, visually, is Albert’s use of spray charts as small multiples. A spray chart is a scale diagram of a ballpark with a player’s hitting denoted by location and outcome (g for groundout, f for flyout, s for single, h for home run, etc.). Presenting spray charts from 2002 to 2006 (2004-2006 reproduced below), Albert shows that Rodriguez’s home run sprays look different when he is hitting better.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: Sports, Visual Explanation

July 21, 2006, 4:04 pm

The World Cup on Mobile Phone

By Henry Woodbury

It’s like the early days of Web design, but more so. This Design Interact article describes how Yahoo planned and delivered its mobile device site for the 2006 World Cup. The goal was to make a site that could work on as many browser-enabled phones as possible. The problem was the baffling idiosyncrasies of those devices:

“The Web browsers on phones vary from basic to super basic,” explains Keith Saft, senior interaction designer at Yahoo! Mobile. “They also have these eccentric bits of HTML and CSS that they don‘t support, and there aren‘t really any standards or consistency across phones.

As they catalogued the technical limitations of mobile browsers, the Yahoo team created a design strategy that prioritized usability:

With production also came usability testing. And here, surprisingly enough, the team did not try to achieve perfect layout and content consistency on every phone. Instead, it wanted to make sure that users understood something it called “design intent.

Do users navigate efficiently through the site? Do they understand how items are grouped on a screen? Can they retrieve the information they want? “Design intent” is design by information architecture.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Information Architecture, Sports, Technology, Usability

June 8, 2006, 1:25 pm

Bar Graphs at Em Height

By Henry Woodbury

In his forthcoming book, Beautiful Evidence (2006), Edward R. Tufte explores the idea of “sparklines,” simple graphs whose y-axis is scaled to the height of a line of text. A draft chapter of Beautiful Evidence provides many examples of the concept and is accompanied by additional comments from Tufte and others.

I came across sparklines on David Pinto’s Baseball Musings site, where he has recently experimented with text-height graphs for such data sets as strikeouts per game (Jason Schmidt) and hits per game (Joe Mauer vs. Alex Rios).

Pinto credits Joe Gregorio who created the Baseball Musings sparklines on his online image generator. Gregorio, in turn, links to Tufte.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Design, Sports, Visual Explanation

April 7, 2005, 1:27 pm

Game Flows and Shot Charts

By d/D

The sports pages have long inspired dense presentations of information, most uniquely in the form of the box score. Now, many online sports venues are turning statistics into interactive charts and visuals. Consider the “Game Flow” chart in this recap of the recent NCAA Division I College Basketball Championship (scroll down and mouse over):

http://sports-att.espn.go.com/ncb/recap?gameId=254000063

Another example is the interactive shot chart that ESPN creates for each National Basketball Association game:

http://sports.espn.go.com/nba/shotchart?gameId=250403002

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Design, Sports, Visual Explanation