freeDive launches, I need some sleep

We launched freeDive over at KDMC at UC Berkeley today. freeDive is a tool to make user-searchable databases that you embed in your site as a widget.

Imagine you have a spreadsheet of campaign contributions or crime statistics that you want to share. For years, you had to pay for a service or know how to code to build searchable databases of that information. You shouldn’t have to do that.

We built a simple wizard that uses the Google Visualization API. It pulls data from a Google spreadsheet, builds a table and creates filters that users can interact with. freeDive then gives you an embeddable widget that you can paste in any Web page.

Check out our blog post for more background and tutorial videos.

 

Sister site launches today

I launched a companion site today called Compulsive Data where I can publish random data visualizations. I see data in strange and sometimes amusing places (at least to me). I hope to share them on an irregular basis.

I’ve also decided to share a collection of visualization tutorials that I’ve built over the years. There’s plenty of room for that to grow so if you know of something that should be included, please let me know.

Protovis video tutorials

Just getting around to posting these. I produced these in Fall/Winter 2010 for the Interactive Census Workshop at the Knight Digital Media Center. To see the full, step-by-step versions, check out the Data Visualization tutorials at KDMC.

The Protovis JavaScript Library takes care of the difficult programming so you spend less time writing code and more time visualizing data. This video tutorial explains how to set up your document and make basic charts using Protovis.

Our second tutorial on the Protovis JavaScript Library explains how to add lines and labels to basic charts.

Use variables to turn a wedge chart into an easily updated template and use your first animation technique.

Learn how to load data from an external data file to simplify your Protovis code. This tutorial also demonstrates how to animate a bar chart and it’s corresponding labels to allow readers deeper access to your data.

In this Protovis tutorial, we’re going to change the bar chart that we made in the last tutorial into a line chart, swap external data files and build on the existing graphic. We’re also going to use an animation technique to make it easier for users to interact with small visual elements like lines.

Can iPhone 4 shoot news video?

While the camera on the iPhone 4 is pretty average, iMovie is not. Suddenly, the iPhone can be a serviceable web video camera in breaking news situations or unplanned interviews. It allows you to shoot and edit video, add lower thirds and titles and upload directly to the web.

It will not replace professionals and professional equipment, however. It fits into “the best camera is the one you have on you” category.

The video below was shot during my lunch break. I know it’s pretty bad but this was my first experiment on the day I got my phone.

Quicktime upload – full HD

Here’s what it looks like when I copied the 30 MB, 1280 × 720 px movie to the iPhoto application on my computer, processed in Quicktime then uploaded it directly to this site. Click the image below to see the video full size.



YouTube upload – full HD

Uploading directly from the phone to YouTube is a little tricky. For some reason, probably to save bandwidth, once a movie has been edited and saved out of iMovie as HD, it won’t upload to YouTube. (It finally showed up after several hours when I uploaded directly from the Camera Roll. ) However, you can use your YouTube mobile upload email address to send the file and upload in minutes. But be sure to use wi-fi or have a large data plan. Size of the video sent from the iPhone was almost 3 MB for 23 seconds and 568 x 320 px.The file was compressed to 1.6 MB by YouTube.

Minimizing the shakes

OK, OK, the most obvious problem is that I don’t have a steady enough hand. Enter Joby’s Gorillamobile — a flexible, bendable tripod. Joby announced on twitter last night that they will release an iPhone 4 adapter this Fall.

gorillapod flexible tripod for iphone 4

A steadicam adapter for iPhone, Steadicam Smoothee, has also been announced but lacks a price and shipping date. It looks great though.

Audio recording

The mic in the iPhone 4 seems like a definite improvement. The woman heard speaking in Memorial Glade during the video was about 30-40 feet away. There are also a lot of commercial options available. Here’s a comparison video of iPhone microphones.

Final thoughts

It’s important to note that the iPhone will not produce broadcast-quality video and audio. But in certain situations, it may be a valuable tool and a worthy purchase. Any journalist out there have plans to use this in production?

Also, sorry it’s been so long between posts. I got consumed by workshops and traveling to teach at the National Association of Hispanic Journalists annual conference. I take vacation next week, then things should return to normal.

UPDATE: Use Vimeo for better quality

Vimeo doesn’t compress video nearly as much as YouTube. As a result, the same video uploaded via e-mail to Vimeo looks a lot better. Vimeo limits free accounts to 5 GB per week and there is usually at least a 30 minute wait for processing. The Pro account removes the wait and the upload limit.

UPDATE 2: iPhone movie short

So I found this posted on The Unofficial Apple Weblog. Amazing. This 90-second short was shot and edited entirely on an iPhone in 48 hours. It makes my efforts look child-like and proves that nothing will replace talent, skill and experience.

“Apple of My Eye” – an iPhone 4 film – UPDATE: Behind the scenes footage included from Michael Koerbel on Vimeo.

Is Google trying to save news media?

One of the great things about the KDMC program is the quality of our speakers. Below is a web cast of Olivia Ma, manager of YouTube’s news efforts. She develops and manages products and programming with news organizations on the site.

She discusses how YouTube coped with user-uploaded videos from violent protests in Iran and new initiatives that will be announced in the near future.

YouTube News Manager Olivia Ma from kdmcinfo on Vimeo.

You can see more presentations like this the KDMC site, including Tim Rasmussen discussing multimedia at the Denver Post that lead to the 2010 Pulitzer Prize for Feature Photography.

And sorry about the lack of posts. I was hacked over the weekend and had to rebuild the site.

I’m also in the middle of back-to-back, week-long training sessions. 12-hr days have made the triage difficult and made posting even harder.

Why interactive timelines suck

As KDMC‘s data/graphics expert, I’m often asked for recommendations for free, interactive timeline tools. My first question is always “Are you sure that’s what you need?”

While there are several options, including  Timetoast and Dipity, timelines are frequently misused, muddle storytelling and result in lost page views. Knowing what a timeline should be can reduce the number of hard-to-understand, needlessly-interactive graphics and increase traffic.

Timelines, by definition, illustrate time. The space between events should be as important or more important than the events themselves. Time should play a role in illustrating or influencing events.

This is easy to see in a financial chart:

Dow Jones Industrial Index, May 6, 2010

Dow Jones Industrial Index, May 6, 2010

 

Timelines can compare spans of time and/or related information, as this timeline of written languages does:

Timeline of written languages

Mark MacKay Duopixel.com

 

Or it can illustrate large sets of data, as seen in this infographic I produced for the Sun-Sentinel News Illustrated section. It uses 125 years of global temperature readings to illustrate how temperatures changed at different latitudes over time.

Signs of a warmer planet

 

Chronologies differ because they explain momentum. They show how the order of events can shape or influence a story. When a chronology is made into a timeline, it often becomes harder to read and momentum is lost.

In this example, you can see a chronology forced into the form of a timeline. Time between events is identical and adds nothing to the information. And reading in a staggered motion from top to bottom makes the information harder to comprehend.

StickerGiant.com

StickerGiant.com

 

This would have been much easier to read as a list. Or better still, since the content has visuals, it could have been a slide show that promoted content.

Chronology done right: The following chronology by KDMC alum, Bill Dedman of MSNBC, tells the story of a mysterious socialite, Huguette Clark. It is a well-written photo gallery that compels a user through than 47 pages.  It provides a quality experience and racked up more than 78 million page views. You can read about how the project came to be in an interview with Bill Dedman. Click on the image below to view it.

Chronology of the Clarks MSNBC

Timeline/chronology hybrid: Another option was used in this NY Times piece on How a Market Crisis Unfolded. A chronological explanation of events is paired with a bar at the top of the project that illustrates how the time between events compressed as the crisis picked up steam. The bar doubles as an intuitive navigation and makes complex information much easier to consume.

new york times interactive credit crisis timeline

Why is all this important? Usability and user experience play a large role in whether or not people view your project. Make it easy to use and understand and users will view it.

Interactive timelines often require people to decipher navigation that may not be obvious. That’s OK if the situation warrants it and they can be done well — they don’t have to suck and many are quite good. But don’t fall into the trap of leaping to make an interactive timeline because it’s impressive.

Interactivity should be used to make consuming information intuitive. If it doesn’t meet that goal, you’re wasting time and resources.

Web 2.0 Expo – Data Visualization

The data visualization session presented by Jesper Anderson @janderson and Toby Segaran @kiwitobes was kind of intense but offered a lot of good information for those used to working with data. This would have been perfect for the news artist looking to take their skills to the next level. Here’s a list of the most valuable links, most of which require a willingness to learn some programming.

Flot: A JavaScript tool to make attractive interactive graphics. Requires limited coding.

Flare: Works with Flash to create amazing visualizations. As an example, check out this visualization of your facebook social network.

Axiis: Similar Flare but with more design settings.

Processing: A specialized design-heavy programming language. Very artistic with HTML5 implications.

R. Cutom programming language, once learned, lets you visualize data with just a few lines of code.

GraphViz: Network diagrams from Microsoft using the dot language.

OpenLayers: Allows users to zoom into a large visualization or image in a way that is very similar to Google maps.

Dispatches from Web 2.0 Expo – Part 1

Great User Experience (UX) session. Learned a lot and there was great Q&A. One of the best takeaways was the 10 Laws of Good User Interface from Anthony Franco, president and founder of Effective UI.

  1. A true measure of user adoption is return on investment (RIO). A good user experience = User adoption.
  2. Define success.
  3. value good design “Ugliness does not sell”
  4. It’s not all about the big idea. Big pitch is often ego centered.
  5. You are probably not your user.
  6. Do not try to build for everyone. “Fewer features?”
  7. Gather feedback through conversation.
  8. Users don’t know how to build requirements. Interpret what they say.
  9. Rigid plans are plans to fail.
  10. Every product needs a single vision. Talk about it and build consensus.

Great session that also included tips how to conduct user testing.