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.

A Peek Into Netflix Queues

What’s Cooking For Thanksgiving

Swine Flu Cases Map

The Jobless Rate for People Like You

Virginia Tech Shooting

Map of Parking Tickets in New York City

How Different Groups Spend Their Day

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.

So 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.

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 ), 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.
  
  View the Example | View the Source
• Amazon Browser
  And here’s what you get if you drop in the Amazon API to do searches:
  
  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.

I dare you to try. So this morning I drove from my girlfriend’s house to my house and upon arriving home and trying to get to work I realized I had left my power cord for my MacBook Pro at her place. I had about 20 minutes of juice left in my laptop, not nearly enough to get any actual work done for the day. So I decided that the best thing to do was to go buy a second power cord, that way I would have one at my place, one at her place, and with $80 the problem would be solved forever. Easier said than done.

Best Buy
I first drove to the local Best Buy, which is just down the street. I have a $100 Best Buy gift card, so I figured that would be perfect. I also wanted to pick up the AirPort Extreme wifi router to bump up the wifi coverage in my apartment. Sweet, I thought, I’ll go pick up both and use my gift card and the world will be dandy. I walk into the store, go straight to a worker guy and say “I need a powercord for my MacBook Pro.” He looks at the shelf, then goes and gets a ladder and checks the nether regions of the top shelf area, then finally returns to me to tell me that they’re supposed to have them in stock but they don’t. OK, fine, then just give me an AirPort Extreme thingy so I can at least use this stupid giftcard. He checks the computer… they have none in stock. OK, so Best Buy is totally useless, I might try to sell my giftcard on Craigslist.

Apple Store
I figure if there’s any place that will have a power cord for my laptop it’s the Apple store in downtown San Francisco. I mean, they HAVE to have power cords, it’s the frickin’ Apple store after all. So I take BART downtown and go into the Apple store. I walk up to an Apple employee and say “I need a powercord for my MacBook Pro.” “Sorry, we only have powercords for the 13 inch MacBooks. The other ones have been on backorder for the last month.” WTF?! This is the god damn Apple store. Your only job is to sell products from one company. You don’t even make that much shit. And now you’re telling me you don’t even have the most basic, essential accessory for one of your main products? They did in fact have the AirPort Extreme in stock, and I thought about buying one right there, since I was in the store. Then I realized… fuck no, this stupid Apple store isn’t getting any of my money today. I’ll probably turn around and order this stuff online tomorrow, but today they don’t get a dime.

CompUSA
On a tip from the Apple store woman I go over to CompUSA, which is just down the street. I walk straight up to a guy and say “I need a powercord for my MacBook Pro.” He tells me that they have the powercords for the 13″ MacBooks, but the other ones have been on backorder for over a month (yeah, I’m starting to get the picture). Fine, ok, no power cord. I gotta get some work done today, so what to do? I half jokingly say, “OK, well what if I just buy a new MacBook Pro and return it tomorrow?” He then tells me that there’s a 15% restocking fee. The funny part is that I actually do the calculation in my head. Let’s see, the laptop costs around $2,000, so 15% is $300. So the total price of the power cord would come out to $380, but I would be able to get to work. After considering it for a second I realize that that passes my threshold for getting ripped off and I walk out the store, all the while eyeing the display MacBook Pros and trying to figure out how easy it would be to swipe a power cord without getting caught. It also occurs to me that I think Best Buy has a chiller return policy, so the buying a new laptop for a day scenario might work over there. But I decide it would be too much of a headache.

So now I’m back at my girlfriend’s place. After a half day of running around San Francisco and two trips across the Bay Bridge (no traffic in the morning, then bumper to bumper around noon, wtf?), I can finally get some work done. Whew, ranting felt good.