Create interactive graphics with Many Eyes
- Last week I taught a session on visualizing data at the Knight Center, highlighting free and easy-to-use multimedia tools. Over the next couple of days, I’ll be posting tutorials on everything we discussed. So far that includes:
- The basics of HTML
- Creating an HTML table from a spreadsheet
- Creating graphics with Google Docs
Today we will use Many Eyes to create interactive graphics. Many Eyes is an IBM Research project that makes it easy to create, edit and share graphics. It may look familiar: The New York Times Visualization Lab uses Many Eyes.
Using Many Eyes, you can load your own information, or use data that someone else has uploaded. Which means: Anything you upload to Many Eyes will be public information. If your data includes private information, don’t load it.
Let’s start with a dataset that already exists: The U.S. budget from 1962-2004.
- Under the data, which is set up like a spreadsheet, click on the blue “visualize” button.
- There are a couple of great graphics that can be created with this data. First, let’s create a “customized stack graph for categories” (the last graphic). It will show how the budget has changed over time. Click on the name of the graphic to create it, and Many Eyes will crunch the data for you and provide a preview.
- Make any changes you want — including which years should be seen when users open the graphic. To save it, fill out information under the graphic: Add a title, tags and description, and click the “publish” button.
- The graphic will reload; at the top you will see your username as the creator. Under the graphic are several buttons: Click “share this” and to publish the graphic. Copy the embed code and paste it in your blog (switch to HTML first) or webpage.
- Following these same steps, you can use the same dataset to create a “treemap of comparison.” (The treemap is like a pie chart with a super hero cape.)
Now let’s create a graphic from data that you add to Many Eyes: In the column on the left, click on “upload data set”. Copy this table of 2008 unemployment rates by state and paste it in to Many Eyes:
| State | January | February | March | April | May | June | July | August | September | October | November | December |
| Alabama | 4.3 | 4.1 | 4 | 3.5 | 4.2 | 5.2 | 5.5 | 5.3 | 5.3 | 5.4 | 5.9 | 6.4 |
| Alaska | 7.4 | 7.7 | 7.4 | 7 | 6.6 | 6.8 | 6.1 | 5.9 | 6.1 | 6.5 | 7 | 7.7 |
| Arizona | 4.5 | 4 | 3.9 | 3.6 | 4.1 | 5 | 5.4 | 5.8 | 6.1 | 6.1 | 6.2 | 6.7 |
| Arkansas | 6.4 | 5.7 | 5 | 4.5 | 5 | 5.3 | 4.9 | 4.6 | 4.5 | 4.7 | 5.2 | 6 |
| California | 6.4 | 6.1 | 6.5 | 6.1 | 6.5 | 7 | 7.6 | 7.7 | 7.5 | 8 | 8.3 | 9.1 |
| Colorado | 4.7 | 4.7 | 4.7 | 4.3 | 4.7 | 5.3 | 5.2 | 5.2 | 4.9 | 5.3 | 5.7 | 5.9 |
| Connecticut | 5.3 | 5.5 | 5.5 | 4.5 | 5.3 | 5.7 | 6.1 | 6.5 | 5.9 | 6.1 | 6.4 | 6.6 |
| Delaware | 4.2 | 4.2 | 3.9 | 3.7 | 3.8 | 4.4 | 4.5 | 4.9 | 4.7 | 5.2 | 5.2 | 5.9 |
| District of Columbia | 6.7 | 5.8 | 6.4 | 5.3 | 6.5 | 6.7 | 7.2 | 7 | 7.1 | 7.4 | 8.4 | 8.9 |
| Florida | 4.7 | 4.5 | 4.8 | 4.7 | 5.3 | 5.8 | 6.5 | 6.9 | 6.9 | 7.1 | 7.4 | 7.8 |
| Georgia | 5.1 | 5.3 | 5.2 | 5 | 5.6 | 6 | 6.3 | 6.3 | 6.5 | 6.9 | 7.2 | 7.8 |
| Hawaii | 3 | 3 | 3 | 3.2 | 3.4 | 4.5 | 4.2 | 4.3 | 4.7 | 4.4 | 5.1 | 5.1 |
| Idaho | 3.9 | 3.8 | 3.8 | 3.4 | 3 | 3.5 | 3.6 | 4.2 | 4.3 | 4.6 | 5.5 | 6.5 |
| Illinois | 6.2 | 6 | 5.7 | 5.4 | 6.2 | 7.1 | 7.4 | 7.2 | 6.5 | 6.8 | 6.9 | 7.4 |
| Indiana | 5.1 | 5.3 | 5.6 | 4.7 | 5.1 | 5.8 | 6.1 | 6.3 | 5.8 | 6 | 6.9 | 8.1 |
| Iowa | 4.5 | 4.2 | 3.9 | 3.5 | 3.5 | 3.9 | 3.8 | 4.2 | 3.9 | 3.9 | 4 | 4.8 |
| Kansas | 4.3 | 4 | 4.4 | 3.6 | 4.4 | 4.4 | 4.9 | 4.7 | 4.8 | 4.4 | 4.8 | 4.9 |
| Kentucky | 5.9 | 6.2 | 6.1 | 5.5 | 6.1 | 6.6 | 6.8 | 6.5 | 6.7 | 6.3 | 6.6 | 7.5 |
| Louisiana | 4.6 | 3.5 | 4.3 | 3.5 | 3.7 | 4.8 | 4.4 | 5 | 5.2 | 5.3 | 5 | 5.5 |
| Maine | 5.8 | 5.7 | 5.8 | 5.1 | 5.2 | 5 | 5.1 | 4.7 | 5 | 5.2 | 6.2 | 7 |
| Maryland | 3.9 | 3.8 | 3.7 | 3.4 | 3.8 | 4.2 | 4.5 | 4.5 | 4.4 | 4.8 | 5.1 | 5.6 |
| Massachusetts | 5.2 | 5 | 4.8 | 3.9 | 4.7 | 5.3 | 5.2 | 5.1 | 5.3 | 5 | 5.5 | 6.5 |
| Michigan | 7.8 | 7.7 | 7.9 | 6.6 | 8.3 | 8.7 | 9.1 | 8.4 | 8.3 | 8.6 | 9.1 | 10.4 |
| Minnesota | 5.3 | 5.2 | 5.3 | 4.9 | 5 | 5.3 | 5.6 | 5.8 | 5.7 | 5.3 | 6 | 6.8 |
| Mississippi | 6.5 | 5.9 | 6 | 5.6 | 6.9 | 7.9 | 8.6 | 7.7 | 7.5 | 6.9 | 6.6 | 7.6 |
| Missouri | 6 | 6 | 6 | 4.9 | 5.7 | 6 | 6.5 | 6.6 | 6.2 | 6.2 | 6.5 | 7 |
| Montana | 4.3 | 4.2 | 4.4 | 3.9 | 3.7 | 4.1 | 3.5 | 3.8 | 3.8 | 4.3 | 4.9 | 5.5 |
| Nebraska | 3.6 | 3.2 | 3.3 | 3.1 | 3.1 | 3.4 | 3.6 | 3.3 | 3.2 | 3.2 | 3.5 | 3.8 |
| Nevada | 6 | 5.7 | 5.8 | 5.7 | 5.9 | 6.5 | 6.7 | 6.9 | 7.2 | 7.5 | 7.9 | 9 |
| New Hampshire | 4 | 4.3 | 4.3 | 3.9 | 3.8 | 4 | 3.8 | 4.1 | 3.9 | 3.8 | 4.1 | 4.3 |
| New Jersey | 5.1 | 5.3 | 5.1 | 4.8 | 5.2 | 5.3 | 5.8 | 5.7 | 5.6 | 5.6 | 5.8 | 6.8 |
| New Mexico | 3.2 | 3.5 | 3.7 | 3.4 | 3.7 | 4.5 | 4.6 | 4.7 | 3.8 | 4.1 | 4.1 | 4.5 |
| New York | 5.6 | 5 | 5.1 | 4.5 | 4.9 | 5.2 | 5.3 | 5.6 | 5.6 | 5.4 | 5.9 | 6.8 |
| North Carolina | 5.3 | 5.4 | 5.3 | 5.1 | 5.8 | 6.2 | 6.9 | 6.8 | 6.6 | 6.8 | 7.8 | 8.5 |
| North Dakota | 4 | 3.9 | 4 | 3.3 | 2.9 | 3.6 | 3.2 | 3.2 | 2.8 | 2.5 | 2.8 | 3.4 |
| Ohio | 6.3 | 6 | 6.1 | 5.5 | 6 | 6.7 | 7.2 | 7.1 | 6.9 | 6.8 | 7 | 7.6 |
| Oklahoma | 4.2 | 3.5 | 3.3 | 2.9 | 3.5 | 4.2 | 4 | 3.8 | 3.5 | 4.2 | 4.5 | 4.8 |
| Oregon | 6.2 | 6.3 | 6.3 | 5.5 | 5.2 | 5.4 | 5.7 | 6.2 | 5.8 | 6.7 | 7.8 | 8.8 |
| Pennsylvania | 5.5 | 5.6 | 5.3 | 4.7 | 5 | 5.3 | 5.4 | 5.8 | 5.2 | 5.4 | 5.9 | 6.4 |
| Rhode Island | 7 | 6.7 | 6.7 | 6 | 7.2 | 7.5 | 8.1 | 8.8 | 8.3 | 8.8 | 8.5 | 9.6 |
| South Carolina | 6.5 | 5.9 | 5.5 | 5.5 | 6.1 | 6.4 | 7.1 | 7.7 | 7.3 | 7.9 | 8.2 | 9.3 |
| South Dakota | 3.2 | 3.1 | 3 | 2.6 | 2.8 | 2.7 | 2.8 | 3.1 | 2.8 | 2.8 | 3.2 | 3.9 |
| Tennessee | 5.4 | 5.8 | 5.8 | 5.1 | 5.9 | 6.8 | 7 | 6.6 | 6.9 | 6.7 | 6.9 | 7.6 |
| Texas | 4.6 | 4.3 | 4.2 | 3.9 | 4.3 | 4.8 | 5 | 5.1 | 5.2 | 5.4 | 5.6 | 5.7 |
| Utah | 3.3 | 3.3 | 3.5 | 3 | 3 | 3.5 | 3.6 | 3.8 | 3.3 | 3.3 | 3.5 | 4 |
| Vermont | 5 | 5 | 5.3 | 5 | 4.6 | 4.7 | 4.5 | 4.2 | 4.9 | 4.6 | 5.4 | 6 |
| Virginia | 3.8 | 3.8 | 3.9 | 3.3 | 3.8 | 4.2 | 4.5 | 4.6 | 4.2 | 4.2 | 4.6 | 5.2 |
| Washington | 5.2 | 5.3 | 5.2 | 4.6 | 5.1 | 5.4 | 5.4 | 5.7 | 5.2 | 5.7 | 6.3 | 7.1 |
| West Virginia | 5.3 | 5.7 | 5.3 | 5.1 | 5.1 | 5.5 | 4.2 | 3.8 | 3.7 | 3.9 | 4.1 | 4.4 |
| Wisconsin | 5.5 | 5.8 | 5.6 | 4.4 | 4.2 | 4.9 | 4.8 | 4.7 | 4.4 | 4.4 | 5.3 | 5.8 |
| Wyoming | 3.8 | 3.4 | 3.8 | 2.7 | 2.9 | 3 | 3 | 3.3 | 2.7 | 2.7 | 3 | 3.5 |
Many Eyes asks if it is correctly interpreting the data; it should be. Add a source (Bureau of Labor Statistics), tags and description, then click the “create” button. After the dataset is saved, click on the blue “visualize” button under the table.
- This time, let’s create a U.S. map: Select USA under country maps. This graphic will show unemployment rates for each state by each month.
- Since you want the colors to remain consistent (the darkest icky brown color is always 8 and higher), check the “align map scales” box.
- Further modify the graphic: You can show the entire state colored in (the default), or represent each rate by bubbles (the larger the bubble, the higher the rate). You can set the zoom to a specific state, or to show the entire country. You can set the default month where the graphic will open. You can show one map, or multiple maps when the graphic opens. All of these options are in the toolbar above the graphic.
- When the graphic is set the way you want, give it a title, add tags and a description and publish it.
Tomorrow: Playing with text
2009
21
Apr
- Posted by Erica Smith at 12:40 pm / Permalink for this post
- Filed under: , interactive graphic, Many Eyes, tutorial
- RSS comments feed for this post
[...] gemland.net put an intriguing blog post on Create interactive graphics with Many EyesHere’s a quick excerptMontana 4.3 4.2 4.4 3.9 3.7 4.1 3.5 3.8 3.8 4.3 4.9 5.5. Nebraska 3.6 3.2 3.3 3.1 3.1 3.4 3.6 3.3 3.2 3.2 3.5 3.8. Nevada 6 5.7 5.8 5.7 5.9 6.5… [...]
[...] Erica Smith added an interesting post today on graphic designr » Create interactive graphics with Many EyesHere’s a small readingMontana, 4.3, 4.2, 4.4, 3.9, 3.7, 4.1, 3.5, 3.8, 3.8, 4.3, 4.9, 5.5. Nebraska, 3.6, 3.2, 3.3, 3.1, 3.1, 3.4, 3.6, 3.3, 3.2, 3.2, 3.5, 3.8 … This time, let’s create a U.S. map: Select USA under country maps. This graphic will show unemployment rates for each state by each month. Since you want the colors to remain consistent (the darkest icky brown color is always 8 and higher), check the “align map scales” box. Further modify the graphic: You can show the entire state … [...]
[...] bookmarks tagged graphics graphic designr » Create interactive graphics wit… saved by 2 others menphes bookmarked on 04/23/09 | [...]