Note: This is my first entry for Lee Enterprises’ data journalism blog. Reporters at Lee newspapers can read the blog by clicking here.

As computer users, we have grown accustomed to what is known as the graphical user interface (GUI). What’s GUI, you ask? Here are a few examples: When you drag and drop a text document into the trash, that’s GUI in action. Or when you create a shortcut on your desktop, that’s GUI in action. Or how about simply navigating from one folder to the next? You guessed it: that’s GUI in action.

GUI, basically, is the process of interacting with images (most notably icons on computers) to get things done on electronic devices. It’s easy and we all do it all the time. But there is another way to accomplish many tasks on a computer: using text-based commands. Welcome to the command line.

So where do you enter these text-based commands and accomplish these tasks? There is a nifty little program called the Terminal on your computer that does the work. If you’ve never opened up your computer’s Terminal, now would be a good time. On my Mac, it’s located in the Applications > Utilities folder.

A scary black box will open up. Trust me, I know: I was scared of it just a few months ago. But I promise there are compelling reasons for journalists to learn the basics of the command line. Here are a few:

1. Several programs created by journalists for journalists require the command line.

Two of my favorite tools out there for journalists come from ProPublica: TimelineSetter and TableSetter.

The first makes it easy to create timelines. We’ve made a few at the Courier. The second makes easily searchable tables out of spreadsheets (more specifically, CSV files), which we’ve also used at the Courier. But to create the timelines and tables, you’ll need to run very basic commands in your Terminal.

It’s worth noting the LA Times also has its own version of TableSetter called TableStacker that offers more customizations. We used it recently to break down candidates running in our local elections. Again, these tables are created after running a simple command.

The New York Times has a host of useful tools for journalists. Some, like Fech, require the command line to run. Fech can help journalists extract data from the Federal Election Commission to show who is spending money on whom in the current presidential campaign cycle.

2. Other programs/tools that journalists can use:

Let’s say you want to pull a bunch of information from a website to use in a story or visualization, but copy and pasting the text is not only tedious but very time consuming.

Why not just scrape the data using a program made in a language like Python or Ruby and put it in a spreadsheet or Word document? After all, computers are great at performing tedious tasks in just a few minutes.

One of my favorite web scraping walkthroughs comes from BuzzData. It shows how to pull water usage rates for every ward in Toronto and can easily be applied to other scenarios (I used it to pull precinct information from the Iowa GOP website). The best way to run this program and scrape the data is to run it through your command line.

Another great walkthrough on data scraping is this one from ProPublica’s Dan Nguyen. Instead of using the Python programming language, like the one above, it uses Ruby. But the goal remains the same: making data manageable for both journalists and readers.

A neat mapping service that is gaining popularity at news organizations is TileMill. Here are a few examples to help get you motivated.

One of the best places to start with TileMill is this walkthrough from the application team at the Chicago Tribune. But beware: you’ll need to know the command line before you start (trust me, I learned the hard way).

3. You’ll impress your friends because the command line kind of looks like the Matrix

And who doesn’t want that?

Okay I’m sort of interested…How do I learn?

I can’t tell people enough how much these two command line tutorials from PeepCode helped me. I should note that each costs $12 but are well worth it, in my opinion.

Also, there is this basic tutorial from HypeXR that will help. And these shortcuts from LifeHacker are also great.

Otherwise, a quick Google or YouTube search will turn up thousands of results. A lot of programmers use the command line and, fortunately, many are willing to help teach others.

A month ago, I blogged about an attempt I made to use a new feature from Google Fusion Tables that allowed map makers to customize their maps based on mouse overs. The idea for users was you could rollover a point/state/census tract/whatever on a map and some some sort of data would pop up on that map. You also customize it so the polygon changes colors, polygon borders grow in size or whatever option you decide to use to let the reader know they have rolled over a particular object. I used it on a recent map of poverty rates in Iowa. The result worked but mouseover events seem delayed and clunky. Not so user friendly, especially if you have a slow Internet connection. So I looked for a new option.

What I found was this great library from NY Time’s Albert Sun for polygons and rollover effects. Granted, this takes much longer to put together. But the result is much smoother and user friendly IMO. I used it on a recent map of heroin rates in the U.S.

Here’s brief synopsis on how I put it together:

1. First I grabbed data from the Substance Abuse and Mental Health
Data Archive on reported heroin cases at substance abuse centers broken down by state. I then grabbed a shapefile from the U.S. Census bureau of each state in the U.S. This is the file that maps each state based on its boundaries.

2. The data related to drug cases from the SAMHDA was sorted by state and year. You can download individual spreadsheets of data for years 2009 and before. I downloaded spreadsheets for 2005 through 2009. I then pulled out the information I needed from each one and merged them, ending up with a final spreadsheet that had the following data for each state dating back to 2005: number people in who were admitted to a substance abuse treatment center for heroin, number of people who were admitted to a substance abuse treatment center for any drug and the percentage of people who were heroin users.

3. I first uploaded that final spreadsheet to Google Fusion Tables. I then uploaded the shapefile I downloaded into Google Fusion Tables using the AWESOME Shpescape tool. Important: Make sure you select “Create a Simplified Geometry column” under advanced options before you import the shapefile, otherwise it will be too big. Finally I merged the shapefile with the spreadsheet and ended up with this final table.

4. I exported that table into a KML (If you click Vizualize > Map, you’ll see the option to download a KML file) and converted that to a GeoJSON file using this Ogre web client. I only did this because the KML wasn’t working on Internet Explorer. Anyways, converting it into a GeoJSON file was a TOTAL PAIN IN THE ASS that required me to mess with the GeoJSON file much more than I wanted. Finally, I ended up with this GeoJSON File.

5. Now for the code. My final script is here. I’m not going to run through it all but will point out a few lines of note:

• Line 179 brings in the JSON file. Underneath it are polygon highlighting options based on Albert Sun’s code. I have it set up so the opacity on the state polygons is light enough to see the state names underneath it when you first pull up the map. When you rollover a state, the polygons gets shaded in all the way and you can’t read the text underneath it (on the Google Map). But if you click a polygon, you can once again see the text. I also have a red border pop up when you rollover a state (strokeColor and strokeWeight).
• Line 207 is the highlightCallback function. This creates a variable for each of line of data: number of heroin users, number of drug users, percentage, etc. for 2005 to 2009. It’s what you see under “Figures” in the DataTable on the map when you rollover a state. I first made each line a string by adding quotes to each variable.
• Each variable is called into function selected_district (line 229). This function creates the Google DataTable via “new google.visualization.DataTable().” I’ve used this table in the past on a map for prep high school football teams. Check this past blog post for more information.
• Line 255 is a function that puts in commas for numbers in the thousands…I didn’t make it. It’s freely available online. Please take it and use it as you see fit.
• Line 107 to 154 is the legend.

Per usual, I used Colorbrewer to come up with the colors…

I’m happy with the resulting map and hope to use this polygon feature in the future. If you have any questions, feel free to leave a comment. I’d be more than happy to pass my limited amount of knowledge along to others.

All eyes were on Iowa last night as the Iowa caucuses took place. It was pretty much the longest work day I’ve ever had…By alot. Anyways, we did a ton of updating on WCFCourier.com all day and night…I wish I had a screen shot of all the photos/stories we put on the front of our website.  I did take one at about 2:30 a.m., which is shown above. It’s the site after Romney was (finally) declared the winner. The template is now being used on our Iowa caucus website.

Here’s a quick summary of our online coverage: It started with a general Iowa caucus coverage, switched over to our live coverage from the UNI-Dome (which hosted the largest caucus in the state Tuesday night) and then to the statewide race between Santorum-Romney-Paul and, finally, the grudge match between Santorum and Romney. At 1:30 a.m., the Iowa GOP announced Romney had won by eight flippin’ votes. At one point, Santorum was leading by ONE vote with ONE precinct left. What are the odds?

My schedule on caucus night went something like this:

- 9 a.m. – 2:30 p.m. –  Preparing for the day / arranging plans with reporters /posting stories, photos and other content. We had caucus stories going up all day, obviously. I also posted and helped monitor a live chat, which was shared with other Iowa newspapers and was active all day, as well as posted live video from KCRG, which played from about 7 p.m. to 12 a.m. I opted to put both the live video and the live chat on the same page, making it easier for readers to follow action at home.

- 2:30 p.m. – 2:31 p.m. – Lunch

- 2:31 p.m. – 4:30 p.m. – More preparing and posting. We also posted two maps with our coverage: one of live caucus results (which started coming in after the 7 p.m. caucus start). This map was provided by the Iowa Republican Party and is pictured to the left. You may have seen it on several news sites… Many had it or a variation of it.

The second map I made myself and featured caucus locations for all (I believe, although I haven’t counted) 1,700 caucus locations in the state of Iowa. The addresses were pulled from the Iowa GOP website, which listed every site. Basically, I wrote a Python program that scraped the data from their site and put it into a spreadsheet, pulled it into Google Fusion tables and mapped the locations based on their addresses. The Python scraper is based on this FANTASTIC walk-through by BuzzData on how to scrape data from websites. Check it out!

(NOTE: Here’s the code for the Python scraper. Here’s my Google Fusion Table.)

At about 3 p.m., we rolled over the site to feature one huge photo and story (see the screenshot at the top of this post). It was caucus night, after all,  so we had to go big.

- 4:30 p.m. – 5 p.m. – Mad dash to the UNI-Dome, where Black Hawk County was caucusing. The doors opened at 5:30 p.m. and I wanted to get there and set up before either Bachmann or Gingrich stopped by to speak.

- 5 p.m. – 10 p.m. – Posted up at the UNI-Dome. At about 5:30 p.m., we switched our main story to our Dome coverage…This was basically when our first photo and update came in. Throughout the evening, we posted small updates from the Dome and new photos. We also had three videos from the Dome.

At about 6:30 p.m., Bachmann and Gingrich spoke. I took a few photos for our live chat (which, BTW, had more than 5,000 viewers at one point!) and posted a fresh candidate Dome story when it came in.

At about 8:30 p.m., the Dome action was winding down and our attention turned to the statewide race between Santorum-Romney-Paul and then Santorum-Romney. We relied on the AP our Lee Des Moines bureau for our main story on the site, adding photos from the Dome and the wire with it.

- 10 p.m. – 10:30 p.m. – Mad dash back to the newsroom. I was actually afraid they might announce the winner while I was on the road back to the newsroom but I was off by about three hours.

- 10:30 p.m. – 12:30 a.m. – We waited. And waited. And made some jokes. And waited some more. The precinct results continued to flood in and amazingly the number of votes between Romney and Santorum dwindled. Santorum was actually in the lead for much of the night. By 16 votes. Then one vote. Then four votes. Just ridiculous.

- 12:30 a.m. – 1:30 a.m. – At about this time, they announced they were down to three precincts then one precinct…At that point, I knew I would be in the newsroom until the final precinct was counted. The lone holdout was in Clinton County (eastern Iowa along the river) and apparently there was some confusion about whether or not they had submitted their results to the state yet.

- 1:30 a.m. – 2 a.m. – The Iowa GOP finally announces Romney won by eight (!!!) votes. Hurray! I slapped a quick update on top of story we had online and added a new photo. At this point, I just wanted to make sure those who got up in the morning would see the final results.

- 2 a.m. – 3 a.m. – The longest day ever came to a close. I took down the big photo, big story template we had used all night (see screenshot at the top) and returned the site back to our standard carousel template with five rotating stories on the front (see WCFCourier.com). I also added a teaser to our Iowa caucus site on the top so people see all of our caucus coverage from the night/morning. Because there was a ton of it.

- 3 a.m. – Sleep

Here’s what the Courier’s front page looked like on Wednesday. We’re a morning paper so we were able to get the final results in:

It sounds great so I tried it out over the weekend with this map on poverty rates in Iowa. The map is broken into Census tracts and when a reader hovers over a polygon, poverty data about that particular tract pops up. I also set it so the polygon changes colors on a mouse rollover.

It didn’t turn out too bad. But I feel the polygon color changes take a while to load and frankly doesn’t feel that slick. There are plenty of other options for messing with polygons (I’ve heard the Raphael Javascript library works great and Albert Sun with the NY Times has a great library for polygon effects) but nothing I’ve seen is as simple and as quick to turn around as this workable solution… Overall, there seems to be a ton of promise here, especially for us in the news business who are trying to turn around maps on deadline.

Anyways, anybody who wants to build off this map should check out the code. And I’d love to hear any suggestions on how to improve on it.

I did make a couple of minor tweaks, which may be helpful for others so I will outline them here.

My initial, final product looked like this. Go ahead and roll over the bars like the blue one, for instance, which represents the amount of Hispanic people in Iowa who said they were also white. Notice how the bars in 2000 and 2010 are both the same length, even though the value of the 2000 bar (38,000) is almost half of the 2010 bar (80,000).

The data was retrieved from Census.IRE.org. I just selected “Iowa,” then “County,” then “Hispanic or Latino origin by race.” You can then download a CSV of the data and chop it up as you see fit. Also click an option after “Browse data for…” on the Census.IRE.org page for a great breakdown of what each of the headers in the CSV files means. Here’s Iowa’s page, for instance.

The Javascript file that makes these graphs calls a JSON file containing information retrieved from Census.IRE.org. My JSON file initially looked like this:

1. headers = ["White","Black / African American","American Indian / Alaska Native","Asian","Native Hawaiian / Other Pacific Islander","Some other race","Two or more races"]
2.  allCountyData = [
3. ["Iowa",38296,1109,1034,290,121,35317,6306,80438,2242,2503,497,206,54000,11658],
4. …(Enter data for every county in Iowa here)

The headers represent the different races of Hispanic people. The line for “Iowa” represents the amount of people per particular race in first 2000 and then 2010. 38296 = Number of Hispanic people in 2000 who said they were White, 1109 said they were black, etc. 80438 = Number of Hispanic people in 2010 who said they were White, 2242 said they were black, etc.

Here’s my tweak: Instead of having both 2000 and 2010 data on the same line, I broke this out onto two separate lines. So my new JSON file includes this:

1. allCountyData = [
2.   ["Iowa",38296,1109,1034,290,121,35317,6306],
3. …(Enter data for every county in Iowa here)

And this:

1. allCountyData2 = [
2.   ["Iowa",80438,2242,2503,497,206,54000,11658],
3. …(Enter data for every county in Iowa here)

From there, I needed to edit the Javascript file to call the data contained in allCountyData2. Here’s my Javascript file. Go ahead and click on it. I know you want to. And scroll down to “function changeGraph(stateText)” and notice how it is calling both selectedData, which includes the value for everything in allCountyData (in the JSON file), AND selectedData2, which contains the value for everything in allCountyData2 (in the JSON file). The “drawVisualization();” inside the function also contains two arguments now: “selectedData, selectedData2.”

As a result, the “function drawVisualization()” at the very top of the Javascript file must also contain two arguments: “newData, newData2.” Initially, my drawVisualization function (here’s my first Javascript file) contained just one argument because it was only calling newData, which contains data from allCountyData. At the very end of the function, it broke newData (allCountyData) into two because remember, allCountyData contained data for both 2000 and 2010:

1. //the first half of our data is for 2000, so we fill the row in with appropriate numbers
2. //we start at 1 to leave out the years, remember data structured this way starts at 0
3. for (var i = 1; i <=(newData.length-1)/2; ++i) {
4. data.setValue(0, i, newData[i]);
5. data.setFormattedValue(0,i, numberFormat(newData[i]));
6. }
7. //now, the second half of the data is for 2010, so we’ll fill that in
8. for (var i = 1; i<=(newData.length-1)/2; ++i) {
9. data.setValue(1, i, newData[i]);
10. data.setFormattedValue(1,i, numberFormat(newData[i+(newData.length-1)/2])); 
11. }

I needed to change that last “for” function because we no longer wanted newData to be broken in half. Instead, we want to call that second argument (newData2) in the drawVisualization function because it calls the data from allCountyData2:

1. //the first half of our data is for 2000, so we fill the row in with appropriate numbers
2. //we start at 1 to leave out the years, remember data structured this way starts at 0
3. for (var i = 1; i <=(newData.length-1); ++i) {
4. data.setValue(0, i, newData[i]);
5. data.setFormattedValue(0, i, numberFormat(newData[i]));
6. }
7. //now, the second half of the data is for 2010, so we’ll fill that in
8. for (var i = 1; i<=(newData2.length-1); ++i) {
9. data.setValue(1, i, newData2[i]);
10. data.setFormattedValue(1, i, numberFormat(newData2[i])); 
11. }

If I’m not mistaken, that’s all I did. If you are interested, my HTML file is here and my CSS file is here. Again, Michele Minkoff deserves all the credit in the world for putting together her great walkthrough. So get over there and check it out!

Here are a few maps I’ve worked on in the last couple of months:

1. City breakdown of property taxes in Iowa

- This map (shown above) includes property tax rates for every city in Iowa (900+) dating back to 2010 and color-codes them based on their rate. I won’t go into too much detail on how I went about doing it; instead, I’ll refer you to this great Poynter tutorial on how to make a heat map using Google Fusion Tables (which is what the above map is based off of). When you’re done with that, check out their more recent post on mapping data by county, cities, etc. using what is known as shapefiles (Don’t worry. I didn’t know what they were either until I read the post).

For this map, I first found tax rates for every city in Iowa on the Iowa Department of Management’s website. These rates were contained in several spreadsheets (City Tax Rates FY12, City Consolidated Tax Rates FY12, FY 11, etc.).For each spreadsheet I used (six in all: three for city tax rates dating back to 2010 and three for consolidated tax rates dating back to 2010), I basically went in and chopped out all the information in the spreadsheets I didn’t need (Example spreadsheet), which would up being most of it. I then merged the six spreadsheets by city name using Google Fusion Tables.

I then found the shapefile that maps every city in Iowa on the Census site, which contained the geographical data that Google uses when it maps out the cities. I then merged that spreadsheet with the one containing all the tax rates and pulled it into Google Fusion Tables.

Google did the heavy lifting so to speak and mapped out all the cities on the map. I then told FT to map the cities based on their tax rate. The final product is cities with higher tax rates are red; cities with lower tax rates are yellow. The legend is HTML/CSS, which I copied heavily off of the Chicago Tribune News App and their wonderful map walkthrough. When you get the hang of Fusion Tables, check it out. Their maps are much prettier than mine.

The property tax map is on my (barren) Github account. Please copy anything you find helpful.

2. 2008 Flood Buyouts

Compared to the above map, the flood buyout map was a piece of cake to make. We got a spreadsheet from the city of Cedar Falls that listed every home that was offered a buyout from the federal government and their address. Besides mapping shapefiles (like above), Google can also map simple addresses (obviously). So Google can map a spreadsheet of addresses as well.

3. Road to the Dome: A look at the prep teams in the semifinals

I think high school football is popular everywhere. The Cedar Valley is certainly no exception. In Iowa, we have six football classes based on size of the schools. Each year, the semifinals and final rounds of each class are played at the UNI Dome in Cedar Falls. This package breakdowns each of the 24 teams in the semifinals and maps them based on their school address. Readers can then click on each pointer on the map and read more about the team.

From a technical standpoint, this is the first map I’ve put together where a info box DOESN”T open up when a reader clicks on a point on the map. Instead, the information on the teams opens in a table format to the right of the map. This uses Google’s API; I borrowed heavily off of this map + chart example provided by Google. The main difference being is I called a table visualization instead of a chart visualization in the example.

The table below the map (the one where you can select a class and see the team’s playoff schedule) was borrowed heavily off this Google table example.

Here’s the table I ended up with on Google Fusion Tables. If you’re looking for the map source, go to this webpage and click view source. This is where the map is housed.

My Google-powered Javascript is pasted below for anyone who is curious:

google.load('visualization', '1', {'packages':['table']});

function initialize() { 
 var map = new google.maps.Map(document.getElementById('map_canvas'), {
 center: new google.maps.LatLng(42.3, -453.4),
 zoom: 7,
 minZoom: 5,
 maxZoom: 11,
 mapTypeControl: false,
 streetViewControl: false,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 });

 var layer = new google.maps.FusionTablesLayer({
 query: {
 select: 'mappable_address',
 from: 2102557
 },
 suppressInfoWindows: true
 });
 layer.setMap(map);

 // Add a listener to the layer that constructs a chart from
 // the data returned on click
 google.maps.event.addListener(layer, 'click', function(e) {

 var data = new google.visualization.DataTable();
 data.addColumn('string', 'About:');
 data.addColumn('string', e.row['School'].value);
 data.addRows([
 ['Class', e.row['Class'].value],
 ['Mascot', e.row['Mascot'].value],
 ['Address', e.row['Address'].value],
 ['League', e.row['League'].value],
 ['League Record', e.row['League Record'].value],
 ['Regular Season Record', e.row['Season Record'].value],
 ['Playoffs - Round 1', e.row['Round 1'].value],
 ['Playoffs - Round 2', e.row['Round 2'].value],
 ['Quarterfinals', e.row['Q-Finals'].value],
 ['Semifinals', e.row['Semifinals'].value]
 ]);

 var chart = new google.visualization.Table(document.getElementById('chart'));
 var options = {
 'title': e.row['School'].value + ' ',
 };
 chart.draw(data, options);
 });
}

function changeData(team) {
 var whereClause = "";
 if(team) {
 whereClause = " WHERE 'Class' = '" + team + "'";
 }
 var queryText = encodeURIComponent("SELECT 'School', 'Round 1', 'Round 2', 'Q-Finals', 'Semifinals' FROM 2102557" + whereClause);
 var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

 query.send(getData);
}

function getData(response) {
 var table = new google.visualization.Table(document.getElementById('visualization'));
 table.draw(response.getDataTable());
}

- TimelineSetter – I’m a big fan of timelines. They can help newspapers show passage of time, obviously, as well as keep their stories on a particular subject in one central location. This is exactly how we used ProPublica’s TimelineSetter tool when ‘Extreme Makeover: Home Edition’ announced they were going to build a new home for a local family. From the print side, we ran several stories, including about one a day during the week of the build. The photo department also put out four photo galleries on the build and a fundraiser. Finally, our videographer shot several videos. Our audience ate up our coverage, raking up more than 100,000 page views on the photo galleries alone. But unless you wanted to attach every story, gallery and video to any new story we did (which would be both cumbersome and unattractive), it would have been hard to get a full scope of our coverage. That’s were the ProPublica tool came into play. Simply, it helped compile all of our coverage of the event on one page.

I’m not going to go into detail on how I put together the timeline. Instead, I will revert you to their fantastic and easy to use documentation. Best of all, the timeline is easy to customize and upload to your site. It’s also free, unlike the popular timeline-maker Dipity. Check it out!

- TableSorter – This tool is equally as impressive and fairly easy to use. The final output is basically an easy-to-navigate-and-sort spreadsheet. And, again, the documentation is comprehensive. Run through it and you’ll have up sorted table in no time! I’ve put together two already in the last week or so.

The first is a list of farmers markets in Iowa, with links to their home page (if available) and a Google map link, which was formatted using a formula in Microsoft Excel. The formula for the first row looked like this: =CONCATENATE(“http://www.google.com/maps?q=”, ” “, B2, ” “, C2, ” “, E2, ” “, “Iowa”)

The first part is the Google Map link, obviously. B2 represented the cell with the city address; C2 = City; E2 = Zip code and finally “Iowa” so Google Maps knows where to look. In between each field I put in a space so Google can read the text and try to map it our using Google Maps (I should note that not every location was able to be mapped out). Then I just copy and pasted this for every row in the table. At this point, I had a standard XLS Excel file, which I saved as a CSV file. TableSetter uses that CSV file and formats it using a YML file to produce the final output. Go and read the docs…It’s easier than having me try to explain it all. Here’s what my CSV looked like; here’s my YML file; and finally the table, which was posted on our site.

In the same vein, I put together this table on what each state department is requesting from the government in the upcoming fiscal year.

I should also note here that the Data Desk at the LA Times has a variation of ProPublica’s TableSorter that offers more features (like embedding photos into the table, for instance). It’s called Table Stacker and works in a very similar fashion as TableSorter. I recommend checking it out after you get a feel for ProPublica’s TableSorter.

- Learning the Command Line: Both of these tools require the use of the command line using the Terminal program installed on your computer. If you are deathly afraid of that mysterious black box like I was, I highly recommend watching PeepCode’s video introduction to the command line called “Meet the Command Line.” And when your done, go ahead and jump into their second part called “Advanced Command Line.” Yes, they both cost money ($12 a piece), but there is so much information packed into each hour-long screencast, that they are both completely worth it. I was almost-instantly comfortable with the command line after watching both screencasts.

At the Courier, we are lucky to have a group of sports reporters that tweet from every high school prep game they can. Iowa high school football also have a dedicated hashtag (#iahsfb) that reporters and fans alike use every Friday night to update the world and what is going on in their game. The only problem from a readers standpoint is if you want to follow several of our local reporters and everybody across the state that uses the #iahsfb hashtag, you’ll have to open several Twitter pages to follow everything at once. Using simple Javascript, we can fix this problem. Here’s a rundown on how I use jQuery tabs (shown above) to fit all of the live coverage on one page. The final product will look like this.

1. For those unfamiliar with the jQuery UI, I suggest reading through their Documentation page to get the basics. You don’t need to know much code (I don’t) to get the feature working so don’t be intimidated. Then either download a theme or color-code your own. I worked our site’s blue into the theme before downloading a copy. You don’t need any programming skills for this and best of all, jQuery shows you on the fly what the final product will look like before you download it. Now download the files and unzip them.

2. The folder you just downloaded will include the necessary Javascript (located in the js folder) and CSS (you guessed it…in the CSS folder) for the project. It also includes an index.html page that shows you some of components you can use. Now put all of the files on the web somewhere. I put all mine in wcfcourier.com/app/special/.

3. Open up or create a new HTML page. In between the <head></head> tags, link to three files: the jQuery javascript file, the jQuery UI javascript file and the CSS file. My coding looks like this, although yours might vary slightly depending on what you downloaded:

<link type=”text/css” href=”ENTER_URL/css/custom-theme/jquery-ui-1.8.15.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”ENTER_URL/js/jquery-1.6.2.min.js“></script>
<script type=”text/javascript” src=”ENTER_URL/js/jquery-ui-1.8.15.custom.min.js“></script>

4. Calling the tabs function is just as easy. Here’s the code (from the jQuery UI site). Stick this under the code above and above the </head> tag.

<script>
$(function() {
$( “#tabs” ).tabs();
});
</script>

5. That’s all the Javascript we need to run this fairly complicated task! Now move to the body of the HTML file. Basically the tabbed links at the top of the page (in this case, the games we are covering) is an unordered list:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>

The number of tabs will vary depending on how many pages you have. In this example, our sports reporters are covering three different games plus I want a tab to link to a Twitter widget that uses the #iahsfb hashtag. So I have a total of four tabs. The text between the link tags is the text that the reader will see and click on to open each page. In this example, it’s high school games.

6. Next, we need to create four divs to be linked to. For this example, I need four Twitter widgets. The basic structure of each div is very, very simple:

<div id=”tabs-1″></div>
<div id=”tabs-2″></div>
<div id=”tabs-3″></div>
<div id=”tabs-4″></div>

Note these divs go inside the <div id=”tabs”> created above. After the final div tab (in this case number four), we want to make sure we include a </div> tag. The bare bones code looks like this:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>
<div id=”tabs-1“></div>
<div id=”tabs-2“></div>
<div id=”tabs-3“></div>
<div id=”tabs-4“></div>
</div>

7. The tabs function should be working by now. But each time you click on a tab, nothing shows up. Let’s fix that: Inside each of these four divs will be the individual Twitter widgets that will show up when a reader clicks the tab. We went ahead and made the reporters’ Twitter widgets by going to Twitter’s webpage. Twitter gives you the code to copy and paste between <div id=”tabs-4″></div> tags.

I also added a quick sentence above each Twitter widget telling the reader which game the reporter is covering. The final output for one Twitter widget looks like so:

<div id=”tabs-3″>
<p>Sports Reporter Carson Tigges (<a href=”http://twitter.com/CarsonTigges” target=”_blank”>@CarsonTigges</a>) is covering the Columbus v. North Hampton game:</p>
<br />
<p align=”center”>
<script src=”http://widgets.twimg.com/j/2/widget.js”></script>
<script>
new TWTR.Widget({
  version: 2,
  type: ‘profile’,
  interval: 6000,
  title: ‘Tweets from Carson Tigges‘,
  subject: ”,
  width: 580,
  height: 650,
  theme: {
    shell: {
      background: ‘#001952′,
      color: ‘#ffffff’
    },
    tweets: {
      background: ‘#ffffff’,
      color: ‘#444444′,
      links: ‘#1985b5′
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: ‘all’
  }
}).render().setUser(‘CarsonTigges‘).start();
</script>
</p>
</div>

Amazing and all contained with a div.

8. Basically all we need to do now is replicate that Twitter widget three more times (four total), which is really easy. Just change the bolded text for each reporter you’ll be using. Now copy and paste the new Twitter widget code in between another div tag. Do the same for the others until you have all four Twitter widgets on the page. The final code is long but far from complicated.

- I uploaded the final product so take a peak and copy any of it that is helpful.

NOTE: If you look at the final product, you will see the following code. Ignore it. This is automatically added by our CMS and shouldn’t have any use for you:

<script type=’text/javascript’ src=’http://stats.townnews.com/shared-content/stats/common/tracker.js’></script>
<script type=’text/javascript’>
<!–
 if (typeof(TNStats_Tracker) !== ‘undefined’ && typeof(TNTracker) === ‘undefined’) { TNTracker = new TNStats_Tracker(‘wcfcourier.com’); TNTracker.setTrackerDomain(‘stats.townnews.com’); TNTracker.trackPageView(); }
// –>
</script>

Here at WCFCourier.com, I’m always looking for cool, new tools that can help present our stories/data in a new way. One of my favorite new tools is DocumentCloud, a PDF viewer that allows us to present documents in a much easier and user-friendly way than how we’ve uploaded documents before.

Previously, we loaded PDF’s directly into our CMS, which basically forced readers to download the PDF to view the document. For documents that number in the hundreds of pages, that was impractical for readers. DocumentCloud not only gives readers an easy way to thumb through the pages without having to download the whole thing, it allows us to annotate specific text with the document to highlight major points. I was immediately impressed with the service and have used it to upload every document for the past several months.

Here’s some other tools I’ve used that may help you out:

• Storify: This tool has become all the rage in the techie-journo world and it’s easy to see why. Basically, the tool allows journalists to make chronological, list stories using photos, text and video from a variety of social media platforms like Facebook and Twitter. Here’s a few examples: 1. A recap of our coverage from Michele Bachmann’s big presidential announcement in Waterloo; and 2. A Cedar Falls woman who inspired thousands on Twitter.
• ScribbleLive: We recently switched from CoverItLive to ScribbleLive for our live chat needs. One thing I love about the service when compared to CIL is the lack of ads within the live chat when a reader first goes to the page. We’ve also had better luck loading in video to the chat than with CIL. Here’s an example from Saturday’s UNI football game.
• Google Charts: Who doesn’t like fancy graphs that help break down numbers and figures? Using Google Docs and Google Charts, journalists basically only need a simple spreadsheet to output graphs like pie or line charts. And, of course, Google’s API gives you plenty of options to customize them to make them look how you want.
• jQuery tabs: Anybody will a little bit of Javascript knowledge and an understanding of basic jQuery shouldn’t have any problem implementing this simple but flexible tool into their website. The jQuery UI also gives you great flexibility to style it how you want it to look when it’s all done. I now use the tabs feature to promote our sport reporters who live tweet high school prep games every Friday night.
• jQuery before/after plugin: This is a tool I definitely want to use again the future. I won’t describe it in too much detail here; instead, I point you to the one time I used it to compare ward maps in Cedar Falls. But basically this is one of the best tools to visually compare before and after photos. And it’s simple to use. I swear. Check it out.

Just like print newspaper designers play up big stories on the front page when it breaks, web editors should do the same on their dot.com front page. At the WCFCourier, we haven’t done this a ton. But we have experimented with a new template provided by Lee Enterprises that helps us give more prominence to big stories on our webpage.

Basically, the template blows up the main photo on the story to take up the entire width of the homepage (roughly 610px) and features the first few paragraphs of the story underneath. It also features a nice teaser to photos and any related content (video, other stories, etc.) next to the text. Above is what our homepage looked like last July when a large batch of area troops returned from Afghanistan. We’ve used this template on other occassions, namely when Michele Bachmann officially kicked off her presidential campaign in Waterloo and the tenth anniversary of 9/11.

I should note two other pieces of content I put together for the troops’ story:

• This Dipity timeline highlights the infantry’s deployment to Afghanistan
• On Facebook and Twitter, I asked readers to describe their feelings on the homecoming in one word. Using their responses, I put together this Wordle word cloud.