How BostonGlobe.com’s gay marriage interactive graphic came to be

Posted on December 2, 2013 by Patrick Garvin

Today is the first day that Hawaii allows same-sex marriage. The state was the 16th to approve allowing gay marriage, and becomes the 15th to begin performing them. Illinois’ state legislature approved same-sex marriage a few days before Hawaii, but that law won’t go into effect until summer of 2014.

For the last four months, I have been editing and updating this BostonGlobe.com interactive graphic about the history of same-sex marriage in the United States. In short, there’s a sticky navigation that stays with you when you scroll through the timeline, show maps and tallies that change as states allow gay marriage, ban gay marriage or allow civil unions or domestic partnerships. The timeline includes links to archived stories, copies of bills and statutes, and PDFs of past Globe front pages.

The landscape as of 1996:

As of the 2004 election:

As of today, when Hawaii becomes the 15th state to allow same-sex marriage:

This sticky bar is just part of the graphic, of course, as the timeline is what triggers the changes in colors.

—————————

HOW THIS STARTED

I conceived this project right after the Supreme Court ruled on Proposition 8 and the Defense of Marriage Act. In the days that followed, we had many stories about what impact these rulings could bring. These stories usually included maps that more or less looked like this:

Those maps can be tricky to read, because they cram five different types of states into one map:
*States allowing gay marriage
*States allowing civil unions or domestic partnerships, but not gay marriage
*States banning gay marriage by constitutional amendment
*States banning gay marriage by constitutional amendment, but allowing civil unions or domestic partnerships
*The default states, not identified, which have no constitutional reference to gay marriage

These maps are helpful to glean the overall splintering of the issue, and can be used to parse out laws state by state, but are still busier than need be. I wanted was something easier to read, and after talking with Boston Globe AME for Design Dan Zedek, I decided three separate maps would work best. But even then, I thought the map alone didn’t show how much the map has changed over time.

To truly get at the heart of the story, I thought, we needed three interactive maps that changed over time.

It was late June and I set myself an August 1 deadline. I picked that date because that’s when Rhode Island and Minnesota would begin performing same-sex marriages.

So, I set to work on a variety of tasks:
*Researching gay marriage laws and milestones, both on national and state-by-state levels
*Compiling links of past stories on the milestones, both to add to the timeline and to CQ the dates I had found
*Compiling photos from those events
*Building the framework for this responsive graphic using jQuery, JavaScript and CSS
*Testing it to see where it broke
*Refining, revising, refining and more revising

As I revised this, former Boston Globe Graphics Director Javier Zarracina was very helpful in giving me advice on tweaking the design. He was also very accommodating in giving me the time to work on this project.

—————————

HOW THIS EVOLVED

I reached the August 1 deadline.

For the Metro section of the paper that day, Boston Globe Assistant Design Director for News Robert S. Davis conceived a tease graphic that could anchor the page and promote the online graphic:

Once I launched this on August 1, I would update this whenever new developments occurred. The summer and fall of 2013 saw a bunch new developments, of course, as federal agencies and state agencies began changing policies to be inclusive of married same-sex couples. I ended up having more than 100 events on the timeline. Thus, per the suggestion of Robert Davis, I divided the news stories into “key events” and “other.” The page now loads with only the key events, but the sticky nav with the maps includes a link to click that shows all the events.

This project has spawned the most unwieldy-looking Excel file I’ve ever used:

I mean, just looking at that gives me a headache.

—————————

HOW THIS TECHNICALLY WORKS

Using Shan Carter’s great resource, Mr. Data Converter, I turned that beast of an Excel file into a JSON file. The jQuery reads that and appends a main div on the page with a div for each event, including nested divs for the headline, the text, the photos, the captions and the links.

The maps are SVG, taken from a template that Chiqui Esteban created for our department. When the timeline is scrolled through, the color and tally changes are triggered by div IDs when those IDs are near the top of the screen.

—————————

HOW I FIND STORIES FOR THE TIMELINE

The obvious ones — “Illinois to approve gay marriage,” for example — present themselves. The less obvious ones come from the AP wire, Google searches and a great app that has been invaluable in this process.

Zite functions like Google News in that you can have personalized categories for your news feed. Furthermore, it lets you give a story a “thumbs up” or “thumbs down,” like Pandora.

I check Zite throughout the day, particularly on its feed for “Same-sex marriage.” It often has things that are on my radar, but it has also allowed me to find stories that I wouldn’t have known were coming.

Gay news blogs have also been invaluable. I never source a gay news blog, but I will often follow their links to news sources that I can source: The Associated Press and other newspapers. In the same vein, Twitter has also been a good way to find stories. The #gaymarriage hashtag brings up a lot of opinions, but it has helped me find stories in other states.

—————————

WHAT’S NEXT
What’s next is that I’ll keep updating this as gay marriage news continues to happen. Naturally, you’ll need to check BostonGlobe.com to see the updates.

A look at the Boston Globe’s Boston Marathon bombing infographics

Posted on April 22, 2013 by Patrick Garvin

This past week, the graphic artists and page designers at the Boston Globe did some great work to explain what happened at the Boston Marathon and during the manhunt. I was out of town for much of the week, so I only worked on a few graphics. The great graphic work from the Globe this past week was a huge effort by colleagues James Abundis, David Butler, Robert S. Davis, Chiqui Esteban, Kevin Golden, graphics director Javier Zarracina and assistant managing editor Dan Zedek.

Here are some of the graphics produced this past week. To see larger versions, click on any images.

——

Graphics director Javier Zarracina put together this map Monday, the day of the bombings, for Tuesday’s paper. This is not pointed due north, but rather due southwest, for perspective.

——

Here’s a slightly zoomed-out view of the finish area, showing a little more detail.

——

Here’s the area that was treated as a crime scene the days after the blast:

——

For Sunday’s paper, we ran vignettes of people who had been at and near the finish line when the bombs went off. The map shows where they were, and what happened to them after the explosions. This was part of a special “Terror at the Marathon” section designed by Robert S. Davis.

There were several reporters on this, as the gang byline at the bottom shows. It took some coordination to plot who was where, and then to triple-check all of it. David Filipov and Steve Wilmsen served as the main point persons on this, and were key to producing this map.

To read the story, click here.

To see Chiqui Esteban’s interactive graphic of this map, click here.

——

For Wednesday’s paper, James Abundis put together this in-depth look inside the medical tent that was turned into a functional triage unit. Click on the image to see more. Lots of detail in this graphic.

To read the story, click here.

——

As more detail about the actual bombs emerged, James Abundis put together this graphic.

——

How the manhunt unfolded Friday:

——

As details emerged about the Tsarnaev brothers, attention turned to their journey from Kyrgyzstan to Cambridge.

——

Again, it must be said that the great graphic work from the Globe this past week was a huge effort by colleagues James Abundis, David Butler, Robert S. Davis, Chiqui Esteban, Kevin Golden, graphics director Javier Zarracina and assistant managing editor Dan Zedek.

INFOGRAPHIC: ‘Golden Girls’ to ‘Desperate Housewives’

Posted on May 15, 2012 by Patrick Garvin

Sunday’s series finale of “Desperate Housewives” provided me and my colleagues at The Boston Globe the opportunity to create a graphic showing how the show fits in with other TV shows with female foursomes. The concept was simple: “Desperate Housewives” is going away, but the archetypes that defined each character has been around on TV for a while, at least since “The Golden Girls.” And seems to continue with the new show, “Girls.”

Here’s the chart that ran on Sunday’s Arts section of The Boston Globe. Click for a larger view.

Click on the links to the BostonGlobe.com version and the Boston.com version.

––––––

HOW IT CAME TOGETHER

I had a professor who taught me several important things, but two things are important for this graphic:

Anything can inspire an information graphic, whether it be a press release or a musing you have at a coffee shop.
The characters in “Sex And The City” are perfect counterparts to the characters in “Golden Girls.”

In the years that have followed, I realized he was right. First, anything can lend itself to a graphic. I have several graphics in my portfolio that started out as conversations. I blogged last summer about a chart using the archetypes described in Joseph Campbell’s “The Hero With a Thousand Faces” to compare characters from the Harry Potter series, “Star Wars” and other franchises. It was a great blending of some of my favorite things: academic-minded critiques, pop culture and infographics.

Just as that graphic started with me talking about how Harry Potter was similar to other movies, this “Desperate Housewives” chart started with me talking with friends. I repeated my professor’s statement that the “Sex And The City” characters were very similar to the “Golden Girls” characters. When I’d tell this to people, they’d instantly see that Samantha was Blanche and that Charlotte was Rose. But what about Carrie? Was she Dorothy or Sophia? There were compelling arguments that she was Dorothy and Miranda was Sophia, but just as many people said Carrie was Sophia and Miranda was Dorothy.

Around this same time, “Desperate Housewives” premiered on ABC. I immediately watched, because it had not one but TWO “Melrose Place” alums: Marcia Cross and Doug Savant. I was hooked on this show that seemed equally inspired by “Knots Landing” drama, John Waters’ campiness and “Twin Peaks”-style darkness.

As it became apparent that this would be the last season, I came up with several graphic possibilities for the end of “Desperate Housewives.” The idea of viewing the show in a broader context seemed most appealing, because I knew that something too focused on the show wouldn’t get any play. I began to wonder how the ladies of Wisteria Lane fit in with “Golden Girls” and “Sex And The City.”

I floated the idea to a few people to test their interest. The debates were pretty good, and I realized I had a winner on my hands. I didn’t know if it would be something that the Boston Globe wanted, so I initially pitched it to Boston.com. I ended up getting several e-mails that indeed this could have a home in print and online.

FITTING IT ALL IN

The more I talked with editors, it was apparent that we could use several shows in this graphic. “Designing Women” had a similar formula, as did Betty White’s new show, “Hot In Cleveland.” “Girlfriends” and “Living Single” seemed to line up with this, as did “Noah’s Arc,” which was about four gay black men in Los Angeles. But if used shows about men, would we also use “Entourage”? It could become very unwieldy.

The solution was to run six in print. We cut “Hot In Cleveland” from the print version and instead used “Girls” as the modern show. But we kept “Hot In Cleveland” for the web versions. Michael Brodeur took my original text and punched it up, giving it some flair and humor. I had never seen “Girls,” so he helped identify which categories fit which characters.

I created two web versions, because this would live on both BostonGlobe.com and Boston.com. The sites have different palettes and styles, of course, but there’s another hitch. I had to design the BostonGlobe.com version responsively, meaning that I had to make sure it could be viewed (and readable!) on any browser, on any platform, on any screen, at any size.

You saw the chart at the top of the page. How can that be read on a mobile device?

Here’s how one of the TV shows would appear on the iPhone’s portrait view of the BostonGlobe.com version:

And here’s how a show would look in the iPhone’s landscape view, or on some tablets:

On larger screens, it appeared the way it did in print: as a full grid.

Click on the links to the BostonGlobe.com version and the Boston.com version.

Pi Alley, responsive design and 140 years of The Boston Globe

Posted on March 4, 2012 by Patrick Garvin

One hundred and forty years ago today, on March 4, 1872, The Boston Daily Globe published its first edition.

A lot has changed since that first issue: For starters, the word “Daily” has dropped from the name.

In looking back on the paper’s history and how the newspaper industry has changed, I’m reminded of one of my parts of Boston: Pi Alley. Particularly, I’m reminded of how it supposedly got its name from typesetters.

There are a few stories. According to the web site for the Pi Alley Garage:

As downtown Boston evolved from a residential to commercial area by the end of the 19th century, the name of this alley evolved from the names of local landowners to one more descriptive of the area. Many small restaurants set up shop in the alley to serve the area’s workers. A staple in many of these places was meat pies, often ordered by colorful names such as “Cat Pie” earning the alley the name “Pie Alley.”

In the days that Washington Street was home to most of the city’s newspaper printing plants, many of the printers and typesetters frequented a tavern in the alley called the “Bell in the Hand” In their haste to get refreshments, newspapermen would often drop pocketfuls of mixed up, loose type (called “pi” in the printing business) on the ground, leading to the name “Pi Alley.” Today, the alley continues the tradition of small businesses serving the people who work in the area, as well as the many tourists and visitors.

There is a sign in Pi Alley that repeats those stories almost verbatim. I took a picture one night as photographic proof for a friend who dismissed the newspaper connection as bullshit.

The newspaper is no longer downtown and thus no longer near Pi Alley, but I think of the Globe every time I walk through that neighborhood. Not that I don’t think of the Globe anyway; it’s what brought me to Boston.

It’s a news organization of which I am proud to be a part. I could list 140 reasons why, but that would read like a sloppy love letter written by some infatuated teenager. Indeed, I am infatuated with the Globe, and there are many reasons. The newspaper’s Pulitzer-winning coverage of abuse in the Catholic church was instrumental in exposing abuse in parishes across the country. When I first got here, I would pass some of the reporters who worked on those projects and feel like the freshman walking by Johnny Football Hero, although those reporters were much nicer than Johnny Football Hero.

Late last year, the paper launched BostonGlobe.com, a subscriber-only site. It is responsive, meaning it resizes based on the user’s browser and platform. This responsive design sidesteps the need for individual apps for each device. Whether you’re on an iPhone, a Kindle, a P.O.S. with Internet Explorer or even R2-D2, you can read BostonGlobe.com.

Even if you’re in Pi Alley.

————

To download the first front page, click here.

To see a gallery of Globe pages, click here.

To read Louis M. Lyons’ piece that marked the centennial in 1972, click here.

How to get a hand-drawn look in your infographics

Posted on February 27, 2012 by Patrick Garvin

Several years ago, a colleague taught me a trick that gives you the appearance of hand-drawn detail in infographics: you take your vector graphic, draw some shadows and then touch it up in Photoshop. It’s a trick that gives your work a sense of elegance, even if you don’t consider yourself artistic. And it’s a trick that I used for an information graphic that ran in this Sunday’s Boston Globe as part of the “Living Longer, Living Better” section.

Start with a basic vector version of your image and print it at a larger scale than you expect it to run in print. Some say to print it at 125 percent of the final size, and others say 175 percent. The point is, print it at a size larger than it actually is. Assistant graphics editor Javier Zarracina said that 175 percent is probably the maximum size, as you don’t want it to have to shrink it so much that the pencil details blend together into a dark blur.

Next, use a pencil to add shadows and depth to the image. The pencil work doesn’t have to be too clean or detailed, because its imperfections will be minimized in the later version. Javier said that it helps to not be as careful as you would be with a normal drawing.

Here’s my initial drawing of a knee replacement:

Hip replacement:

Once you’ve finished adding the pencil, scan the image. Scale it to the size it will be when printed. The scratchy pencil work, when scaled down, looks a lot more detailed and precise than it did on paper. In Photoshop, adjust the contrast and shadows if needed.

In Illustrator or Photoshop, add the color. I usually add a slight Gaussian blur to give it that imperfect hand-painted look. It helps if the color is not uniformly distributed but instead darker or lighter in some spots. For this knee and hip replacements graphic, I used some dark blue at a light opacity to strengthen the shadows and add shadows in spots I had missed. In the hopes of increasing the sense of contrast, I added white in areas that seemed too dark. I got those suggestions from Javier, which I think helped.

Lastly, replace the vector placeholders in your infographic with the colored images. And voila! You have a hand-drawn graphic!

I like this style for medical graphics and diagrams of the body. Even when I don’t use a hand-drawn look, I’m still a fan of creating an image at a larger size than you intend to run it in order to condense the detail. The results are subtle, but it gives the effect of shadows.

A few things really help when working on a project like this:

If you can have most (or all) of the text edited before drawing the images, it saves you from having to move stuff around later. Furthermore…
Make sure you, the reporter and editor(s) are all on the same page in terms of how many steps you want to include.
If you’re sending the graphic to a source to double-check it for accuracy, you might find that he or she wants you to add or remove steps. It’s easier to make those changes if you haven’t yet scanned the image yet.

To see the version of the graphic that ran on Boston.com, go here.

To read Rob Weisman’s story about knee and hip replacements on Boston.com, go here.

To see the entire “Living Longer, Living Better” section on Boston.com, go here.

To see the version of the graphic that ran on BostonGlobe.com, go here.

To read Rob Weisman’s story about knee and hip replacements on BostonGlobe.com, go here.

To see the entire “Living Longer, Living Better” section on BostonGlobe.com, go here.

Coverage of the final Border War basketball game between Missouri and Kansas

Posted on February 26, 2012 by Patrick Garvin

Yesterday was a historic day for fans of Missouri and Kansas, as the two universities’ men’s basketball teams faced off in what is ostensibly the last of their meetups in the historic Border War rivalry. Mizzou is leaving the Big 12 Conference and will play with the SEC next season. Coaches and officials at the University of Kansas have said Kansas will not play Missouri out of conference. KU basketball coach Bill Self even said, “The majority of Kansas fans don’t give a flip about playing Missouri.”

When the teams played their last football game against each other in November, Mizzou won the game and the distinction of winning most of the football games between the two teams.

————

THE LAWRENCE JOURNAL-WORLD
Lawrence, Kan.

The University of Kansas’ hometown paper stripped a photo of victorious fans celebrating the “grand finale” of the “epic border battle.” Not that these fans “give a flip.”

————

THE HUTCHINSON NEWS
Hutchinson, Kan.

————

THE TOPEKA CAPITAL-JOURNAL
Topeka, Kan.

Here’s a close-up of that photo:

So, Bill Self, when you say that Kansas fans “don’t give a flip” about playing Mizzou, what fans are you talking about? These guys seem to give pretty much of a flip.

As they should. Their team was behind and then Mizzou blew a 19-point lead. That’s flip-worthy.

————

THE KANSAS CITY STAR
Kansas City, Mo.

This was pretty fitting play for the Kansas City Star, the biggest daily newspaper between Lawrence and Columbia.

It pains me to see that photo of smiling Jayhawks celebrating. But that’s a great photo, showing a majority of beakers… giving a flip.

————

THE COLUMBIA MISSOURIAN
Columbia, Mo.

What a heartbreaking photo by Andrew Mitchell of The Missourian, showing Missouri guard Michael Dixon on the court after the game. With the Jayhawk mascot in the background, even.

————

THE COLUMBIA DAILY TRIBUNE
Columbia, Mo.

The other daily paper in Columbia picked a slightly less heartbreaking photo, though the disappointment is still apparent.

————

THE ST. JOSEPH NEWS-PRESS
St. Joseph, Mo.

The News-Press does a good job picking above-the-nameplate photos. They used a variation of the Dixon scene. This photo shows more of the Jayhawk mascot than the Missourian photo, but it makes sense: St. Joe is a lot closer to Lawrence than it is to Columbia, so News-Press readers aren’t necessarily reading this outcome as heartbreak.

————

As a Missouri native and Mizzou alum, I can’t overstate how big this rivalry is. Games against KU were as important to Mizzou sports as the “Battlestar Galactica” episodes when you found out the identity of another Cylon. To Mizzou fans, Kansas was the rival among rivals. Kansas is the Cavil among the other Cylons. If the Big 12 were “The X-Files,” Kansas was Cancer Man among the Syndicate, foiling Mizzou’s Mulder and Scully. Watching Mizzou beat KU was like watching the trailer scene in “Kill Bill” when Darryl Hannah gets what she has coming.

I could come up with dozens more pop culture references, but you get the point: This was a big deal, about which we gave a huge flip.

As you can see, I’m pretty hacked off about that Bill Self comment. A friend of mine who used to cover the rivalry for a radio station put it pretty aptly: “He can say that, but I sure don’t ever see Kansas fans making ‘Muck Febraska’ T-shirts.”

Touche.

Jessie-Lynne Kerr Day, a year later

Posted on February 22, 2012 by Patrick Garvin

The Jacksonville Association of Fire Fighters have posted a photo on Facebook that’s being heavily re-shared:

It was year ago today that Jacksonville Mayor John Peyton declared Feb. 22 as Jessie-Lynne Kerr Day, honoring the reporter who worked at the Florida Times-Union for 47 years. Peyton’s declaration was part of a surprise event at the Times-Union to honor Jessie-Lynne’s career. The City Council designated a section of Riverside Avenue as Jessie-Lynne Kerr Parkway, stretching from the Times-Union to Forest Street.

Jessie-Lynne Kerr with John Peyton. Photo by Don Burk.

Two months later, on April 28, Jessie-Lynne died of complications from lung cancer. It was two days after her 73rd birthday, or as she would have said, two days into her 74th year.

Jessie-Lynne was a character that fewer newsrooms have now: that curmudgeonly institution of knowledge who had been at the paper longer than many of her colleagues have been alive. She called herself by two nicknames: “Mama Kerr” and “tough old broad.” Depending on the circumstances of your meeting, she could come across as either, or both.

If someone mispronounced Duval County or added more than one L to Philips Highway, we would hear about it. She kept a dictionary on the shelf above her desk, and it came out whenever the word “Caribbean” was used. She’d read the guide on how to say it correctly, though I think she’d read it enough that she had it memorized. But the dictionary gave her authority and proved her point.

But ultimately, she was Mama Kerr, bringing in cookies for birthdays, serving dinner at her son’s fire station, leading newsroom tours. And when the chips were down, she was there.

She was a face of the Times-Union, having been there since March 9, 1964. It was one of her proudest anniversaries.

From a Jacksonville standpoint, she did effect some change. Her story saved the Treaty Oak, effectively leading to the establishment of Treaty Oak Park. She convinced editors to cover a parade for Olympic gold medalist Bob Hayes, which she thought was the first time an African-American appeared on the front page of the Times-Union without committing a crime.

In the later years, she chronicled her cancer, and in doing so, talked about her alcoholism, her divorce and the suicide of her oldest son. She received several letters throughout her cancer treatment, asking when she’d publish her next update in the paper. Even people who didn’t subscribe to the paper would ask me how she was doing.

For the Times-Union newsroom, Jessie-Lynne was a needed icon because she was a fighter. We saw friends and colleagues take buyouts, or worse, get laid off. We saw even larger cuts at other papers, and many of us feared our journalism careers were going to end prematurely. We had thrown ourselves far from home and our biological families, and so we had to rely on each other.

I spent four and a half years of my formative 20s at the Times-Union. In addition to the “what does it all mean” phase of the mid-to-late 20s, I lost loved ones, experienced family health scares and other big life experiences that tend to scare the shit out of you the first time you experience them. Having my friends at The Times-Union to support me meant the world to me, and while I didn’t ever see Jessie-Lynne outside of work, she was still a part of that fabric.

I needed that “tough old broad.” I needed her to give me a hug at times, and to tell me to suck it up at other times. I needed her cookies, and yes, I needed her corrections on pronunciations.

Just don’t tell her I said so.

Florida Times-Union piece brings change — before it runs

Posted on February 21, 2012 by Patrick Garvin

A Florida Times-Union investigation of Jacksonville Transportation Authority bus drivers led to three employees losing their jobs and four bus drivers being suspended. Three of those drivers have been reinstated, though they could still face some punishment.

Newspaper investigations into public agencies result in firings and changes, but in this case, the moves happened in the week before the piece was even published.

Transportation reporter Larry Hannan wrote in Sunday’s piece:

JTA Executive Director Michael Blaylock said he was unaware of the background problems until the Times-Union investigation began. He promised major changes.

“I have to accept full responsibility for this,” Blaylock said. “And the [JTA] board expects me to fix it.”

What there is to fix: The Times-Union investigation found there were JTA drivers who were cited for driving with suspended licenses while continuing to drive buses. Additionally, 258 of 330 drivers had a total of 1,276 criminal and driving violations, including domestic battery, child abuse, driving without a valid license and writing bad checks.

The newspaper’s investigation began after a passenger was run over and killed downtown by a JTA bus in October.

Here’s how the story was played in this past Sunday’s Times-Union. Click for a larger view.

On the inside:

The main Jedi behind this investigation is Larry Hannan, the Florida Times-Union’s transportation reporter. He previously worked at News-Herald in Ohio and the Naples Daily News in Florida.

On Tim Wakefield, oldest active player in Red Sox history

Posted on February 19, 2012 by Patrick Garvin

On Friday, Boston Red Sox pitcher Tim Wakefield announced he’s retiring after 19 seasons in the major leagues, 17 of which were with the Red Sox.

Wakefield got his 200th career win this past season. Of those 200 wins, 186 were with the Red Sox. Sports Jedi Luke Knox put together this chart showing Wakefield’s wins and how he stacks up with other Sox players.

Indeed, among Red Sox pitchers, he’s high on many leader lists, right up there with Cy Young and Roger Clemens.

There’s another distinction that Wakefield earned in the 2011 season: he became the oldest active player in the history of the Boston Red Sox, including the time when the team was called the Boston Americans in the early 1900s. On Tuesday, May 10, 2011, Tim Wakefield was 44 years, 281 days old, a day older than Deacon McGuire was when he played final game for the team in 1908.

It seems like a nitpicky distinction, but it’s one I will remember, because it was the topic of one of my first enterprise graphics at The Boston Globe. Click for a larger view.

When I first got to the Globe in November 2010, I knew I wanted to learn more Flash. And I knew I wanted a project about the Red Sox. And I know that for both, the man to talk to was Daigo Fujiwara, who knew Flash and Red Sox baseball very well. He has his own baseball sites and even hosts a Red Sox podcast.

In talking with him, I mentioned Jamie Moyer, whom I had just seen mentioned in an article as being the oldest player in major league baseball in the 2010 season. A few years behind him in age was Boston Red Sox pitcher Tim Wakefield. I went home and did some research on Baseball-Reference.com, and found that there had been other Sox players who played at the age of 44. But a comparison of birthdays showed that none of them had been as far into 44 as Tim Wakefield. Some time into the upcoming 2011 season, Tim Wakefield would become the oldest Red Sox player in the history of the team.

I told my boss that this might be a fun project to work on in my down time at work when I didn’t have any other pressing projects. That is, if he thought people would be interested. “Almost anything Sox-related gots lets of traction in this town. People will definitely be interested.”

So, using Baseball-Reference.com, I created a spreadsheet. I noted the youngest and oldest player of each season, dating back to the days when the team was The Americans. Additionally, Baseball-Reference determines the average age of every player on the team, so I included that as well. It was a tedious task, going through each page for each season, looking through their rosters. But a pretty cool data table was shaping up.

When finished, I plugged the data into Illustrator’s graph tool, showing the youngest, oldest and average ages per season. The nut graph was that there were no noticeable trends. Carl Yastrzemski played for a bit when he was 44, but was a younger 44.

Throughout the winter of 2011, when I had no more dailies or short-term projects on my plate, I would turn to this project, and how we would present it online. Using the Actionscript from projects I had worked on with Daigo, I created a template for what the Flash version would be. I turned the Excel spreadsheet into an XML file that fed into the Flash file. While the print version had been a static version of the chart, the Flash version would allow the user to roll over each year and see the oldest and youngest players. My boss, David Schutz, suggested I include photos of each player. The aforementioned Luke Knox directed me to some old Red Sox press guides, which is where I found the bulk of the photos.

So, by the end of April, this thing had come together in bits and pieces over a period of several months. On Tuesday, May 10, the day that Wakefield became the oldest active Red Sox player, we ran the graphic in the sports section of The Boston Globe, and this interactive went live on Boston.com.

To this day, it’s one of my favorite things I have ever done, especially at The Globe. Of course, by the time Tim Wakefield was the age I am now, he had already won 56 games in the majors.

Not bad. Indeed, not bad.

Florida Times-Union, Jacksonville.com Valentine’s project

Posted on February 14, 2012 by Patrick Garvin

I’m always interested to see how the online version of a project ties in with the print version. Particularly when the online version includes more than the print version, or includes things that you couldn’t put in the paper (like, video and audio).

My friends and former colleagues at The Florida Times-Union recently launched a series online and in print, called (extra)ordinary Love. The description from the main page:

Love is an emotion that propels, from the moment you know you’ve found it through the trials you endure to sustain it. Whether romantic, platonic or familial, there is extraordinary power in ordinary love.

Three stories ran in the paper, starting this past Sunday with a story about Jaguars lineman Terrance “Pot Roast” Knighton:

I never knew his nickname was “Pot Roast,” but now I want that moniker, too. Here’s the page from Monday:

Tuesday:

I’m told these pages were designed by Jennifer Bradford.

Each day featured promos to the web package, which included three additional stories, with pictures and audio:

In addition to Jennifer Bradford on page design, this project had reporting and videos by Kate Howard and Tracy Jones; photography by Bruce Lipsky, Kelly Jordan and Bob mack; and web design by Derek Hembd, whom I put on par with MacGyver in being able to figure things out.

The design for both print and the web is clean, and the packages have the unifying package sig while being distinct from each other.

I always love being able to show what my friends and former colleagues have been working on in Jacksonville. Good work, friends.