How it appeared in the newspaper vs. online: Movie psychopaths

Posted on January 26, 2014 by Patrick Garvin

In today’s Ideas section of The Sunday Globe, Boston Globe Graphics Editor (and my boss) Chiqui Esteban put together a graphic examining psychopaths from the movies. The graphic accompanies a Q&A with psychiatry professor Samuel Leistedt, who watched 400 movies, identified 126 psychopathic characters, sorted them into four broad clinical categories, and released his findings last month.
Click the image below to see a larger version.

As people would walk by our desks and comment on how cool the graphic was shaping up to be, we would tell them, “Just wait till you see how this plays online.”

The print graphic was able to include images of just some of the characters, but for the BostonGlobe.com version, we had images for each of the 126 characters in Leistedt’s report. Online, Chiqui created a sortable datable where users could sort between type, gender and primary/secondary. Additionally, he added a slider, allowing users to isolate the time frames.

Additionally, I added a link to a PDF of today’s Ideas page so that users how the piece ran in print. In my gay marriage project for BostonGlobe.com, I’ve been including PDFs of Boston Globe front pages as a way of playing up BostonGlobe.com’s archiving potential. When possible, I’ve tried to include links to past projects, whether those links are to other web projects or PDFs of newspaper pages.

This web version of the psychopaths graphic benefitted from Chiqui’s knowledge from past projects. He has done lots of good web graphics making use of sortable databases that show or hide an array of variables:

As you can see, the web version has a different feel to it from the print version. But that’s OK. That’s going to be true for most graphics that have both print and web components, because of a few variables:

The print versions are constrained by whether the page is color or not. The web version, of course, can appear in a golconda of colors. In this case, the use of colors allowed us to color-code the four types of psychopaths that Leistedt included in his survey. In a quick glance, you can see the variety.
The total print version can be seen at once. But on the web, the interactive can’t be seen all at once, as the user will scroll and/or click to see more.
Whether you’re reading the newspaper in downtown Boston or Newton or all the way out in Maine, you’ll see the graphic at the same size on a page that has the same dimensions. The web version, of course, varies based on the size of your screen.
The print reader can’t sort, click, show or hide any of the information presented to him/her. But the user of the interactive graphic can have all of those options.
Because you can see photos with all 126 characters, the user can get a more complex view of the variety of psychopathy in the movies.
The option to not sort is just as important as the option to sort. This list includes quite a disparate list, ranging from Don Corleone to Chucky to Patrick Bateman to Thelma and Louise to Bonnie and Clyde. That covers a lot of ground, and I think we’re doing a service to the readers by giving them the options to see it all at once while also giving them the options to only see the subcategories. In print, we’d have to make that decision for them. But if they’re on a desktop or a mobile device, they can decide for themselves with their mouse or their finger.

This ran in The Sunday Globe Ideas section, which reports on ideas, people, books, and trends that would be of interest to intellectuals. It covers lots of ground, and has allowed us to do lots of great graphics. One of my favorite graphics for Ideas was a chart I did showing how Harry Potter and other fantasy characters used Joseph Campbell’s hero myth archetypes.

Go check out Chiqui’s graphic here. Check out Chiqui’s portfolio here.

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.

Patrick Garvin: Blog

Tag Archives: bostonglobe.com

How it appeared in the newspaper vs. online: Movie psychopaths

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

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

INFOGRAPHIC: ‘Golden Girls’ to ‘Desperate Housewives’