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

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

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.

Boston Globe graphics after Boston Marathon bombings

——

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

 

 

Boston Globe graphics after Boston Marathon bombings

——

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

Boston Globe graphics after Boston Marathon bombings

——

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.

 

Boston Globe graphics after Boston Marathon bombings

 

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.

Boston Globe graphics after Boston Marathon bombings

To read the story, click here.

——

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

Boston Globe graphics after Boston Marathon bombings

——

How the manhunt unfolded Friday:

Boston Globe graphics after Boston Marathon bombings

 

Boston Globe graphics after Boston Marathon bombings

——

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

Boston Globe graphics after Boston Marathon bombings

——

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.

 

 

 

 

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

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

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:
Patrick Garvin and Boston Globe infographic using hand-drawn images
Hip replacement:
Patrick Garvin and Boston Globe infographic using hand-drawn images
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.

 

Patrick Garvin and Boston Globe infographic using hand-drawn images

 

Patrick Garvin and Boston Globe infographic using hand-drawn images

 

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

 

Patrick Garvin and Boston Globe infographic using hand-drawn images

 

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.

On Tim Wakefield, oldest active player in Red Sox history

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.

Boston Red Sox graphic about Tim Wakefield

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.

Boston Red Sox graphic about Tim Wakefield

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.

Fred Taylor: A class act to the very end

Running back Fred Taylor, who played 11 seasons for the Jacksonville Jaguars and two years with the New England Patriots, is retiring today. From The Boston Globe:

Today, Fred Taylor will sign a ceremonial one-day contract with the Jacksonville Jaguars, the team which drafted him eighth overall in 1998, and then he will announce his retirement from the NFL after 13 seasons and 11,695 yards, which is 15th most all-time.

I feel a special connection to Fred Taylor. Not just because he played for the Jaguars when I worked in Jacksonville, or because he also left Jacksonville to come to Boston. But because I met the man, and he was really humble and earnest.

Four years ago, Taylor joined an elite group of players who’ve rushed at least 10,000 yards. At the time, he was one of only two active players in that list of 20 players.

Not too shabby, Fred.

As that milestone was coming, the staff at The Florida Times-Union began thinking of how to cover it. AME for Visuals Denise M. Reagan and I talked with Sports Editor Chet Fussman and assistant sports editor Justin Hathaway about potential graphics. The more we talked, the more ideas we had.

I had remembered a Columbia Missourian graphic that converted Brad Smith’s stats into distance across Columbia. I liked that because I can find sports statistics kind of abstract. I wanted to put it in perspective for casual fans such as myself. We could have simply converted it to miles, but I thought showing it to readers in the context of their city had greater impact. I made it lighter and more whimsical to indicate this wasn’t a traditional map.

Click for a larger version:

Florida Times-Union infographic about Jacksonville Jaguar Fred Taylor Patrick Garvin

Meanwhile, we knew we wanted to do something awesome for when he finally reached 10,000 yards. Whenever that fateful game happened, we wanted a breakdown of his career ready. In the preseason, we pulled statistics and started organizing our pieces. We decided I would do a full-page, season-by-season, game-by-game chart of every yard he’d rushed in his career, color-coding the games in which he rushed 100 yards or more.

Click for a larger version:

Florida Times-Union infographic about Jacksonville Jaguar Fred Taylor Patrick Garvin

After it ran in the paper, we printed a version we could frame and give to Taylor. We went to the locker room and presented it to him. Charles Apple did a Q&A on that.

He was not what I expected a pro athlete to be. There was no cocky bravado or sense of entitlement. He was extremely gentle and humbled by his accomplishment. Other reporters have said he’s extremely friendly and down to earth.

Fred Taylor, to me, epitomizes the best of Jacksonville. He’s not the star of the team or the flashiest player, but he worked hard and did his best, despite injuries and age. He stuck with it, and when it came time to retire, he decided to do it with class.

The symbolism of signing a one-day contract with the Jaguars means a lot to fans. In the four and a half years I lived in Jacksonville, there were often fears that the team would move to another market, presumably Los Angeles. Taylor’s return to the team lets them know they are important and not forgotten, which goes a long way in Jacksonville.

To read Times-Union reporter Tania Ganguli’s piece on Fred Taylor’s retirement, go here.

More of The Boston Globe’s Bruins pages, infographics

Last weekend, The Boston Globe published a special section commemorating the Boston Bruins’ season and Stanley Cup victory. The section was emblematic of all the good coverage that the paper had published all season, both in the sports section and throughout the paper.

Here are some of my favorite pages The Boston Globe produced for the Bruins’ appearance in the series with the Canucks. Click on any of them for a larger view.

————
The preview section
June 1, 2011

Boston Globe coverage of the Boston Bruins

Boston Globe coverage of the Boston Bruins

Here’s a closer look at that “Raising the cup” package:

Boston Globe coverage of the Boston Bruins

Here’s a nice comparison of the two teams:

Boston Globe coverage of the Boston Bruins

Boston Globe coverage of the Boston Bruins

————
Game graphics

Both Daigo Fujiwara and Luke Knox worked hard at putting together full pages breaking down the shots, the goals and the performances of each player for each game. Each of these ran the day after the game.

Boston Globe coverage of the Boston Bruins

Boston Globe coverage of the Boston Bruins

Boston Globe coverage of the Boston Bruins

In total, there were seven of these pages, one after each game. Daigo had quite the task: plot each point on the ice, and then find a full-body photo that wouldn’t cover the points, and then cut it out and put it in the graphic. And do it all on deadline.

You’ll recall game 3 when Aaron Rome of the Canucks hit Bruin Nathan Horton on the chin, knocking Horton down. The instant replays tried to show what happened, but it wasn’t until I saw this graphic by Dave Butler that I fully understood what had happened.

Boston Globe coverage of the Boston Bruins

————
The special section
June 19, 2011

Boston Globe coverage of the Boston Bruins

Boston Globe coverage of the Boston Bruins

This page features another great graphic by Daigo. I helped plug in some of the initial numbers, but he did much of the heavy lifting.

————
Other

Daigo and Tom Giratikanon put together this cool online graphic showing how far into the playoffs each of Boston’s four main teams have gotten, going all the way back to the Boston Americans (now the Red Sox).

I got to put together the print version:

Boston Globe coverage of the Boston Bruins

These pages are only some of the great pages that the Globe produced this past season. I hope we’ll get to do it all again next year.

How Massachusetts, Canadian papers played Stanley Cup win

Last night’s Stanley Cup game was big news for a few reasons. It was the first time the Boston Bruins had won in 39 years. And on top of that, there were riots. In Vancouver.

So, take a look at how papers in Massachusetts and Canada played the game and the riots. Click any of the pages for a larger view. In a few days or so, I’ll have a look at how The Globe has played the Bruins in the playoffs and finals.

All images come from Newseum.

———
The Boston Globe
Boston, Mass.

Stanley Cup newspaper fronts

———
The Boston Herald
Boston, Mass.

Stanley Cup newspaper fronts

———
The Enterprise
Brockton, Mass.

Stanley Cup newspaper fronts

———
Telegram & Gazette
Worcester, Mass.

Stanley Cup newspaper fronts

———
The Herald News
Fall River, Mass.

Stanley Cup newspaper fronts

———
Cape Cod Times
Hyannis, Mass.

Stanley Cup newspaper fronts

———
The Vancouver Sun
Vancouver, Canada

Stanley Cup newspaper fronts

———
The Province
Vancouver, Canada

Stanley Cup newspaper fronts

———
The Globe and Mail
Toronto, Canada

Stanley Cup newspaper fronts

———
Edmonton Sun
Edmonton, Canada

Stanley Cup newspaper fronts

———
Calgary Sun
Calgary, Canada

Stanley Cup newspaper fronts

———
Winnipeg Free Press
Winnipeg, Canada

Stanley Cup newspaper fronts

———

How The Boston Globe/Boston.com covered the tornadoes

The Boston Globe and Boston.com have done a great job covering Wednesday night’s tornadoes in Western and Central Massachusetts. I’ve included the last three days’ front pages, as well as some inside pages, photos and graphics. To see all of the Boston Globe/Boston.com coverage, go here.

———

THURSDAY, JUNE 2

The inside page:

The top photo is by Matthew Cavanaugh, for the Boston Globe:

We used NOAA’s updates to put together this map of reported touchdowns and deaths:

Javier Zarracina quickly put together this explainer on the anatomy of a tornado:

To read the main bar (gang byline of Travis Andersen, Eric Moskowitz, Martin Finucane, Glen Johnson, Bryan Marquard, and David Abel), go here.

To read Carolyn Y. Johnson’s story on how tornadoes form, go here.

To see Tom Giratikanon’s map of the history of tornadoes in Massachusetts, go here.

———

FRIDAY, JUNE 3

We had several inside pages, including this color photo page:

Which included this great photo by David L. Ryan:

Elsewhere inside was this great map by James Abundis with reporter Brian Ballou. It shows the varying damage of houses on Pennsylvania Avenue in Springfield.

To read Ballou’s story, go here.

With updates from the National Weather Service, we were able to show which cities had warnings, and more reported touchdowns:

Javier Zarracina put together an explainer showing how the National Guard and FEMA were deployed to coordinate the search and rescue operations:

To read Brian MacQuarrie’s story, go here.

———

SATURDAY, JUNE 4

The photo up top is by John Tlumacki:

To read Stephanie Ebbert’s story, go here.

To read Brian MacQuarrie’s story, go here.

To see all of the Boston Globe/Boston.com coverage, go here.

More Boston Globe infographics about Japan, nuclear plants

In the last week, all hands have been on deck in the Boston Globe infographics department for our coverage of the nuclear crisis in Japan and what it means for nuclear plants in the U.S., particularly in New England. We’ve had great work from David Schutz, Javier Zarracina, David Butler, James Abundis, Daigo Fujiwara and Monica Ulmanu.

Below is just some of the stuff we had from March 14 to March 18. We used a variety of approaches for the variety of stories and angles, and I think we’ve been doing a great job. Needless to say, I love working with these people.

———
MONDAY, MARCH 14, 2011

On the Sunday after the earthquake, the focus of the story had shifted to the Japanese reactor and the crisis at the nuclear plant there.

David Butler and I worked on the graphics for that Monday’s paper, including this one here. Butler found an earlier Associated Press graphic, but then simplified some of the steps and colors. Additionally, he added some details not in the original graphic, using information we got from reporter Carolyn Johnson and David Schutz, Deputy Design Director/News & Graphics.

Here’s a look at that graphic. Click on it for a larger view:

Boston Globe Fukushima infographic by David Butler and Patrick Garvin

———
TUESDAY, MARCH 15, 2011

The next day focused more on the plant at Fukushima. Here’s a front page graphic. Click for a larger view.

Boston Globe Fukushima infographic

———
WEDNESDAY, MARCH 16, 2011

James Abundis put this graphic together explaining radiation levels. The questions many people had were, “How much radiation has been released by the Fukushima plant?” and “How does that compare to other radiation levels?” This infographic answers those questions simply but thoroughly. Click for a larger view.

Boston Globe infographic

Inside the A section, we had this infographic explaining the risks of nuclear meltdown and the potential worst-case scenarios.

Boston Globe  infographic

———
FRIDAY, MARCH 18, 2011

The problems with the boiling water reactor in Japan shed light on the BWRs and PWRs here in the states, particularly three in New England: Vermont Yankee Nuclear Power in Vernon, Vermont; Seabrook Station in Seabrook, New Hampshire and Pilgrim Station in Plymouth, Mass. David Schutz had put together a map of historic earthquakes last year, so I updated that to show these three reactors. Click for a larger view.

Boston Globe  infographic

Inside, we had a graphic by Monica Ulmanu and Javier Zarracina explaining the safety measures in place at those New England nuclear plants, with an assist by Boston Globe reporter Beth Daley. Click for a larger view.

Boston Globe  infographic

———

These are just some of the graphics we did this past week. It’s been a team effort, with work by everyone in the department.

RELATED
How The Boston Globe covered the tsunami on Saturday, March 12, 2011
How other newspapers covered the tsunami on Saturday, March 12, 2011