A no-frills tool for awesome charts

For our final Summer Tech Camp, we’re tackling Chartbuilder — the simple tool that’s behind many of Quartz’s crisp, useful charts and graphs. As David Yanofsky writes, Chartbuilder has given “everyone in our worldwide newsroom 24-hour access to simple charts at graphics-desk quality. “

Now, that tool is available for even non-Quartz staffers to use. Here’s a chart I made showing the medal totals by country for the 2012 Summer Olympics:

Summer-Olympic-medals-by-country-2012-Gold-Silver-Bronze-Total_chartbuilder

To launch Chartbuilder, you’ll need to enter a few command lines into your computer’s terminal. You’ll find the lines here under “getting started.” As for the terminal, here’s where to look on a Mac:

ImagePC users, you’re on your own. Just kidding. Try this set of instructions for opening the terminal in Windows 7.

Once you’re in the Chartbuilder interface, try playing around a bit with the pre-loaded data. Once you get a sense of how things work, try adding data of your own. Here are a few sample sets to get you started.

 

Tech camp goes mobile

If the forecast is correct, this week will feature some really fantastic summer weather, so we’re going to head outside and see what kinds of stories we can tell with nothing more than our smartphones and a couple of apps.

We’ve already experimented with one of them: ThingLink. We used the desktop version earlier this summer, but now that it’s publicly available as an app, we can try to do something similar to what the Washington Post produced during the White House Correspondents’ Dinner in April.

Another fun little app I’ve been playing with lately is called Over, a super-simple tool that lets users place text and a limited selection of graphics over images. Here’s a graphic for an imaginary blog post about entertainment options in Boston. It took about five minutes, and that includes the time I spent walking down the block to take the picture.

madewithover

For other examples of Over projects in the wild, check out this blog from the app’s developers.

Don’t forget your phone on Monday. (No smartphone? No problem. We’ll pair you up with someone who has one.)

Google Fusion, revisited

During last week’s tech camp, we touched briefly on the way data is shaping how stories are told online. Today, we’ll explore that concept more deeply through Google Fusion Tables.

To use utterly unscientific terms, Fusion Tables are souped-up spreadsheets that superimpose — or fuse — information onto Google’s expansive mapping system. The finished products can be saved, shared and embedded on websites. Fusion also allows users to create simple charts, timelines and other data visualizations. Our focus, however, will be on building interactive maps. (Read this for a few reasons why mapping is important to modern digital storytelling.)

Once you learn the basics of Fusion, it’s possible to create a fairly sophisticated project in less than 30 minutes. Still, the process can be a little intimidating at first. Here are step-by-step instructions to help you along, and here are the three things you need for a successful project:

1.) A goal. What do you hope to achieve? What do you want to help readers understand? What do you know? What do you ned to know? Will this be a stand-alone map or part of a broader package?

2.) Valid data that can be manipulated using geography. The simplest example is a list of addresses, like in this table I made showing a few visits to New Hampshire by possible 2016 presidential candidates. Here’s another example that shows the location of stalled construction in New York City.

(A note about validity: Data shouldn’t be treated any differently than other kinds of information we handle as journalists. In other words, verify, contextualize and cite properly.)

3.) Shape files. These are necessary only for projects in which you want to show highlighted geographic areas, as opposed to pins. They contain boundary information for common geographic areas like states, provinces, countries and counties. To see what I mean, check out this project by the Guardian. The pins were dropped using basic address information, while the colored patches relied on shape files for geographic areas. (We’ll cover where to find the shape files and how to make them different colors during camp.)

Finally, here’s the tutorial we’ll be using together on Monday. It’s far less complicated than it looks. Promise!

The second session of Tech Camp is underway

Tech Camp is back from hiatus, and the next six weeks will be packed with digital storytelling adventures. (And maybe those microwave s’mores I promised back in May.) We’ll revisit a few tools we covered last month and add some new ones to the mix. This afternoon, we’ll focus on  Infogr.am, something I suspect resembles the layout software of the future.

We’re starting here for several reasons. Infogr.am is less buggy than many of the other tools on the agenda, and it’s fairly simple to use. It also allows for a nice mix of data and visuals — two of the major elements shaping digital storytelling. To see what I mean, check out this little project I thew together a few weeks ago.

You can, of course, bring your own data and visuals to camp, or use some of the numbers here or here. If neither of those topics is appealing, do a bit of  Google research to compare the number of seats in Fenway with the number of seats in Yankee Stadium. To find visuals, use the Creative Commons search interface, and be sure to credit the author somewhere in your project. When you’re done, post a link to your Infogr.am in the comment section.

 

Meograph is a little bit of everything

A typical Meograph frame combines an image, a map, text and audio.
A typical Meograph frame combines an image, a map, text and audio.

It’s been a busy summer so far for tech campers. We’ve played with mapping, turned flat photos into interactive presentations and built timelines. This week’s tool allows us to combined these techniques on a single platform. It’s called Meograph, and it has the potential to produce results like these.

Users build presentations using photos, videos, narration, dates and locations. Unlike some of the other tools we’ve looked at this summer, many files can be uploaded — or, in the case of audio, recorded — directly into Meograph. As you can see from this video, it takes just a few minutes to assemble a basic presentation:

Meograph is still in beta, so it doesn’t always behave exactly as you might expect. That said, the support team is responsive to questions and open to suggestions. To reach the team, use the little chat box in lower right corner of the Meograph website.

Here’s a quick little production tracking my cat’s weekend road trip to upstate New York. (Does that mean it’s a Meow-graph?) It’s rough in a few places, but we’re going to smooth it out together at today’s tech camp.

Tech Camp: Tomorrow’s layout software today

I made this with Infogr.am. Click for the interactive version.
I made this with Infogr.am. Click for the interactive version.

I love finding new ways to tell stories online, but sometimes the results feel a little unpolished — especially with projects that require combining different kinds of visual elements. That’s one reason why I was so excited to discover Infogr.am, a web-based program that allows users to create simple interactive graphics and arrange them in templates with photos, video and text.

This tool is pretty close to how I imagine layout software of the future: Content is content, and it’s up to users to decide how to use it best. The templates are lovely and the logic behind them is sophisticated enough to manipulate simple datasets into something meaningful. Color pallets have never been my strength, but it seems like Infogr.am has enough options to work with pretty much any design.

Here’s a mashup I put together last week that looks at how American food prices have changed in the last 100 years. I use Google’s data search interface to find the numbers and this Creative Commons search hub to pick a photo. (The topic, by the way, was inspired by The World’s What’s for Lunch project.)

There are at least two other similar tools out there: Easel.ly and Visua.ly, although the latter is pretty locked down in its free form.  This type of platform could be useful to journalists of all kinds, but I see it as a tool that would be especially powerful on social media. Awesome print graphics often lose something when they’re cropped for the web, and can look even less exciting on Facebook. Tools like Infogr.am mean social media editors can rebuild those graphics in a digitally native environment made to draw readers into the larger story.

If you’d like to test drive Infogr.am, try building a presentation that allows users to see average annual rainfall across Massachusetts.  Use this spreadsheet, which is from the NOAA National Climatic Data Center. For photos and video, use the Creative Commons search hub listed above. When you’re done, paste a link to your work in the comments section below this post.

Two tools for interactive timelines

There are lots of tools out there for building interactive timelines, but my two favorites are Dipity and TimelineJS.

Dipity has been around long enough that it was the platform for one of my first digital storytelling projects, which documented New Hampshire residents who died while serving in Iraq and Afghanistan.

TimelineJS is newer, and I’ve quickly grown to love it because of its polished look. It’s been used for several notable stories, including this money laundering project by the San Antonio Express-News and the Denver Post’s coverage of the Colorado movie theater shooting.

The two platforms work a little differently. Dipity is a WYSIWYG  (short for “what you see is what you get.”) Users insert links, images, text and video directly into the timeline. This video gives you a quick overview:

TimelineJS, meanwhile, is based on a Google Sheets template that allows users to drop in text, photos, videos, maps and more. Click here for the template and step-by-step instructions.

(Both Dipity and TimelineJS are also popular among educators. Here’s a piece from the Chronicle of Higher Education about TimelineJS. And here’s another about Dipity.)

UPDATE, June 18: Here’s another example of Timeline JS from CT News Junkie. Note how the editors designed a still image with a click button to work with the site’s narrow center column.

What can Zeega do for journalism?

Digital narrative is being redefined with projects like Snowfall Firestorm and, this week, the Chronicle of Higher Education’s Bounced Around.

These stunning, intricate works are landmarks on the path to tomorrow’s journalism, but they also require more resources than most newsrooms can muster. That’s why tools like Zeega are so exciting. By meshing the curation power of Storify with the layout and design features of PhotoShop, Zeega allows users to piece together elegant, interactive narratives like these. Or join the Internet’s perpetual genuflection to cats.

Regardless of your end goal, Zeega is free and fairly straightforward to use. I’m especially fond of how it generates automatic citations for curated content, creating a trail of verification for viewers. Also nice: Zeega uses HTML5, not Flash, so it’s compatible with virtually every device.

If you’d like to give Zeega a try, follow these steps:

  • Click here to go to the Zeega homepage and create an account.
  • Click the blue “create new Zeega” button in the upper right corner of the homepage. You’ll see a user interface that looks something like this:

zeega

  • The column on the left is your pallet. Use it to find publicly-available sounds, images and videos. You can also upload your own.
  • Drag and drop those elements on to the black canvas in the center of the page. Elements can be combined using layers similar to those in PhotoShop.
  • To add a new slide in your Zeega, use the “add page” button in the upper left. To add text or change the background color, use the buttons to the right.
  • If you’d like an audio file to play during the Zeega, add one using the “soundtrack” button in the upper right.
  • When you’re done, publish and share your Zeega using the buttons in the upper right.

Want to learn more? Poynter’s NewsU recently hosted a Zeega webinar. You can watch a replay here.

(Google) Fusion cuisine

If you’re coming to today’s Tech Camp — and you should — here are few links that we’ll reference during our second Google Fusion workshop:

1.) A list of U.S. state foods from Wikipedia. (I’ll show you how to import this into Fusion during the workshop.)

2.) A file containing information on the boundaries of the U.S. states. (I found this through Google’s Tabels search interface, which you can see here.)

3.) Obesity rates by state.

4.) A list of state capitals.

Our goal will be to create the following: A map that uses different shades of a color to show obesity rates and illustrates official state foods; a timeline that shows when each official food was adopted; a chart or other type of visualization that tells us something else about this information.

If you missed last week’s overview of Fusion, here’s everything you need to know.