Archive for the ‘Graphic design’ Category


Easy Infographics On Deadline

 

Want clean infographics without a graphic designer?

There’s a new site for that — called Infogr.am.

Infogr.am lets users fill in the blanks with graphic templates, in an easy way.

You can drag and drop visual elements, add your own data, and change around color schemes to customize data for your readers.

The end result can be embedded onto your site to provide layers of interactive data.

A review by 10,0000 Words called the new tool “perfect for a journalist, blogger or social media editor on a deadline.”

Click here and here for other reviews on the site, which is still in beta.

 

Jodie Mozdzer is a reporter for the Valley Independent Sentinel, an online-only news site in Connecticut. She is a member of the SPJ Digital Media Committee and incoming president of the Connecticut pro chapter of SPJ. You can follow her on Twitter @mozactly.

Getting started with quick, easy data visualizations

Charts, fever lines, maps and diagrams: They aren’t just for the Graphics Department anymore.

There once was a time when reporters dealt with words and someone else dealt with the numbers and the pictures. But not anymore. There are plenty of free, easy tools now to get any journalist, regardless of their word-centricity, started on data visualization all by themselves.

That means you can do you can do your own quick and easy data visualizations to go with your own online stories or blog posts.

My Digital Media Committee colleague Jodie Mozdzer, who is working on her masters in news infographics, recently blogged for us on some handy Web sites you can use to learn more about data visualization. With Jodie’s gracious permission, I’d like to pick up that thread and add some more.

If your newsroom is a small shop like mine, doing your own data visualizations is great because you don’t need your own dedicated graphics staff to turn out a professional-looking pie chart or fever chart. If you’re in a larger newsroom with its own graphics department, your (probably overworked) graphics staff may not be in a position to crank out a fever chart every time you want to do a quickie blog post about the new revenue projection numbers from the city finance department. But you can do a simple visualization all by yourself.

But this isn’t just about generating pictures to dress up your blog posts. As a reporter, doing your own simple data visualizations using free tools — especially earn on in the reporting process — allows you to spot interesting trends that you might not always see easily just by reviewing a spreadsheet full of numbers.

And, best of all, it prevents the situation that one former newspaper graphics guy complained to me about recently: The moment when a graphics guy/gal realizes that the reporter who’s writing a spot story about tax revenue projections going up has just handed over a spreadsheet of numbers that, when plotted on a chart, show the projections actually going down.

With free data visualization tools, reporters can draw their own quick-and-dirty graphics and make sure the squiggly lines really are going up, up, up, and not down, down, down before they make 17 phone calls asking the city council how the city should spend all that extra tax money.

We’re going to talk mostly about free, browser-based tools today.

For basic charts, fever lines, stock-price-type charts and old-fashioned pie charts, go to Google Docs. You’ll only need a free Google or Gmail account. Go into the Google Docs spreadsheet and type in or import your data.

Then, go to the icon in the toolbar that looks like miniature bar chart showing, say, your state budget’s spending on highway pothole repairs. Hit that button, and it’ll walk you through the steps of creating a chart with a custom title. You can then save that chart as a .jpg or .png image file and place it in your Web story or blog post like you would any other image you would use in your CMS. (Microsoft Excel will also create nice charts and has more customization features for charts than does Google Docs, so if you have Excel and know how to use it, you can try Excel. However, my older version of Excel won’t let me export a chart as a separate image file, so I use Google Docs anyhow.)

To compare the size of different things — relative size — try making a “bubble chart” using IBM’s free ManyEyes site. This generates a graphic that I see in the New York Times probably more than any other major news outlet site, one that looks like you’re looking at a glass jar full of marbles, with little marbles of various size and big “shooter” marbles mixed in. (For those of you who also read the SPJ Generation J blog: “Marbles” was a game children used to play before they invented Nintendo.)

Outcome of Chihuahuas at LA City Shelters in 2009 Many EyesHere’s an example: A ManyEyes visualization of the fates of chihauhuas brought in to a California animal shelter. Like Google Docs, ManyEyes allows you to save your graphic as an image file and then upload it to your CMS, which enables me to plop this chart right down in the middle of this post. (What is going on with the seven chihuahuas that escaped, by the way?)

But notice one thing: The data shown here regarding chihuahuas could also work just as well as a pie chart. I mean, we’re talking about one finite set of numbers — all the chihuahuas brought into a certain shelter in a certain year. So, the most crucial aspect to be visualized is what proportion of the whole wound up being adopted out, euthanized, escaped, etc. And that’s what pie charts generally show, proportions of the whole.

Let’s imagine a bubble chart that shows something that you couldn’t show with a pie chart. Say you wanted to show the amounts of emergency preparedness spending in the current fiscal year budgets for all the cities in your MSA.

You can’t show that very well in a pie chart, can you? I mean, there’s more than one pie, because there’s more than one city involved. But the size of the bubbles in the chart will help people see the sizes of the emergency preparedness budgets relative to one another.

From WikipediaScatterplot charts: I’ll be honest with you: There’s something about scatterplot charts that makes my head hurt. If you’re really needing to use a scatterplot chart, you’re probably an education reporter (or a former ed reporter having a post-traumatic stress disorder flashback to your last statewide standardized testing data-dump day). A statistically minded friend of mine tried to tell me not long ago that scatterplot charts are just fever charts with a really fuzzy fever line, which makes more sense to me than any other explanation I’ve ever heard. But if you’re in need of a scatterplot chart, ask yourself, “Am I still an education reporter?” If the answer is yes, both Google Docs spreadsheets and Google Fusion Tables will create scatterplot charts. If the answer is no, you probably do not need a scatterplot chart. You just need a stiff drink.

Wordles: We’ve all seen a Wordle: A computer program takes all the words in a given piece of text, analyzes them and diagrams which ones were repeated most often. This may not count as the purest form of “data” to visualize, but can sometimes be kind of entertaining, such as when people have dumped the text of gubernatorial “state of the state” speeches into the computer brain. You can also try some variants of Wordles like word trees through ManyEyes.Wordle: US Constitution

Maps: So much of what we do as journalists involves not just data but data tied to geography, which means creating maps is a good way to do data visualization — but there are several ways to make maps depending on just what you’re trying to show.

The simplest way to do a map online — a map showing one dot on it — is with Google Maps’ My Maps function. Are you the 6 a.m. cop shift reporter at your shop who’s assigned to update your home page with breaking news, and you get a report that an F-4 tornado has just destroyed all of downtown Snodgrass, Okla., including the World’s Largest Upright Vacuum Cleaner, which had been housed at the National Museum of Vacuums and Cleaning Appliances in Snodgrass, and you need to quickly get a map up online showing the location of Snodgrass? Go to Google Maps, search for Snodgrass, Okla., hit the “link” button in the upper-right corner to grab the embed code, and plop that code in your Web story.

Multiple points on a map: But it’s much easier to understand the power of maps when you see how easy it is to plot multiple pieces of information on a map. Back a few months ago, the school system here in Houston was considering closing some “small” schools — schools with the fewest students, said to be less-than-economical to operate — to save money. A colleague of mine mapped the location of all 60-plus schools that were in play for closure using another free site called Geocommons, which allows you to upload a data file of many map points and customize the information window text for each point. (You can see her map below.) You’ll first need to add a column to your data file that includes the latitude and longitude for each point (each school, in this case), and if you have a relatively small number of points, you can do that for free using sites like Batch Geocode. Geocommons is free and its maps are easily embeddable.

You can also map multiple points using Google Fusion Tables, which has the added benefit of built-in geocoding (to “geocode” something is to find the lat-long coordinates for it). A nonprofit online news site in North Carolina used Fusion Tables to produce a super-cool map of damage by a recent tornado in the Raleigh area, for instance (at right). Again, free and embeddable.

You can get as creative as you want with tricking out the info window text in these custom maps. Here’s a map I did a couple of years ago where we took just about all the information we could find online for all 181 Texas legislators and married it all to a Google Map. Yes, it did take a long time to pull all this together, but with the incredible improvements recently in services like Google Fusion Tables and Geocommons, it’s a lot easier to do a map like this today than it was when I did it in ‘09.

Lines or routes on a map: Need to show the six different cities the governor flew to on state aircraft to rendezvous with his mistress? Go to Google Maps and plot each trip using colored lines for each of the flights using the crooked line tool in the upper-left corner of the map window. Then save the map, grab the embed code and embed that sucker in your blog post or story.

Maps with shapes on them: Sometimes it’s not enough to show a point on a map, or even a line. You need to show the boundary of a county or the proposed lines for newly redrawn legislative districts or the jurisdiction of a municipal utility district.

The map people call these shapes  “polygons,” a word most of us haven’t used since high school geometry class, and it used to be, you’d need $2,500 worth of software like ArcGIS to do stuff like that.

Not anymore. Geocommons and Google Fusion Tables will both allow you to upload GIS “shapefiles” of city, county and other government boundaries — and you can often download those files directly from the U.S. Census Bureau’s Web site or get them from your local planning department. Just upload your map boundaries and tell it what color scheme to use. Here’s one I made not long ago that shows Houston’s 88 “superneighborhoods,” as defined by the city.

Comparing geographic areas: Need to show the difference in per capita incomes in each county in your MSA or state? I’ve always called these “heat maps” though I think the formal name is “chloropleth map.” Just like Geocommons and Google Fusion Tables will both let you upload shapefiles, they will also enable you to shade the polygons to show data characterisitics for those areas — the redder the red, the higher the per capita income in that county, for instance. Or, the bluer the blue, the more kids living in that Census tract who live at or below the poverty line. Just upload your map boundaries, upload your data, and tell it what color scheme to use. Here’s one (below) from ManyEyes, showing the number of youth homicides in the states of Brazil.

Homicidios de Jovens por Estado - 1998 a 2008 (Mapa) Many Eyes

Again, not only is this a good way for readers to take in a whole lot of information easily, it’s a good way for you as a reporter to quickly spot trends that could make good stories. For instance, here’s a map (below) plotting county-by-county Census data. For instance, notice the counties with the high numbers of small kids in, say, several counties in Utah. Why? Might make a good story. In the very southernmost tip of Texas? What’s up with that? And a baby boom in western South Dakota?

Before I sign off, let me add to Jodie’s list of good sites to bookmark if you want to see cool data visualizations. My Facebook friend and former competitor Matt Stiles, late of the Texas Tribune but now of NPR, has a Tumblr blog on data visualization called the Daily Viz. I found the Census data map through his site, so check it out.

Jennifer Peebles is a deputy editor at Texas Watchdog, a nonprofit online news site based in Houston, and is chairman of the SPJ Digital Media Committee. A truncated version of this blog post appeared in the most recent issue of SPJ’s Quill magazine. Contact her at jennifer@texaswatchdog.org, 281-656-1681 or on Twitter at @jpeebles or @texaswatchdog.

Data Visualization and Infographic Sites To Bookmark

VisualJournalism.com graphic

As I work on my master’s project in news infographics, I’ve started following several blogs and websites that have good data visualization, or tips on how to do it yourself.

I thought this would be a good forum to share a blogroll. Even if you’re not able to put together graphics like these yourselves, it helps to know what’s possible and use it to spark ideas for fresh reporting on topics.

This list is just some of the sites out there. Feel free to post others that you’ve found in the comment section.

  • Visual Journalism, a privately sponsored site, boasts “show, don’t tell” in modern journalism. The site tracks information visualization in journalistic endeavors.
  • Good Magazine has great info graphics to depict data about topics of health, education, politics and the environment.
  • ExcelCharts.com, is a site run by Jorge Camoes of Portugal. He has a masters degree in statistics and information management. Many of his blog posts deal with business applications of data visualization, but he often has good tutorials and insights.
  • Fast Company’s Co. Design runs an “infographic of the day” on a section of its website. The company is a design firm, and the graphics aren’t always journalism related. But there are great examples of new ways to look at information throughout the site that can have practical implications on our jobs.
  • Flowing Data is a blog run by UCLA PhD candidate Nathan Yau, who tracks data visualization trends.
  • The Guardian on London has a Data Blog and data website, which pour through interesting data and try to make sense of it for readers. The paper even opened up its data for readers to review and try to make their own infographics.

Jodie Mozdzer is a web journalist for the Valley Independent Sentinel in Connecticut. She is a member of the SPJ Digital Media Committee and the treasurer for the Connecticut chapter of SPJ. Jodie is getting her masters degree in Interactive Communications from Quinnipiac University, with a focus on interactive news graphics. You can follow her on Twitter @mozactly.

Google Charts Part 2 of 2: Motion Charts

In November, we talked about how to use Google Documents to create quick and easy charts to augment your everyday reporting.

Now lets talk about Google Motion Charts — a more in-depth way to compress and display tons of data in one easy, interactive, moving chart.

This How-To is really an overview to introduce you to motion charts, and give you a basic idea of how to use them. The power of motion charts is the ability to compare any variety of data, so it’s up to you to use the charts to suit your reporting needs.

I’m still figuring out the charts myself, and have only ventured into using it to track unemployment data. My first try at the charts only scratches the surface of what they are capable of communicating.

Background

Google Motion Charts is based on a program created by Hans Rosling of the non-profit group Gapminder.

Gapminder developed software that would take large amounts of data and visualize them in a movable timeline to “unveil the beauty of statistical time series by converting boring numbers into enjoyable, animated and interactive graphics.”

Gapminder used the software to compare world data. In one chart, for example, Gapminder compares age of first marriage and income levels in various countries around the world.

Google bought the software in 2007, and you can now use it to create your own interactive, animated timelines.

The motion charts are best understood by viewing them, so click here to play the video to see an example of a motion chart in action.

Applications

The Google Motion Charts let you compare up to five data sets at a time — and track them over the course of time.

That’s a powerful tool for news reporting.

I’ve used the charts to look at unemployment rates in various towns. Click here to view the story.

One blogger tracked college alumni donations, comparing the graduation dates, median income and percentage of class that actively donate to the college.

Use census data to track median income, education levels and populations in several different towns or neighborhoods. The possibilities are endless, and customizable to your beat.

How To

Click here for the how-to from Gapminder.

The following is a summary of the steps:

1. Open a Google Documents spreadsheet.

2. Determine what data you want to be represented by bubbles. Gapminder usually makes the bubbles represent countries. The larger the bubble, the larger the country’s population.

3. The second column is for years. (2000, 2001, 2002, etc.)

4. The following columns are for the rest of your data.

5. Click Insert –> Gadget. Choose motion chart.

Once you insert the Google Motion Chart, you can customize where data appears in the chart. Then, it’s easily published to the web by clicking Publish, and pasting the HTML embed code onto your website.

Jodie Mozdzer is a web journalist for the Valley Independent Sentinel in Connecticut. She is a member of the SPJ Digital Media Committee and the treasurer for the Connecticut chapter of SPJ. Jodie is getting her masters degree in Interactive Communications from Quinnipiac University, with a focus on interactive news graphics. You can follow her on Twitter @mozactly.

Google Charts: Part 1 of 2

Graphics are great tools to complement your reporting.

This two-part series will talk about why and how to create charts and graphs using Google spreadsheets.

The first blog post is a tutorial explaining the basics. The second will describe the more complicated Google motion charts.

Why Use Charts At All?

Simple. Charts help people digest large chunks of data. They also add color to stories and help break up text.

But most importantly, they help people better understand the information that is often the foundation of your stories. (And help the reporter see trends that can get lost in a sea of numbers.)

Like anything, there are ethical considerations when creating your own charts. Your information source needs to be credible. Make sure the proportions on your charts don’t distort the real story. Make only like comparisons in data. For example, don’t compare five years of test scores at one school to three years of test scores at another school.

Step 1

Get familiar with Google Documents, if you haven’t already.

You’ll need a G-mail account to use Google Documents. Once you’re set up with one, create a new Google docs spreadsheet. (It’s just like a Microsoft Excel document.)

Step 2

Figure out what kind of information you have, and what kind of chart you can use to display it.

Pie charts easily display percentages.

Chart Possibilities: How much of your town budget goes toward education and how much goes toward town expenses? What percentage of the total budget is taken up by payroll? Pie charts are a great way to show that, instead of just saying that.

Line graphs pinpoint changes in data sets over time.

Chart Possibilities: Did the budget increase over time? How does that compare to the town’s population changes over that same time period?

Bar graphs often compare several data sets in one snapshot in time.

Chart Possibilities: How does the town’s spending compare to other similar sized communities this year? How does the tax increase compare to area towns?

Step 3

Import your data. (Warning: You may be required to do some math to set up the information in the correct way to transform it into a chart.)

Keep in mind that most charts can compare two or three sets of data. So keep it simple. (We’ll get into large, complex data sets in the second part of this blog series, when we talk about Google Motion Charts.)

Some examples

Pie Chart:
In Google Spreadsheet, you’ll need two columns. Column A will be words: Payroll, Utility Bills, Transportation….. Column B will be numbers — specifically the percentage of the budget those corresponding words make up. (You need to do the math first.)

Line Graph:
You’ll need three columns: First will be years. Second and third will be data sets.

Don’t worry too much about how you set up your information. Google Charts can often recognize what kind of chart you are trying to create, or you can change things around later.

Step 4

Insert Chart.

Highlight the data set you’ve created and click on the Insert tab in Google Documents. On the drop down menu there’s an option for Charts. Click that.

You can chose from a variety of chart options in the menu.

Click on the tabs in the pop-up window to customize the titles for each axis and the chart title.

Once you click the insert button at the bottom of this pop-up window, the finished chart will appear within your spreadsheet. Voila!

Step 5

Export.

Once the Google Chart appears in your document, you have a couple options for how to export it.

Each chart will have a title in the left hand corner. Click on that title, and a drop-down menu appears.

If you click publish, you get HTML code to drop into a website or blog window.

If that’s your decided method, make sure you save your document and don’t alter the data. If you don’t save the document, the code doesn’t work. And if you change the data, the chart will update with the new information.

The easier way to save the charts is to simply click “Save Image.”

Part 2

Coming up next, we’ll talk about the much more interactive Google Motion Charts. The second part of this tutorial will appear later this month.

If you thought static info-graphics were powerful tools for displaying data, just wait! Motion Graphics will blow your mind.

Jodie Mozdzer is a web journalist for the Valley Independent Sentinel in Connecticut. She is a member of the SPJ Digital Media Committee and the treasurer for the Connecticut chapter of SPJ. Jodie is getting her masters degree in Interactive Communications from Quinnipiac University, with a focus on interactive news graphics. You can follow her on Twitter @mozactly.

Free chart creation with Chartle.net

Creating and publishing interactive charts no longer requires expensive software.

Forget about building simple line graphs. Using Chartle.net you can create any number of visual charts to display your data online.

Here are a few examples of the types of charts you can make using Chartle.net:

Using Chartle.net does not require registration and is free.

Every chart you build can be published, shared and embedded on your website or blog.

Data for your chart can be entered manually or inputted using an excel spreadsheet via the ‘import’ feature.

You can also adjust the size of the chart you create to fit your site.

Before you publish your Chartle you’ll be asked to give it a

? Title

? Author

? Description

Click here to view an example of this interactive Chartle.net chart.

Need to make a modification to your chart? You can create a new chart using the data stored in a currently published chart.

Hilary Fosdal is the Interactive Content Manager for Barrington Broadcasting Group. She blogs at hilaryfosdal.com and tweets @hilaryfosdal.

Create an interactive timeline using Dipity

Interactive timelines are a great visual way to inform and engage users about your news topic.

Dipity timelines can do more than display simple text. Adding photos, links, and pulling in RSS feeds are just a few of the fun features you can play around with.

Timelines created in Dipity can be displayed using a standard linear graph or in ‘Flipbook’ mode which is similar to a multimedia carousel or ‘List’ which displays the content in a cataloged format.

Whether you are detailing a series of events that lead up to a major news event i.e., the spread of the swine flu, or providing a historical and chronological display of events i.e, the History of the New York City Marathon timelines are no longer confined to the boring textbooks of yesteryer.

HOW TO START CREATING YOUR OWN DIPITY INTERACTIVE TIMELINE

Go to Dipity and create a free user account.

Click ‘Add a Topic’

A window will appear asking you to choose a method to craft your timeline: Web search, RSS Feed, Blank.

To begin creating a standard timeline choose Blank.

dipity1

The window will allow you to give the timeline a Title, Desciption, upload a timeline profile picture, add SEO tags, pick a theme, a timezone, and allow you to determine who you will allow to view your timeline.

I would suggest picking a free theme and allowing anyone to view your timeline.

To start creating events on your timeline click the blue button ‘Add an Event’.

A new window will appear that asks you to include a:

  • Title
  • Date
  • Description
  • Upload a picture or paste an image URL
  • Add a link
  • Include the location of the event (Dipity will generate a map for the location of the event)
  • Add a video URL

Once you click ‘Save’ the event will be added to your timeline which you can view in the standard Timeline format, as a Flipbook, List or on the Map.

You can always go back and edit or delete any of the fields by clicking the event located on your timeline.

You can click ‘Add a Source’ to feed other online account data into your timeline i.e., Flickr, Tumblr, FriendFeed and Yelp, to name just a few.

Once you have completed adding in all your ‘events’ you can embed your Dipity timeline into your website, blog, or Facebook. Dipity will generate a customized embed code when you click ‘embed widget’.

dipity2

Dipity is also social media savvy and allows other Dipity users to comment on your timeline and has Twitter, Facebook and a host of other social networking apps to help you spread the word about your cool new timeline.

Still have more questions? Check out the Dipity FAQ.

If you experiment with the RSS timeline feeds you’ll discover that Dipity automatically pulls in the images embedded into your posts or articles. Personally, I think this is a great feature – one less field for me to fill in!

Examples of Dipity interactive timelines:

Hilary Fosdal is the Interactive Content Manager for Barrington Broadcasting Group. She blogs at hilaryfosdal.com and tweets @hilaryfosdal.

Learning The New Digital Media Tools On A Budget. Here’s How…..

I’ve been asked by many reporters how much it cost me to learn how to design a website, edit digital video, use Photoshop, produce digital slideshows, and now create animated graphics and logos.  Well it was cheaper than you think.

Almost two years ago, I went full force learning everything I could about multimedia tools right after I lost my television reporting job in Dallas. I thought I needed to learn more, but for as little money as possible.  My husband is supporting us, but I didn’t want him to think I was going hog wild on my spending.

I “Googled” everything, and quickly learned there were many multimedia and digital media workshops being taught by professionals.   I thought wonderful until I saw the price for a one week workshop.  Digital video classes in New York City were one thousand bucks! Photoshop classes were nothing cheap. Video editing classes in Los Angeles were also a hefty price.  This didn’t include hotel and airfare expense. 

So I put my reporting skills to work and started looking in my backyard.  I found a community college in Dallas that offered all the classes I needed.  I’ve now taken three web design classes, one Photoshop class, and currently I’m working on two animation classes.  And guess what?  Each class has cost me $124 dollars.  

Do the math; I’ve spent a little over 700 dollars on six classes.  Remember, I found classes for 1,000 dollars for ONE WEEK.   So there’s no need to spend lots of money on learning the new digital media. 

Here’s another tip if you don’t have a community college in your area offering you what you need.  A videographer friend asked me to do a workshop for some of his clients.  I told him I’d do it for free if he taught me the basics of Final Cut Pro.  He got something and I got something.  When all else fails—share your talents.

I do have my “special class money ” jar where I have funds saved up for that one class I know I need to spend a little extra on.  My choice is the Poynter Institute.  I’m headed there this week, and will blog in the near future about my experience there. 

 Until next time!

Rebecca Aguilar

Connect

Twitter Facebook Google Plus RSS Instagram Pinterest Pinterest LinkedIn


© Society of Professional Journalists. All rights reserved. Legal

Society of Professional Journalists
Eugene S. Pulliam National Journalism Center, 3909 N. Meridian St., Indianapolis, IN 46208
317/927-8000 | Fax: 317/920-4789 | Contact SPJ Headquarters | Employment Opportunities | Advertise with SPJ