Behind the scenes of JSOnline’s “Empty Cradles”

Posted on

I have blogged about JSOnline’s impressive multimedia packages several times in the past. This time around I’m excited to take you behind the scenes of “Empty Cradles,” an in-depth series on infant mortality in and around Milwaukee, Wisconsin. Below is my Q&A with fellow UNC grad Emily Yount, who helped produce many of the interactive pieces for this package.

Q. Why did you choose not to bundle the story sections together?

A. The interactive pieces, including “Mapping Milwaukee’s infant mortality crisis,” “Prematurity’s costs,” “Timeline: Millie and Simona,” and “Inside the modern NICU,” that ran on Sunday, Sept. 25 are part of the story “Priceless preemies, costly care,” by Mark Johnson and Guy Boulton and are a part of the Milwaukee Journal Sentinel’s year-long series on infant mortality, “Empty Cradles.”

You can access each interactive from the story page and all of the content for the Empty Cradles series can be found on its index page. We plan to produce a more custom landing or index page for all of the Empty Cradles content before the final installment of the series in December.

Q. How long did this project take?

A. I worked on the four interactive elements for approximately a month. That includes brainstorming sessions with the reporters, research into the technology of producing each piece, compiling data and then producing each element. However, the map is a culmination of research and work for each installment of the Empty Cradles series since January. Our goal was to bring together data and resources from every angle of the story we have covered thus far.

Also, reporters and editors have worked on the “Priceless preemies, costly care” piece off and on since the spring.

Q. How many producers worked on it?

A. Five people with a variety of skills had a hand in the production end of the project.

Lou Saldivar, Graphics Editor, consulted on design and produced the graphic for “Inside the modern NICU.” He also produced the print version of “Prematurity’s costs” which was the basis for the online version.

Ben Poston, Data Editor, compiled and cleaned up all of the data, geocoded the zip codes and pointed me towards Google Fusion Tables as a means for producing the map.

Bill Schulz, Senior Multimedia and Video Designer, integrated the map and charts into our CMS, and produced the 360 degree panoramic “Inside the modern NICU” with photographer Rick Wood.

Jim Conigliaro, Director of Interactive Technology, worked on the map’s compatibility with Internet Explorer 7 and 8.

I designed and developed the interactive map, worked with reporter Guy Boulton to define and map “Access to Primary Care” for each zip code, produced the interactive version of “Prematurity’s costs,” and produced “Timeline: Millie and Simona” with the help of reporter Mark Johnson and photographer Rick Wood.

Q. What technology did you use for the timeline and map?

A. The navigation and functionality of the map is built with HTML, Javascript and jQuery. Each polygon zip code layer or set of points on the map correspond to a table in Google Fusion Tables. The data and information windows are set within Google Fusion Tables and are queried with the Google Maps Javascript V3 API.

The timeline is a free tool from ProPublica called TimelineSetter that our developers integrated into our CMS. The tool allows you in categorize content and include text, images, audio and video with simple HTML.

The dynamic charts use a combination of HTML/CSS, JavaScript and the JavaScript library Highcharts.

What was the biggest challenge?

A. I produced all of my previous projects with ActionScript 3.0 and I expected making the switch to HTML5, JavaScript and jQuery to be the biggest challenge. Surprisingly, I found the transition less difficult, but faced problems integrating the pieces into our CMS and making them compatible with older browsers such as Internet Explorer 7 and 8. In an effort not to exclude 50% of our readership that uses IE 7/8 we back-tracked on our use of HTML5 in exchange for standard DHTML.

Q. What would you have done differently if you were to redo the project?

A. We designed and developed each interactive piece, and the map in particular, in a way that can be easily repurposed and improved upon, in hopes of making the newsroom capable of responding to both long-term projects and breaking news with interactive content. We have plans to improve the map with custom styling and improved interactivity. For example, I would like the info windows on the map to appear on roll over or on click and to display images or graphics when necessary.

We would also like to improve “Inside the modern NICU,” by integrating the 360 degree panoramic with the graphic that highlights each piece of equipment’s purpose and cost, while maintaining its accessibility across platforms – online, mobile and tablet.

Email Subscription

RSS Subscription