Data Visualization

The New York Times Without Flash

I’m in love with the New York Times data visualization/infographics division. They consistently put out some of the most amazing visualization pieces (both in print and online) that I’ve ever seen. Their recently geographic analysis of Netflix ratings was absolutely superb. And we all probably saw their election maps (either for 2008 or 2004). They produce stunning displays that convey amazing amounts of information in a way that only interactive graphics can do. And they’re all done in Flash.

nyt_netflix
A Peek Into Netflix Queues





And for even more check out the NYT’s selected infographics list or simply do a Google search for “interactive graphic” on the New York Times website.

flashSo when you see images showing the missing plugin icon on the New York Times website on the iPad or iPhone, that’s not just some annoying ad that’s not playing or a streaming video. That’s some of the most cutting edge visualization work that’s being produced today. And without Flash it simply doesn’t exist.

Sure, you might be able to recreate some of these without using Flash (I’d argue that many you simply would never be able to do, but that’s for another debate). But the point isn’t whether or not you could eventually do it without Flash. The point is that the New York Times does them all with flash. So we need to ask why. It’s not an accident or an arbitrary technology choice. Newspapers operate on a schedule and a budget (and one that is getting tighter and tighter). The simple truth is, creating amazing visualizations like you see on the NYT website is possible and easy with Flash. They use the tools that get the job done most efficiently and produce the best end result. This isn’t an argument about whether it’s theoretically possible to create these types of visualizations without Flash, it’s about whether it’s being done. And save for handfuls of examples, it’s not (for every one good JavaScript visualization I’ll show you ten good Flash ones). Taking away the New York Times’ ability to use Flash is setting their data visualization department back 5 or 10 years. And it would mean that we, as readers and citizens, would be missing out on some of the most important journalism being produced today.

The New York Times (like all newspapers) is in crisis. They are trying to reinvent themselves in an online form. And as a news organization they are one of the most progressive and experimental out there. They are embracing the new medium by doing some of the best damn interactive graphic work I’ve ever seen. They make things that convey news and information in ways that draw people in and keep them coming back for more.

But without Flash they’re just a newspaper. And we all know newspapers are dying.

Standard
Flex/Flash/Actionscript

CoverFlow Flex Component

UPDATE: Feb 26, 2008
I have updated the CoverFlow library a bit and added support for adding children without explicitly setting the width and height of the children (ie using the normal Flex auto-sizing validation stuff). Grab the latest source code here.

Here’s a Flex component (with source) that does that sweet looking CoverFlow thing (you know, the iTunes/iPhone thing to show cover art). It’s a Flex component, so you can drop it into any Flex app. Just like Lee Brimelow opened the floodgates for a barrage of 3D carousel effects, I hope to see the CoverFlow effect used everywhere. Especially in places where it makes no sense to have this effect whatsoever. Go forth and overuse it and abuse it.

Example
I’ll go ahead and drop an example right away so you don’t have to read the rest of this to get the idea:

  • My iTunes
    So Apple provides RSS feeds of your iTunes purchases if you want. So I dropped my iTunes RSS feed in and this is what I got:
    This movie requires Flash Player 9.

    I’m thinking maybe I’ll put together a widget that you could customize and load in your own RSS feed and maybe change the colors and stuff, then let people embed this on their blogs. I dunno, I’m also kind of over CoverFlow now, so maybe not…

So what is this component?
It’s CoverFlow, duh. It’s a way of viewing stuff and scrolling through a list horizontally. It’s similar to Ely Greenfield’s DisplayShelf component (except this one does it the right way :P), and it’s just like what the guys at Blitz did too (in fact, quite similar since they’re using PV3D and Tweener too). Basically you have a bunch of things (ie cover art images) and you want to show them in this eye-candy extreme way.

How it was done
So this is a Flex component, and it extends ViewStack. There’s an obvious question as to why I made it dependent on the Flex framework and not just straight in AS3 without Flex dependencies. The answer is that it saved me time (and by that I mean I wouldn’t have done it otherwise). By using the ViewStack component as my base I don’t have to deal with all the child management crap. I get all the addChild, removeChild, the use of selectedIndex and selectedChild, and the use of the component in MXML right out of the gate. I’m lazy, so extending ViewStack was the obvious choice.

The component uses two open source libraries: PaperVision 3D and Tweener. Basically when a child is added to the ViewStack the component create a 3D Plane that represents that child. If the reflection is turned on then it creates two 3D Planes for each child, and the reflection Plane is flipped and placed below the first Plane. Yes, this means that showing the reflection doubles the number of polygons PaperVision is rendering. There are other approaches for doing reflection, but this one was easiest for me. Then we use Tweener to lay out the children and tada, we got a nice looking CoverFlow component.

The only sneaky thing that’s done is that we take advantage of the ViewStack control to keep interactivity on the Planes. We do this without using any of the interactive material stuff in PaperVision. Why? Because that stuff makes your app slow as balls. And besides, in this case, the user is only going to interact with a Plane when it is facing directly straight towards the screen. So all we do is wait until the plane is directly facing the user, then we swap in the real child of the ViewStack in its place. This way we get full interactivity, it’s invisible to the user, and we don’t have to slow our app down by using the PV3D interactivity stuff.

Some Other Examples

  • Flex Controls
    This example shows using the component with a variety of standard Flex controls. Since this is an extension of ViewStrack you can use the control just like a ViewStack and have children defined in MXML. To keep this blog post from completely destroying your CPU I’ve chosen to only include the iTunes example in the page. This one and the next one you’ve got to click to go see. This app has “view source” enabled, so if you right click on the app you can get he full source code for the CoverFlow component.
    firefoxscreensnapz017.jpg
    View the Example | View the Source
  • Amazon Browser
    And here’s what you get if you drop in the Amazon API to do searches:
    firefoxscreensnapz016.jpg
    View the Example

Source Code and Some Notes
The source code for the flex controls example in the list above is available here. That gives you the source code for the CoverFlow component. In that source code package I’ve included the PaperVision SWC and the Tweener SWC. I included those to make sure that people could download the code and test it out, but I encourage you to go get the source code of both of those libraries and compile them yourself. It’s good to know how to do that and that way you know you have the latest versions. A note about PaperVision: I used the Phunky branch of the project, but I don’t think I’m using anything that wouldn’t compile against the 1.5 release, but just in case, that’s the deal.

Sweet, I better see this effect all over the place. im in ur coverz, doin’ ur flow.

Standard