A lot of data visualization requires the technical expertise of a programmer and skills that take time and resources to develop.
A rise in free tools, however, has made it easier to make interactive graphs in charts, whether you’re a designer, developer, Web producer or hobbyist. The Google Visualization API, for instance, gives you options without making the work too complicated.
I’ve created a tutorial below to help you make simple, Web-based Google charts. (You can click on any of the screenshots to go to a larger version.) In the first example, we’ll craft an interactive bar chart that compares the numbers of tornado-related deaths in the United States throughout the past four years.
We’ll use data from the National Oceanic and Atmospheric Administration (NOAA), which can be found here. (You can download a cleaned version of this data here, formatted as a comma-delimited file, CSV.)
1. In a new window or tab, visit the Google Visualization API homepage. Select Bar Chart.
2. Just above the sample code, you’ll see a line of text with a link to the Google Visualization API playground. Click on it, or click here.
3. Now, you’ll see code you can adjust. Put the label for units of measurement in your y axis (going up) on lines 11 and 32, and the label for your x axis (going across) in line 33. Change the “raw_data” in lines 4-7, so instead of being labeled with countries, they are labeled with “April,” “May” and “Whole Year” — to mark that we have a series of information showing how many deaths occurred in a given year for that amount of time.
4. Change the “years” in line nine, so it reflects data spanning 2008-2011.
Fill in your series, starting with line four in “raw_data.” Delete any extra numbers at the end of each line. Since we have so few numbers, we’ll do it by hand here. If you had a larger data set, open your CSV in TextEdit or Notepad, and use a find/replace function to format each line so it matches the format in the screenshot below.
Now would be a good time to click the Run Code button, which lets you preview how your chart looks graphically. Your graph may come up blank if there’s an error. (You might have six numbers listed for April, but only four different years where you listed the years, for example.)
5. All that’s left is formatting the graph. This part starts on what I have as line 29, but it may be slightly lower or higher for you depending on changes you’ve made.
Below, I chose to adjust the title, width and height, and I added the titleTextStyle line to increase the font size. There are also other options you can choose, such as changing the position of the legend (or eliminating it altogether), and changing colors of the bars. You can click View Docs to see a full list of your options.
One other parameter you may want to turn on or off is Tooltip, which displays the axis name, and exact number, when a user hovers his or her mouse over an individual bar.
When you’re happy, press the Run Code button and check to see if you like the finished product.
6. Finally, press Save, then View Source on the resulting Web page, and copy and paste that code into your CMS.
(If you have difficulty doing this, talk to your CMS developer about the ability to include JavaScript in your stories. Locked-down versions of WordPress can be especially picky.) You can see a final, interactive product here.
If you want further instruction and more thorough explanations of the steps I outlined, you can watch the video tutorial I created. The video is easiest to view when you expand it to full screen.
Here are a few related questions and answers to keep in mind as you make Google charts.
Why can’t I just use Excel charts, Photoshop or Illustrator?
It’s important to use graphic tools that are “of the Web.” That means they’re designed specifically for use on the Web, allowing for more interactivity. There’s a lot you lose out on when print tools are repurposed.
The actual data in your graph is embedded in a Web page’s code. This makes it easier to search for your graph because numbers, labels and even your graph’s title become part of your Web page’s metadata. Selecting well-chosen words for your graph helps make it more SEO-friendly.
Graphics of the Web work across platforms. The resolution of images doesn’t appear as grainy on the iPhone, for instance, and folks on mobile devices can zoom and interact with graphics of the Web more naturally.
What other options are there?
When it comes to creating graphs that are “of the Web,” some tools are easier to use, but less customizable. If you want your graph to be more customizable, you’re going to need a bit more technical knowledge.
If you don’t want to do any coding, I recommend looking into ManyEyes, which lets you upload data and provides different types of options for displaying text- or numbers-based data.
If you want really robust customization, use the JavaScript libraries Protovis and Flot, which are each useful for distinct reasons. If you want your graph to be the focal point of an interactive, go with Flot. If you want to do many small multiples, or if the graph is a side component of your piece, go with Protovis.
What if I want to create something other than a bar chart?
If you stick to the Google world, there are many other different types of graphs and charts you can make through the Google Visualization API.
Also, if you’re interested in making static charts as images, there’s a similar Google product called Google Image Charts. (But remember, static charts won’t help you get better search results.)
The best way to learn what tools are out there, and how to make them work, is to just start making charts. You might be surprised by how many of the concepts above apply to different situations.
Comments