First NYT Election Map?

1896 Presidential Election Map

Or at least the first one published on the day after the election? A year or two ago, I went digging thru the archives to see if I could find the first election results map published in an edition of the Times dated the day after the election. This is the earliest one I found, which was published in the Wednesday, November 4, 1896 edition of the paper and headlined “A map showing how all the states in the union have cast their electoral votes, those which have gone for M’Kinley being in white and those for Bryan in black.”

The map occupied about half the front page — which also had an impressive amount of election results tables intermingled with the stories above.

The speed with which the results made it into print boggles the mind given the technology of the day (especially considering that in the last few elections in the 2000s, with all of the technology available to us, there have been a number of states that we haven’t been able to call in the Wednesday paper).

There’s more than a few things I’m not clear on — Was it a morning or afternoon edition of the paper? How did they count votes so quickly? Who compiled the results — was it The Associated Press? Does the map show the final results? The story above says that “In the East, every State from Maine to North Carolina, inclusive, has gone for McKinley and Hobart, except for Virginia, which is in doubt.” Yet on the map, there’s no indication that the status of Virginia is uncalled at that point. (And in fact, in the final electoral vote, which you can see at Dave Leip’s Atlas of Presidential Elections, you’ll notice a number of states that are incorrectly shaded in the map — Virginia, North Carolina and a handful of others in the West.)

Over the next few elections, the maps grew more sophisticated. In 1904, we have hatching, an actual map key, a much less crude rendition of the U.S., and labels on the map with the number of electoral votes for each state.

1904 Presidential Election Map

And 1916 marks the first appearance on the map of one of my favorite terms of the era: the “doubtful” states —those for which not enough results were in to call a winner — in this case, California and New Mexico with their 16 electoral votes.

1916 Presidential Election Map

They’re obviously a far cry from the interactive, updated-by-the-minute maps we publish today, but incredibly impressive for the era. It makes me wonder if the artists who produced those first maps had the same thrill at seeing the results in the next day’s newspaper that we now get from having interactive maps online and updating on election night.

(And if anyone has examples of earlier election maps from The Times or other papers, send them my way: mericson at Would love to add them to my collection.)

2010 Election Results

We’ve slowly started turning on some of our Election 2010 results pages for the general election in November. Right now, they’re obviously all zeros — and the interactive maps aren’t live yet either — but on election night, we’ll have a full assortment of interactive House maps, Senate maps and Governor maps, including some slick new features from Matthew Bloch. Plus, we’ll have state election result pages for every state.

Export Illustrator Layers as PNGs

Update: I’ve got a much improved version of the script that also exports artboards and adds a PDFs option. Get the improved version.

Hot on the heels of my Illustrator script to export artboards as PNG files, here’s one that exports Illustrator layers as PNG files.

To use the script, download Export-Layers-as-PNG.jsx and put in your Illustrator scripts folder (usually in Applications/Adobe Illustrator/Presets/Scripts/). Restart Illustrator, and run the script by going to “File > Scripts > Export Layers as PNG”.

  • Files are named based on their layer name. It only exports layers where their name has been changed from the default “Layer 1”, “Layer 2”, etc.
  • If you put a plus sign (+) in front of a layer name, that layer will always be visible. Useful for if you want to have a layer that always appears in the background of each exported image.
  • If you put a minus sign (-) in front of a layer name, it will skip that layer.
  • It stores its settings in a nonvisible, nonprinting layer named “nyt_png_info”
  • It has an option for transparency, and lets you choose between PNG8 and PNG24.

You can try it out on the sample file

When you run this script on this file, it will export 2 PNGs: Play.png and Pause.png. The “+Button” and “+Gradient” layers will appear in the background of both exported files, and it will skip the “-Pause 2” and “Layer 5” layers.

A year or so ago, I discovered Topsy, which lets you plug in a URL — say, for example, for a graphic like our Netflix map — and see how many times people have tweeted about it and what they’re saying. It’s a great service, but its one downside is that you have to search for URLs one at a time. And sometimes you want to see how a bunch of URLs are doing relative to each other.

So, I put together a little Rails app that takes a Web site — something like the NYT home page — and looks up the first 150 or so URLs that it finds on the page using the Topsy Otter API, then displays how often they have been tweeted as an overlay on the page itself.

The app is up at A few things to note:

  • By default, it only looks up URLs that have a date or numeric ID in them. This is a crude way to filter down the page to just stories rather than looking up things like page nav.
  • It rewrites the URLs to point to their page on Topsy, so clicking on a link will take you to the Topsy page that shows all the tweets about that URL.
  • Depending upon a site’s HTML structure, the numeric overlays work better in some sites than others. looks reasonably close to real-life. does not.
  • The Topsy API has a limit of 10,000 URL lookups in an hour. Since it will check up to 150 links on a URL, this means that if more than 60 or so people have been to twittrd in the last hour, I might be over my Topsy API limit. Check back the next hour to see if it’s reset itself.
  • Topsy also doesn’t deal well with URLs that have the id of the story or post in the querystring, since it ignores everything after the querystring when searching. So your mileage may vary on sites with urls like post.php?id=12345.
  • And it can be a bit pokey — it hits the Topsy API for each URL it finds on the page — so it can take 20 or 30 seconds to run.

Export Artboards from Illustrator

Update: I’ve got a much improved version of the script that also exports layers and adds a PDFs option. Get the improved version.

We just upgraded to Illustrator CS5 at work — we’d been stuck on CS3 — and one of the great new features is its ability to have multiple artboards in a single document. For the first time, this lets me mock up multiple pages of a Web site in a single Illustrator document in a sensible way.

For example, I’ve spent the last couple weeks working on designs of all our election result pages for the general election in November, which has something on the order of a dozen or two different types of pages to design. In the past, I would have resorted to separate Illustrator docs for each type of page, or kept different page mockups on different layers in a single document, which quickly devolves into layer management madness.

But with CS5, I’ve now got a gigantic Illustrator document with 60 artboards, each sized to the width and height of one of our web pages, so I can easily keep a bunch of mockups next to each other. And since you can name each artboard, so it’s easy to keep track of what’s where in the document.

But the one hitch is that Illustrator doesn’t come with a great way to export the artboards — Save for Web and Devices only exports a single artboard at a time, while Exporting as PNG doesn’t give you a lot of options — it appends the artboard name or number to the file name when you save, and you can’t easily select which particular artboards you want to export. And if you’ve created a file with a bunch of blank artboards, but only have artwork on a few, you don’t want to export all the artboards all the time.

So, I cobbled together a little Javascript script that loops through all the artboards in the document and exports only ones where you’ve changed named the artboard — it’ll skip anything with default names like “Artboard 1”, “Artboard 2” and so on. And it also will skip any artboards whose names begin with dashes — so once you’ve decided that you don’t like a particular version of design, just put a dash in front of its artboard name and it won’t get exported.

In the list above, two only two artboards that will be exported are “Senate Map 1” and “Senate Map 3”.

To use the script, download Export-Named-Artboards-as-PNG.jsx and put in your Illustrator scripts folder (usually in Applications/Adobe Illustrator/Presets/Scripts/). Restart Illustrator, and run the script by going to “File > Scripts > Export Named Artboards as PNG”.

Choose the directory that you want to export files to and if you want to add a prefix to the file names. Click export, and watch it run. Since most mockups here get uploaded to an internal Web server for others to look at, the script makes the filename a bit more web friendly, downcasing and replacing spaces with dashes: “Senate Map 1” will be exported as “senate-map-1.png”

The script also stories its settings in a text block on a nonprinting, nonvisible layer of the document named “nyt_png_info”, so don’t delete that from the document if you want it to remember what directory you last saved your files in.