How to use Mr. Map Generator, a map tool for journalists

Posted on March 24, 2015 by Patrick Garvin

In a recent blog post about journalists using technology to make their lives and jobs easier, I mentioned that I created templates in Illustrator of the maps we use the most. I saved those as SVGs and then turned those SVGs into HTML. The heavy lifting was writing code for a map generator that would allow me to copy and paste spreadsheet data to color-code the maps for me. It took some time, but it paid off. It creates responsive maps that I can easily pluck onto the website, but I can also print-to-PDF those suckers and have the basis for the print version. People who have made vector maps will know that the “old way” of having to select each state/county individually to color-code it was a pain. And fraught with the possibility of introducing error.

Mr. Map Generator has maps of the US, Massachusetts and Boston. For this post, I’ll explain how to use the US map generator, though the concepts will be almost the same for the other map generators.

GETTING STARTED

1. We’ll start with a spreadsheet. I usually use a Google Spreadsheet or an Excel Spreadsheet. In our fake spreadsheet, we will pretend it’s a spreadsheet about the “Dawson’s Creek” finale, showing the percentage of people in each state who rooted for Joey to end up with Pacey, Dawson, or neither. Obviously, these are made-up numbers, because most people will agree that Joey should have ended up with Pacey. But for the sake of this exercise, we will pretend.

Format your data with state postal codes in the first column, state names in the second column, and data in however many columns you want, starting with the third column. You can download a zip for the responsive files here or if you just want to make a print map, download the Excel template here. Neither the postal codes or state names need to be in any order.

2. On the page of the US map generator, paste your data in the field that says, “Paste your data in this field.”

3. After pasting your data, click on the button that says, “Click here to select your data set.”

4. After you’ve done that, you’ll get a button that shows you the columns from your spreadsheet. In this scenario, as we’ve created a fake spreadsheet, our options are “Rooted for Joey ending up with Pacey,” “Rooted for Joey ending up with Dawson,” and “Rooted for neither Dawson nor Pacey.” For the sake of this exercise, I’ve clicked on those who “Rooted for Joey ending up with Dawson.” Which, of course, was not how it ended.

5. Step 5 allows you to select your color from the options of red, blue, a gold/yellow, green, and purple. Step 6 allows you to decide whether you want the map to have 2, 3, 4 or 5 colors, or to be a chloropleth where the smallest value is the lightest shade and the largest value gets the darkest shade.

6. In our case, we’ve opted to have four shades of red. The generator is designed to calculate your smallest value and your largest value, and then calculate the ranges in between those two values. I strongly suggest not leaving those values as is, for a variety of reasons:

Outliers that skew the ranges
Ranges that aren’t intuitive (6.1-11.6, 11.6-17.1, etc.)

7. Once you have selected your color and ranges, you can click a button to preview your map. Do that.

Here’s what your map will look like:

8. You’ll then have the option to generate your code. It will appear in a text box.

9. To make a web version, download these files if you didn’t already do so in the first step. Copy the code in the box above and paste it inside the file called code.js. Then open the HTML in a browser. You don’t have to edit or change any of the other files. When you upload it to your server space, you’ll need four files:

code.js
map.css
US-map.htm
US-responsive.js

10. You’ll need to add a key/legend on your own. If you inspect element on this page, you can copy the HTML you’ll need and can plunk it into US-map.htm before uploading it.

11. To use this to make a vector print map, right click and select “Print.”

12. In the print dialog box, select “Save as PDF.” I usually have it only save page 2 of the PDF, rather than saving the entire file.

13. I then open that PDF in Illustrator. Using the white arrow, I select everything I want to delete. I delete until all is left is the shapes of the states.

14. Once I’ve deleted the extra parts from the PDF, such as text characters, I have only the map left. I then plug that into a Globe template file. I’ve done enough of these that I have a starter file with the state labels in place.

If you see yourself making a lot of these, having an Illustrator template with a layer of labels is not a bad idea.

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.

Does an infographic need to be “memorable” to be good? That might depend on how you define “infographic”

Posted on December 9, 2013 by Patrick Garvin

After reading coverage recent study about what makes charts memorable, I was convinced that there is a fundamental divide not only on what constitutes an information graphic, but also on what graphics are meant to do.

I have spent almost 10 years of my life making information graphics. I have moved to another state to take an infographics job not once, but three times. I do not consider maps, charts or diagrams to be a passing fad. Thus, I have a vested interest in how information graphics are received and perceived. I’ll see links on news sites for and “INFOGRAPHIC,” only to find that what I’ve actually clicked on is an image of icons, big numbers, some photos and flashy colors. Friends who have worked for great news agencies have shared recent freelance stories of clients choosing big numbers of multiple colors over data, charts and diagrams. Rather, in my estimation, they are rejecting actual infographics for something else, and they’re calling that “something else” an infographic.

Thus, it was with this sense of frustration that I read a bout a recent study in which people were shown multiple visualizations of data and asked which ones were most memorable. Examples with photos, logos, icons and colors were more memorable than basic charts or pie graphs. Does this serve as validation for the dressed-up web images we see billed as “infographics” on Tumblr, Pinterest and elsewhere these days?

Fortunately, no. Doctoral student Michelle Borkin of Harvard’s School of Engineering and Applied Sciences, who helped conduct the study, said “Icons, images, and human-recognizable objects will instantly make [a visualization] more memorable… But there’s this very careful caveat — and this is me speaking as a viz design person: make sure they’re helping your reader understand the main point of your data.”

I’m glad Borkin made that last point. If you remember a graphic’s presentation but you don’t remember the graphic’s content, is that really a success? I’ve seen pie charts made with actual pies, showing data from Thanksgiving studies. Or so I think. I remember the chart, but I have no memory of what it was trying to tell me.

When discussing this with colleagues at work, I said that while I do not remember all the specific articles I read on Sept. 12, 2001, I do remember the information in those articles. And I think the information and story itself is much more important than the vessel that brought you that information and story, whether the vessel was an article or an information graphic. When you’re showing a declining crime rate, what do you want the reader to ultimately remember: the trend in crime, or that you used a 75% Periwinkle 2-point stroke on the fever chart over two columns? As long as they remember that they saw the chart, and the information within, then I’m happy.

Sometimes, a graphic will require more images and colors than a simple stock chart. But I’d reiterate that decisions made in making infographics should be made because the chart requires it and it helps communicate your ultimate point. If we are adding elements just to “dress it up” or to “make it pretty,” we’re losing focus of the goal of an information graphic. Like a good news article, a good information graphic should convey information clearly in a way that does not confuse the reader. If we end up making decisions about infographics not based on the content, the graphic suffers.

There is a tendency for photos and graphics to be referred to as the page’s “art.” If the lead art falls through, the other photos and graphics on the page sometimes have to change to make up for it. On the idea of information graphics as art, Charles Blow of The New York Times once famously said: “I would like to make a distinction between information graphics and art in terms of their missions. Art need serve no purpose but to express the vision of the artist. On the other hand, the highest purpose of an information graphic is to clearly express the relationships among data. That said, if someone should call a chart art because of its beauty or message, that person would get no argument from me.”

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.

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.

More Boston Globe infographics about Japan, nuclear plants

Posted on March 21, 2011 by Patrick Garvin

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:

———
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.

———
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.

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

———
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.

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.

———

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.

Patrick Garvin: Blog

Tag Archives: infographics

How to use Mr. Map Generator, a map tool for journalists

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

Does an infographic need to be “memorable” to be good? That might depend on how you define “infographic”

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

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

How to get a hand-drawn look in your infographics

More Boston Globe infographics about Japan, nuclear plants