Twitter
Kat Downs Mulder

Interactive design and development

Latest Posts

Moving away from Flash: A look at JavaScript drawing libraries

Excerpts from a new post for WP’s @innovations blog:
[Go to the blog to read the whole thing]

When Apple announced early last year that it would not support Flash on the iPhone and iPad, a passionate conversation erupted in the world of web development: Was Flash dead? If not, how would it survive? When should it be used? News developers asked these questions as well, and, at least in our newsroom, the conversation inspired some thinking about how to approach interactive development. Over the past year and a half, there has been steady movement toward more interactivity based on JavaScript and fewer Flash-only experiences.

Sorting out the budget proposals

Last week we published a graphic that compared four federal budget proposals through a series of charts. We used the jQuery library Flot to draw simple, interactive line charts that showed how the debt and deficit would change under the different plans. Flot is very easy to use, flexible and customizable, and is one of many free-to-use JavaScript graphing libraries out there (Dracula, Highcharts and RGraph are a few others). We also built a customized chart with CSS and JavaScript at the bottom of the page to show how different categories of spending would be affected.

Read the rest of the article…

Recap from Malofiej 19

Photos: Malofiej 19 at the University of Navarra

In March, I set out for Pamplona, Spain, to join the jury of Malofiej 19. For three days, we judged hundreds of entries in the digital contest, while colleagues on the print side saw over 1,000 entries. Check out the awards here.

Other jury members came from all over the world — Germany, Argentina, Chile, Spain, Italy, and the United States. I met a ton of awesome people who share a passion for infographics and alternative forms of storytelling. Gert Nielson keeps a good log of the goings on at his blog, Visual Journalism. Kaitlin Yarnall of National Geographic wrote a summary piece for the Society of News Design blog here. Javier Errea, who organizes the event, also wrote a post on his blog (in Spanish).

I really liked Stephen Few’s presentation on Infographics and the Brain — reminding us all to think not only of how we want to present the information, but how it will be perceived. It doesn’t matter how good it looks or how clever we think it is if it misses the basic point: helping people understand information.

I gave my presentation on the power of using social media and user-generated content in graphics. I focused on two types of input — that which comes directly from our users (games, polls, submissions) and that which comes from existing social networks (facebook, twitter, foursquare, flickr). The amount of information out there is incredible, and we have to figure out how to use it in ways that show how people fit into their world. The opportunities are endless. Recently some interesting projects have come out that harness some of that power, including the Wall Street Journal’s Foursquare project, a look at check-ins over a week’s time in New York and San Francisco, and the New York Times Bin Laden emotion grid.

For more photos from Malofiej, go here.

Hot multimedia at Global Warning

A full five months after wrapping the Global Warning project, I think it’s time to do a blog post about it! I spent last fall working with a team of students on a National Security Reporting project at Northwestern University’s Medill School of Journalism. I was an adjunct professor, teaching the students multimedia design and light programming, and serving as the design lead for the project, which was led by Ellen Shearer and Josh Meyer.

After spending a couple of months in the discovery and ideas phases, we decided on several graphics that would address the main topic of the project: How could climate change affect national security?

Read more…

Mapping the news: Libya and Japan

The past several weeks have been full of foreign news, and we have been producing lots of graphics to explain what’s happening. I have worked on these two graphics, one about the earthquake and subsequent tsunami in Japan, and one that explains what is going on in Libya.

For a full explanation of the process of creating the Japan graphic, visit the new Innovations blog at the WP (excerpted below):

Friday morning, as news of the earthquake in Japan spread, we started pulling together an interactive map that would show readers where and how events unfolded. Over the next 36 hours, we would continually expand and improve the information, design and interactivity of the map as the news of the earthquake and tsunami came in. Read more »

For Libya, we combined an event tracker with audio and video from the ground. The reports from correspondents on the ground is my favorite part.

Both graphics are done using javascript and jquery, so check them out on your tablet devices!

Putting graphics in motion

Check out my first motion graphics piece, created for part two of Top Secret America, an investigation from The Washington Post.

I worked with Dana Priest to write the script and I recorded the voiceover and did all the animation in After Effects. I created the graphic with maps made by Nathaniel Vaughn Kelso. I’ll write more later about the concept and execution. Let me know what you think!

Games: Testing your memory

I worked on these games last Monday for publication with Tuesday’s health section. Reporter Leslie Tamura collected a whole bunch of tests that indicate how you’re aging compared to peers. We decided to take some of those tests and replicate them for our online readers. We decided on word recall, face recognition and response time. Simple, but fun. Check them out!