On March 18, Dan Meth created a U.S. sitcom map. (That followed his popular New York map of sitcoms.) On April 2, Flowing Data issued a challenge to improve the U.S. map.

Today I finished this interactive map of sitcom locations. (And by finished, I mean someone already mentioned two more sitcoms that should be added.) This map is also posted on STLtoday.com, where there is a density map and a list of unmappable sitcoms. That’s right — I know you’re going to ask about “The Simpsons” and “Leave it to Beaver.” Information for each sitcom includes an address (or at least a city), its original run dates and network, and its cast, which links to Internet Movie Database. When available, videos are also embedded. (When Hulu adds ABC shows, the quality and quantity of ABC embeds will improve.)

The most difficult part of the project was tracking down locations for each sitcom. Wikipedia and fan sites were quite helpful. (If you see a location that is off, let me know.) My own sitcom knowledge came in handy, although growing up without a TV did put me at a disadvantage. Meth’s map included select TV shows; I included all of the sitcoms that I could find that had aired for at least two seasons.

When you get a chance, take a look at Meth’s sitcom livingroom vs. kitchen chart, and his new Beach Boys Venn diagram.

The next few days are going to be devoted to timelines. Up first: Timetoast.

Timetoast is easy to use:
• Log in (or create an account) and click on the “create a new timeline” link. Give it a title and add an image from your desktop, if you have one. You can create any kind of timeline; to learn the program, try using your résumé.
• Under the timeline is a button to “add an event.” Each event must have a title and a date. Add a description and, if you have one, an image. Above the description box is a little chain-link icon: Click on it to add a link to a story or website. You also can use HTML in the description.
• Timetoast saves events as you add them. It also keeps your timeline in draft mode until you publish it. To preview your timeline, click the “view timeline” link under the timeline. If you’re ready to publish it, there’s a link under the timeline, or go to “your timelines” (at the top of the page) and publish the timeline.
• To add the timeline to your blog or story, view the published timeline and click on the “embed/share” link under the timeline. Copy the embed code, click the HTML tab in your blog and paste it there or in your story.

Timetoast has it’s quirks.

On the plus side, it’s easy to use, and timelines (and photos) look fantastic. (Click on one of the events with a photo in the timeline above to see what I’m talking about.)

On the negative side, dates are formatted a bit strange (following the European format of date month year, but with an unnecessary comma after the month); videos are not allowed; and events do not have scrollbars, so if you have a lot to say, it could be cut off when the timeline is embedded. You can adjust the width of your embedded timeline: Change the numbers after “width” in the embed code. (It’s in there twice; both numbers should be the same.)

I’ve also run in to a few problems trying to create a new timeline from an established account — I just sent a note to the creator of Timetoast to try to figure out why, and I’ll let you know what he recommends. (If you run into the same problem, try creating a new account. I’ve had success with that, although it’s not the most efficient solution.)

Today, let’s play with text. A picture is worth 1,000 words, right? So a picture of words must be worth so much more!

Wordle

Wordle is probably my favorite way to look what someone is saying — or how many times they said it. There is no log-in at Wordle — simply hit “create” and decide what kind of word cloud you want to make: Either from text, from an RSS feed or from Delicous tags.

Let’s start with text: President Abraham Lincoln’s 1861 inaugural address. Copy the text (follow that link), paste it into Wordle and hit “go.”

Wordle will find the 150 words repeated the most often; it ignores common words, like “and,” “the,” “an,” and “for,” and numbers unless you tell it otherwise (under the language menu). The larger the word, the more times it was repeated. In Lincoln’s speech, “constitution” was repeated the most — look at “show word counts” under language to see just how many times it was used. If you want two words to show up together — “United” and “States,” for example — put a hyphen between the words, or the HTML code for a non-breaking space:  

You can adjust appearance of your word cloud: Change the font under the font menu; change the layout (including whether the word cloud is horizontal, vertical or anything-goes) under the layout menu; change the color under the color menu.

You can save your word cloud: There’s a “save to public gallery” link on the right below the cloud. (”Public,” of course, means anyone can see it.) If you want to publish your word cloud somewhere else, take a screen capture of it. (You do not have to save the word cloud to screen-grab it.) Open the word cloud in a new window (there’s a button) and make the window the full size of your screen. On a PC, use the print screen button and paste the image into Photoshop or Paint or one of the free photo editing applications; ona Mac, use the Grab application or command-shift-3. Use HTML (the image tag) to add the image to your blog or webpage.

You can also create a word cloud from an RSS feed. RSS, or really simple syndication, is a way to deliver web content that frequently changes — a blog, for example. Look for “RSS” or “subscribe” or the RSS logo, which is often orange. (The logo on this blog is blue, and can be found at the top and bottom of any page.) Create a word cloud from the RSS feed of the White House Press Office.

OK, go ahead and ask: They’re fun, but what would you ever really use a word cloud for? Well, if nothing else it does show a focus. Go ahead — throw the text from your résumé in Wordle; it might surprise you. A few months ago, I used Wordle to compare presidential inaugural addresses. (Look at two war-time presidents to see how language changed: Lincoln’s 1865 speech and George W. Bush’s 2005 speech, for example.)

Many Eyes

First, you might have noticed that Many Eyes lets you create Wordle clouds too. Yep, it’s true. But there are many more fonts and options at the Wordle site. Many Eyes offers other great text visualization tools though, including the word tree and phrase net.

Log in to Many Eyes and create a data set, or use an existing data set. (I’ve already saved Lincoln’s 1861 speech.) Visualize the speech as a word tree, which shows the branching relationship between words. Give Many Eyes a word to start with (from Wordle I already know that “constitution” appears many times) and hit return. Save and publish the graphic, just like yesterday’s Many Eyes tutorial.

Follow the same steps to create a phrase net, which shows how words and phrases relate to each other.

Tomorrow we’ll dive into one of my favorite visualizations, timelines.

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:

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

Before jumping into Many Eyes, another way to quickly create graphics, I need to back up a step. When creating a graphic, the type of graphic will be determined by the information you want to show. Extreme Presentation has a chart, of all things, on how to decide which graphic will work best:

Coming Tuesday: Creating interactive graphics with Many Eyes.

Today, we’re going to create interactive graphics using the same unemployment rate information we used with Tableizer.

If you haven’t already done so, create a Google Docs account. You do not have to have a GMail account to use Google Docs — you can use your work e-mail address or a Hotmail account or a Yahoo account or any other.

With Google Docs, you can create documents, spreadsheets and presentations, and upload files that have been saved in Microsoft Word or Excel, or Open Office. Google Docs also offers a few functions that those other programs do not, and lets you share with others so more than one person can add to or edit a file.

After logging in, create a new spreadsheet. Copy this table (start with “year”, highlight the rest of the table and copy the data — ctrl-C on a PC or command-C on Apple) and paste it into your new spreadsheet.

Save and name the spreadsheet: Click the “save” button above the blue toolbar on the right.

First, let’s create a chart. Fair warning: These are not the most beautiful charts you’ve ever seen.

(See what I mean?)

Here’s how to create it:
• In the toolbar, click on Insert > Chart. A new window will open with several different types of charts.
• With this information, a line chart works best. Click on “lines” and select the subtype you like best.
• To include all of the data, change “What data?” to A1:M12. A1 represents the first cell (column A, row 1) and M12 represents the last cell (column M, row 12). The colon establishes that you want the range from A1 to M12.
• In this spreadsheet, row 1 describes the information in each column; mark the “Use row 1 as labels” box. Column A describes the information in each row; mark the “Use column A as labels” box.
• You can add a chart title and description for the axes: The horizontal axis would be the months, and the vertical axis would be the rate.
• Save the chart — there’s a button under the preview.
• The chart will be saved on top of your spreadsheet. I like to move them to a new page so I can continue to edit the spreadsheet if needed. Click on the chart, and it will be outlined by a gray box with the word “Chart” and an arrow in the top left corner. Click on that arrow; the last option is “Move to own sheet.” After it is moved, there will be a series of gray buttons above the chart. Use those buttons to edit the chart, publish it or to save the image.
• To publish the chart in a blog or story, click on the “publish chart” button. A new window will open with an embed code — in this case, it is nothing more than an HTML image tag. The charts are rather large and bulky — if you would rather use a smaller version, save the image (the button next to the “publish chart” button) and resize it. You can then upload the image to your site and write the HTML to add it to your blog or story.

Gadgets

That works for a flat, non-interactive chart. But Google Spreadsheets can do better with gadgets. The great thing about gadgets: They’re interactive. The not-so-great thing: They’re picky, and usually require spreadsheets to be formatted in a specific way. We’re going to create two gadgets: The first will be an interactive version of the chart above; the second will be much more fun and will show how that unemployment rate has changed over time.

To make the first gadget, the table needs to be rearranged a bit — basically, each row needs to be a column. Lucky for you, I was bored on a Sunday night: Copy this table and paste it into a new sheet in your spreadsheet. (To add a sheet, click on the “add sheet” button under the spreadsheet.)

Let’s build the first gadget:

• In the toolbar, click on Insert > Gadget. A new window will open, allowing you to pick the kind of gadget you want to create. For this one, click on the “charts” link on the left; on the left, under the line chart, click the “Add to spreadsheet” button.
• In the new window, change the range to A1:K13. Change the number of header rows to 1. Click “apply.” The gadget should look very similar to the chart, but when you click on the points, the year and unemployment rate will show up in an information bubble. Add a title and axes labels as you want, then click “apply and close.”
• To add the gadget to your blog or website, click on the arrow on the right side of the gray bar above the gadget. Click on the publish link. Copy the embed code and paste it in your site. If the gadget is too big, you can change it: The last numbers of the embed code are the height and width. It just takes a little bit of math to keep the gadget proportional.

That’s a nice graphic, but not as useful as it could be. So let’s rearrange the information again, and create a new gadget. This time, I assigned a date to go with each number. The gadget requires a specific date, so instead of “January 2005,” I used “Jan. 1, 2005.” (Google changes the format to 1/1/05.) It’s a funny-looking table, I know.

Creating this gadget is very similar to the previous gadget. In the toolbar, click on Insert > Gadget. Click on the “charts” link on the left; on the left, add the “Interactive Time Series Chart.” Change the range to A1:B124. You should get an interactive gadget like this:

Tomorrow: Building interactive graphics with Many Eyes.

Must-reads

• Mashable: Social networking news; there’s something for everyone. (Case in point: 10 must-try social media sites for college students and more than you could ever want to know about CNN, Ashton Kutcher and Oprah on Twitter.)
• Smashing Magazine: Information for web designers and developers. Also a great place to look for free blog themes.
• 10,000 Words: If a picture is worth 1,000 words, an interactive story is worth 10,000. This is a great source for tutorials and analysis.
• Tools for News: Information and links to all sorts of multimedia tools.

Social networking and bookmarking

• Facebook: Who isn’t on Facebook these days? Join networks by city, school, employer, and interact with other users.
• MySpace: People still use MySpace, right? (Actually, women are still more likely to use MySpace than Facebook, but Facebook is more popular overall. Who knew.)
• Twitter: Micro-blogging; network, 140 characters at a time
• LinkedIn: Business-oriented social networking site
• Ning: Create your own social network. Wired Journalists, Visual Editors and News Page Designer are all created on this system. (So is Tiara Talk!)
• FriendFeed: More of an aggregator than a network. FriendFeed brings together your updates from social networking sites and blogs and just about any other feed, and also allows interaction.
• Delicious: Store and share stories and content from anywhere on the Web
• Digg: Share stories from anywhere on the Web
• Stumble Upon: Rate stories, videos, etc., from anywhere on the Web

RSS aggregators

• Google Reader: Subscribe to and read blogs and news content
• Bloglines: Subscribe to and read blogs and news content

Blog platform

• WordPress: My favorite blog publishing system. Customizable in design and function, and easy to use. (This blog is built on WordPress.)
• Tumblr: Post text, images, video, links and quotes. (Story of Man is built on Tumblr.)
• Blogger: Google’s blogging platform. The design is customizable, but isn’t quite as versatile as WordPress.

Web editors

• Komodo Edit: Supports nearly any dynamic language you can think of: JavaScript, XML, Perl, PHP, Python, Ruby and, of course, HTML.
• Crimson Editor: HTML editor for Windows. A new version should soon be released as Emerald Editor.
• KompoZer: This HTML editor (Apple or Windows) includes a built-in HTML validator.

Video

• Mogulus and UStream: Live-stream from a computer; embed the player anywhere.
• Qik: Live-stream from a video-enabled cell phone
• 12seconds: Twitter for video; limited to 12 seconds

Photo editing

• Picnik: Correct photos, add effects, special effects and add type.
• Photoshop Express: Many of the same features of Photoshop, plus 2 GB storage.
• GIMP: Correct photos or create images

Photo storage/sharing

• Flickr: Save, organize and share photos and videos
• Picasa: Save, organize and share photos
• Twitpic: Share photos via Twitter. (A witness to the Hudson River plane crash in January took a photo of the plane on his iPhone and shared it via Twitpic.)

Timelines

• Timetoast: Sleek, easy to use Flash-based timeline. Projects can include photos and links, but no video. The system can be a bit quirky sometimes.
• Dipity: Timelines can include photos, videos, links and mapped locations. Create timelines from your own information, from a web search or an RSS feed. Only the first three timelines are free.
• Lifeblob: Does not arrange time spatially, but can include photos, videos, links and mapped locations.
• Capzles: Photo-based timelines.

Slideshow

• VuVox: Combine photos, videos and audio.
• Soundslides: Photos and audo. Not free; but there’s a free trial, and it’s relatively cheap.

Graphics

• Tableizer: Convert a spreadsheet to an HTML table. (Tutorial)
• Many Eyes: Upload information and create graphics. (The New York Times Visualization Lab uses Many Eyes.)
• Wordle: Create word clouds from text or an RSS feed.
• Google Docs: Create interactive graphics from spreadsheets.
• Swivel: Create graphics

Maps

• Google’s My Maps: Create basic embeddable maps with points, lines and shapes. (Example: How will you die: Knox County deaths)
• ZeeMaps: Users contribute to embedded Google maps. Either carefully monitor what people are adding, or include a warning that information comes from other users. (Examples: Best St. Louis sledding hills and Where’s George Clooney?)
• FM Atlas: Create embeddable Google maps from a csv file. (Places Google ads on the map.)
• UMapper: Create embeddable Flash-based Google or Yahoo maps.
• Map wizard: Create a Google map from a spreadsheet. (Requires addresses to be geocoded.)

Geocode

• Geocoder US: Find the latitude and longitude for a U.S. address
• Geocode: Find the latitude and longitude for a U.S. or international address
• Batch geocode: Find the latitude and longitude for addresses in a spreadsheet

Misc.

• Cover it Live: Sleek, easy-to-use way to live-blog.
• Media Convert: Pretty much what it says.
• Color Scheme Designer: Find the perfect colors for your website.
• Super Screenshot: Take a screenshot of an entire webpage, not just what’s visible in your browser
• Photosynth: Requires a lot of photos and isn’t available on non-Intel-based Macs, but very cool. (Example: T-Rex Sue)

Coming tomorrow: A tutorial on creating interactive graphics.

HTML does not recognize tabs or more than one space, so no matter how you try to create columns by adding spaces between words or numbers, it just doesn’t work. Instead, you need to create a table.

The Bureau of Labor Statistics has a chart of unemployment rates for the last 10 years. But if you copy that information to add it to your blog or story, you get this:

Year January February March April May June July August September October November December
1999 4.3 4.4 4.2 4.3 4.2 4.3 4.3 4.2 4.2 4.1 4.1 4
2000 4 4.1 4 3.8 4 4 4 4.1 3.9 3.9 3.9 3.9
2001 4.2 4.2 4.3 4.4 4.3 4.5 4.6 4.9 5 5.3 5.5 5.7
2002 5.7 5.7 5.7 5.9 5.8 5.8 5.8 5.7 5.7 5.7 5.9 6
2003 5.8 5.9 5.9 6 6.1 6.3 6.2 6.1 6.1 6 5.8 5.7
2004 5.7 5.6 5.8 5.6 5.6 5.6 5.5 5.4 5.4 5.5 5.4 5.4
2005 5.2 5.4 5.2 5.2 5.1 5.1 5 4.9 5 5 5 4.8
2006 4.7 4.8 4.7 4.7 4.7 4.6 4.7 4.7 4.5 4.4 4.5 4.4
2007 4.6 4.5 4.4 4.5 4.5 4.6 4.7 4.7 4.7 4.8 4.7 4.9
2008 4.9 4.8 5.1 5 5.5 5.6 5.8 6.2 6.2 6.6 6.8 7.2
2009 7.6 8.1 8.5

Yuck.

To convert that information to HTML and make it readable again, you would create a table, which would require these tags:
<table> Creates a table
<tr> Identifies a row in the table
<th> Identifies a header in the table
<td> Identifies data (or a cell) in a table

Writing that HTML table would look like this:
<table><tr><th>Year</th> <th>January</th> <th>February</th> <th>March</th> <th>April</th> <th>May</th> <th>June</th> <th>July</th> <th>August</th> <th>September</th> <th>October</th> <th>November</th> <th>December</th></tr>
<tr><td>1999</td> <td>4.3</td> <td>4.4</td> <td>4.2</td> <td>4.3</td> <td>4.2</td> <td>4.3</td> <td>4.3</td> <td>4.2</td> <td>4.2</td> <td>4.1</td> <td>4.1</td> <td>4</td></tr>

Good grief, I’m exhausted and I only created two rows. Luckily, there’s an easier way.

Danny Sanchez created Tableizer, a brilliant, quick way to convert a spreadsheet into an HTML table.

Those unemployment rate numbers are already saved as a spreadsheet. (To create your own, go back to the BLS site, highlight and copy the information and paste it into a spreadsheet.) To make that spreadsheet an HTML table:
• Click on the first cell (A1), hold the shift key and click on the last cell that you want to copy (M12). Copy those cells (command-C on a Mac or control-C on a PC).
• Paste that information (command-V or control-V) into the Tableizer. Adjust the font, font size and color behind the header (first) row.
• Click the “Tableize It!” button and preview your shiny new table.
• If you like the preview, copy the HTML code provided. Click the HTML tab in your blog and paste it there, or paste it in a story. If you don’t like it, try again.

In just a couple of minutes, that same table now looks like this:

Go ahead — make up your own spreadsheet, copy the cells and throw it into Tableizer to transform it into an HTML table.

HTML, or hyper-text markup language, is not a programming language. It uses tags to create web pages. The tags are surrounded by brackets: < and >. Most tags work in pairs, with an opening tag (like <strong>) and a closing tag (the matching closing tag would be </strong>). Browsers read and interpret the tags, but do not display the keywords within the brackets. Tags can be nested and follow a “last in, first out” philosophy.

Every HTML document starts by declaring that, hey, it’s an HTML document: <html>. That is followed by <head>, which can include scripts, meta information and where to find style sheets. The <body> defines everything you see on a web page — that’s where you can add text and links and images. So all of that means an “empty” HTML document looks like this:

<html>
   <head>

   </head>
   <body>

   </body>
</html>

If you copy that, save it as an HTML document (with either an .htm or .html extension), and open it in a browser, you would see a blank page. Now type your name after the <body> tag and save it. Open it in the browser again and you’ll see your name (or whatever you typed).

OK, don’t give up — I swear HTML isn’t really that tricky and we’re about to get to the fun stuff. Most blog and content management systems allow you to create links, modify text or add images easily. But not all, and there are still some places where HTML knowledge comes in handy. (We’ll get to a couple of those in upcoming tutorials.)

If you want to use or play with HTML, try one of these free HTML editors:
• Komodo Edit
• Kompozer
• Crimson (Windows)
• Coffee Cup (Mac)

(If you already have an Adobe Suite, you might have Dreamweaver or GoLive. Those, of course, aren’t free. For what it’s worth, I have Dreamweaver, but it’s such a memory-hog that I usually use Komodo.)

Change the appearance of text

What it looks like: Add a return
to text
How to do it: <br/>

What it looks like: Bold text
How to do it: <strong>Text that will be bold</strong>

What it looks like: Italic text
How to do it: <em>Text that will be italic</em>

What it looks like: Strikethrough text
How to do it: <del>Text that will have a line through it</del>

What it looks like: Small text
How to do it: <small>Text that will be small</small>

What it looks like: Big text (This is different from headlines.)
How to do it: <big>Text that will be big</big>

Create links

What it looks like: Link to another site or web page
How to do it: <a href="URL">Text that will be a link</a>
The URL must include http://

What it looks like: Open a link in new window
How to do it: <a href="URL" target="_blank">Text that will be a link</a>

What it looks like: Link to an e-mail address
How to do it: <a href="mailto:E-MAIL ADDRESS">Text that will be a link</a>

What it looks like: Link to an e-mail address with a preset subject line
How to do it: <a href="mailto:E-MAIL ADDRESS?subject=SUBJECT">Text that will be a link</a>
To make sure your subject line displays appropriately, use %20 instead of spaces between words in the subject line.

What it looks like: Make part of your link bold
How to do it: <a href="URL">Text that will be a link <strong>Text that will be bold</strong></a>
How to do it: <a href="URL">Text that will be a link <strong>Text that will be bold</strong> More of the link that isn't bold</a>

Add images

Images must be hosted somewhere online — either on your web server or a photo-share site such as Flickr or Picasa. If you link to a photo on your desktop, no one else will be able to see it.

What it looks like:

How to do it: <img src="IMAGE FILENAME" alt="DESCRIPTION OF IMAGE" />

You can make your image a link by combining the image with a link. What it looks like:

How to do it: <a href="URL"><img src="IMAGE FILENAME" alt="DESCRIPTION" /></a>

Learn more

To learn more about HTML, download this HTML help sheet from Liquidcity, visit W3 Schools or ask in the comments.

h/t @gabehartwig