Filed under: Design

Election Data Visualizations

A Presidential election is, of course, an epicenter for data visualization.  It is, after all, the data that gets the last word and it’s the data that, ultimately, we’ve all been watching and discussing for the last 6, 12 or 18 months.  For the Numerati, this is good times (“high five for that chi square extrapolation!”).  It’s also good times for finding cool ways to look at data.  Here are some favorites I’ve jotted down.

My top pick for pure aesthetics has got to be the news tracker at everymomentnow.com.  It’s instantly understandable, clean and useful.  Each bar represents a day and the width of the bar represents the number of article references in that day for the candidate, providing information about media trends between the two candidates.

image

Another, and perhaps the ambitious, is the New York Times’ Visualization Lab.  The Times teamed up with IBM’s Many Eyes (and Wordle) to allow you to visualize all kinds of sources (including articles in the Times itself).  Construct your own visualization of Sarah Palin’s speech at the RNC or check out a Wordle of Obama’s acceptance speech.

For a general purpose and up-to-the minute perspective on the online coverage of the election, check out Perspctv.  This one also meets a high bar for aesthetics which makes the data feel highly accessible.  Yahoo has also put together a really nice dashboard, which includes a cool bit of interaction where you can play out your own electoral scenarios.

Of course with all this data being thrown at us, we’re becoming more savvy about how we interpret it.  Takeaway.org has picked up on that, I guess, and gives us a poll of the polls.  A visualization of how the different pollsters predictions stack up (literally) against one another. 

This idea (and others) has been incorporated into the “new” approach to polling that we see at fivethirtyeight.com.  I first heard about those guys in an interview on the Colbert Report.  I guess they started off by predicting sports scores and were able to do so with a significantly better track record than others.  We’ll see if their prowess holds out for the election, but right now they’re giving McCain a 3.3% chance of winning.  Sorry Red States.

Last of all, Saturday Night Live has done a very nice job of putting this all in perspective.  The skit it is brilliant.  The technology is pretty great too.

no comments

Leave a comment

Zune 3.0 or The Sound Wave Visualization that Stole My Heart

zune3

Between my wife and I, we own something like four iPods and two iPhones (including a first generation iPod which, amazingly, looks like an antique now) and so I have a long-term relationship with iTunes.  I don’t dislike iTunes but it’s old.  In fact, it hasn’t changed much since I plugged my antique 1G iPod into it 7 years ago.  There’s a lot of value, I guess, in iteration but I was hoping that iTunes 8 was going to be release that got me hooked again.  So far, I’m still kind of luke warm.

Enter Zune 3.0.  Wow!.  Can you call software sublime or is that weird?  Either way, I’ve got one doozy of a software crush on this music player.  Unfortunately for Microsoft, I haven’t broken out my Zune device for at least a year but I’m spending 10 hours a day in the software.

From the polish and attention to detail, it’s clear that this release went out with a some extra love.  Some favorite moments for me:

  • The sound visualization has been integrated right into the background of the app (check it out above…that pink glow at the bottom moves in real time to the music…it looks cool!).
  • It ships with multiple “themes” (which are really just backgrounds) but the default (and my favorite) is one called zero which is literally just a white background.  Nice.  Way to be bold by being subtle.
  • If you leave the app alone it goes into one of two modes: one visualizes all of your album art in a giant grid.  It looks cool.  The other gives you band photos which it pulls from somewhere online and then overlays lyrics and song titles on top of it (that’s what’s going on in the image above).  This, by the way, is a great example of some blend mode awesomeness.
  • The navigation is amazing intuitive in spite of being relatively complex and not feeling overly structured.
  • MixView is the new music discovery service (also in the picture above).  As an example of paying attention to detail, the entrance animation for MixView eases in and then just slows but never stops.  That’s a bold thing to do, but it feels great.
  • It doesn’t feel like an app, it feels like an “experience””—more like something a marketing team would create than app team.

So, well done Zune!  Now if only my Zune could make calls…

1 comment

Leave a comment

Oliver Jeffers Takes Nerd+Art to a New Level

image

The Incredible Book Eating Boy is my new favorite bed time story (for reading to my two and four year old sons).  I looked up the illustrator (Oliver Jeffers) the other day to discover that he, like me, could appreciate a little nerd with his art as evidenced by his uninhibited use of math (that’s right, math) as a design element in his illustrations and paintings.  Sweet!  I really loved his portfolio for the content, but the site itself also stands on its own.  It’s simple, but really effective.  Shows how sometimes less == more (a little more math for you).

1 comment

Leave a comment

Blend Modes? You’re Soaking In It

It turns out that being a freelancer is about twice as much work as you expect.  It’s been fun, but it’s been really busy.  So, Blog, sorry if you feel a little neglected.

If it makes you feel better, I’m about 1200 items away from being caught up in Google reader.  You’re not the only one being neglected (oh, and hi honey if you’re reading this).  So, you’ll forgive me if I’m a little late responding to this awesome post about multi-input shaders on Greg Schechter’s blog.  Did someone say blend modes?

If blend modes weren’t the first thing that came into your mind when you ran across that post, don’t feel bad.  Caring about blend modes isn’t intuitive.  In fact, it’s kinda hard to do.  So here are some quick thoughts about why I think they are rock and roll…get ready to hop on the blend modes bandwagon.

Blend Modes Defined

I’m not an expert here and if you want to know more, then you may want to check out this or this.  My practical understanding, though, is that blend modes give you the ability define how a layer visually interacts with the objects below it.  We’re used to a really simple blend mode (although I’m not sure if it actually counts) when we set the opacity on something and can see the content below it.

When we do that, somewhere some math is done that combines the value of the pixels of the object where set the opacity with the pixels that were below it.  WPF and Silverlight support one version of that math, the “normal” one.  If you’re going to support one, that’s probably the right one.  Photoshop supports something like 25 different ways to do that math and Flash supports a bunch too.  These are blend modes and they have names (like Color Burn, Linear Burn, Overlay, Vivid Light, etc.).

Why Blend Modes Mattter

So what’s the big deal?  For a lot of scenarios, there isn’t one.  Regular transparency blending is often exactly what you’re looking for.  On the other hand, once you start thinking in blend modes they start to pop up every where, much like transparency or rounded corners.  You didn’t think you cared until you had them (or noticed that everyone else was using them).

I have a couple of favorites, but a top pick (at least in Photoshop) is a mode called Linear Burn and I think it has some good application to UI.  First, here’s a simple example of layering an orange square over a paper texture.

image

You can see how the best we can do with the standard transparency blending (the Opacity Overlay) has the effect of “evening” out the texture of the paper.  We lose a lot of the contrast information as everything fights to be a little bit orange and a little bit paper.

Check out the Linear Burn, on the other hand.  When we apply that guy, we keep that contrast but do so in an orange kind of way and the result is much more vibrant and a much better texture.

Why Blend Modes Mattter for UI

There are tons of applications to UI, but a semi-geeky one is that this “dimming” effect of regular blending makes it much more difficult to create generic designs that can be colored or manipulated at runtime.  Here’s a concrete example: you’ve probably created a template for a button in the past that uses a gradient to produce some depth on the buttons’ surface.  You might do that with a partially transparent white-to-black gradient on top of the button’s background to produce something like this:

image

Not bad, but look how dim our vibrant green became.  If the consumer of that button set the background to be a very bright green and ended up with this, he might be disappointed.  (By the way, you would probably work around that by not including any white in your gradient.  Now you would have more vibrant albeit relatively dark button, but at least you could keep the original color).

image

Much nicer, right?  Linear Burn is a good one for something like this but theoretically the sky is the limit.

Multi-input Shaders == Blend Modes Potential

And that’s where multi-input shaders come into play.  With more than one input into the shader, you could combine the gradient and green to produce this or any other smart combination that you could think of.  You just do some math to say how the pixels combine.  Forget 25 blend modes Photoshop or Flash, WPF just gave us infiniti (that was for you Scott Barnes).  That’s essentially what Greg did in his post.  Great job WPF team.

So here’s the thing.  The math for blend modes is pretty straightforward.  It’s probably just a weekend for someone to start building some of these for us.  So, any takers?   Oh, and Silverlight…we’re watching you.

5 comments

Leave a comment

Ed Catmull on Managing Creativity

image

Ed Catmull is a co-founder of Pixar.  He wrote this great article in the Harvard Business Review this month about how Pixar approaches the intensely collaborative and creative process of producing a film.  There are a lot of good parallels to the software process, especially as it relates to creative/technical workflow.  It’s an easy read and there’s a lot of great insight.  Don’t miss it.

I met Ed Catmull a few years ago and I actually got a personal tour of Pixar from him.  He and my dad were college pals and then office mates in graduate school so he set it up for me.  My dad, in fact my dad did the 3D lettering in one of Ed’s earliest movies.  We always called it the “hand movie” because it’s a 3D model of a hand, and I believe was among the first digital movies ever!

Well, the tour of Pixar left a tremendous impression on me.  At the time, they were working on Monster’s Inc. and the digs had been dressed accordingly. The team sat in a warehouse-like inner sanctum in the middle of the building that was filled with Styrofoam caves, monster sketches, giant storyboards, and crazy models.  More to the point, though, it was lit up with conversation and a bewitching kind of collaborative energy. 

So given that, I have an admitted bias when reading the article.  I can’t help but read it through the lens of that experience, trying to extract something about how they created such an intensely creative environment.  For me, the article doesn’t disappoint, although it gets there with some ideas that rub against grain a little.  Here are some of the tamer ones.

On the collaborative nature of creativity:

People tend to think of creativity as a mysterious solo act, and they typically reduce products to a single idea… However, in filmmaking and many other kinds of complex product development, creativity involves a large number of people from different disciplines working effectively together to solve a great many problems. The initial idea for the movie—what people in the movie business call “the high concept”—is merely one step in a long, arduous process…

On taking risks:

To act in this fashion, we as executives have to resist our natural tendency to avoid or minimize risks, which, of course, is much easier said than done… If you want to be original, you have to accept the uncertainty, even when it’s uncomfortable, and have the capability to recover when your organization takes a big risk and fails. What’s the key to being able to recover? Talented people!

On managing creative people:

Of course, most executives would at least pay lip service to the notion that they need to get good people and should set their standards high. But how many understand the importance of creating an environment that supports great people and encourages them to support one another so the whole is far greater than the sum of the parts? That’s what we are striving to do. Let me share what we’ve learned so far about what works.

Creative power in a film has to reside with the film’s creative leadership. As obvious as this might seem, it’s not true of many companies in the movie industry and, I suspect, a lot of others. We believe the creative vision propelling each movie comes from one or two people and not from either corporate executives or a development department. Our philosophy is: You get great creative people, you bet big on them, you give them enormous leeway and support, and you provide them with an environment in which they can get honest feedback from everyone.

On the magic of technology (nerd) + art:

Getting people in different disciplines to treat one another as peers is just as important as getting people within disciplines to do so. But it’s much harder. Barriers include the natural class structures that arise in organizations: There always seems to be one function that considers itself and is perceived by others to be the one the organization values the most. Then there’s the different languages spoken by different disciplines and even the physical distance between offices. In a creative business like ours, these barriers are impediments to producing great work, and therefore we must do everything we can to tear them down.

Walt Disney understood this. He believed that when continual change, or reinvention, is the norm in an organization and technology and art are together, magical things happen. A lot of people look back at Disney’s early days and say, “Look at the artists!” They don’t pay attention to his technological innovations. But he did the first sound in animation, the first color, the first compositing of animation with live action, and the first applications of xerography in animation production. He was always excited by science and technology.

Alright,  I’ll let you read the rest.  Don’t miss this one.

1 comment

Leave a comment

Project Rosetta / Rick Barraza is My Hero

image

This should not be missed.  Project Rosetta is only a couple articles old, but I’m already finding a lot of inspiration and useful content there.  The first article is supposed to be for Flash to Silverlight converts, but I think the application is way broader.  I’m better off for having read it and I never really was much of a Flash guy.  It’s just a bunch of really useful concepts crammed into 9 really straightforward lessons.  It makes you realize how much fun all of this stuff can be.  Next step: be more like Rick.

no comments

Leave a comment

When Less is More

image

This is neat.  They took weather (the proverbial most complicated thing ever) and reduced it to a simple yes or no.  Not everything can be this simple, but this manages to answer a relevant question and stay really useful.  That might be a good axiom of reduction: stay useful.

Where Umbrella Today? really shines, though, is on the next page where you can sign up to be notified by SMS (at a time of your choosing) on the days where you do need an umbrella.  Now that’s more than useful, it’s handy (which I believe is about 150% more useful than just useful on its own).

1 comment

Leave a comment

Particle System Envy

I’ve got it.  Check out a preview of the new visualization that is rumored to be shipping with tomorrow’s new version of iTunes.


Magnetosphere revisited (audio by Tosca) from flight404 on Vimeo.

2 comments

Leave a comment

Infographic of the Decade: I Met the Walrus

USA Today, eat your heart out!  This is an incredibly beautiful animated short that depicts a 1969 interview between John Lennon and a young man who had snuck into his hotel room during John’s “bed-in” for peace phase.  The animation has a unique stream of consciousness approach to illustrating the dialogue that puts it somewhere between cartoon and infographic.  Notice the very sparse use of color (pink, brown) and incredible aesthetic throughout the whole piece.  Also, note the very thoughtful graphics and how they cleverly enhance the meaning of the dialog.  

(More details here.)

1 comment

Leave a comment

The Olympics are Not Just for Jocks

Let’s face it readers, you and I are not jocks.  I try to run two or three times a week.  You like racquetball.  Other than that, we’re not really sports people.  Not sports people, that is, except when we catch some serious Olympics fever.  And frankly, moments like this make Olympics fever unavoidable.

After you’ve made time for that (brought to you by Silverlight…yes!), take time to reflect on 84 years of Olympics logos.  My undisputed favorite is Mexico 1968.  I think  that if you look long enough, it might be an optical illusion of some sort.  Yup, there it is.  I just got a flash of the word “Mexico.”

image

3 comments

Leave a comment