How To Build An Interactive Electoral Map

The Primary Elections Map I refer to throughout this article is located here. You should be able to make something like this (or better) by the end of this article.

Traditionally, making interactive graphics for the web is a complex process that goes something like this: A designer takes an image and creates an image map using Dreamweaver or a specific image map tool. The image map, which is simply a set of tagged coordinates, allows a specific section of the original image to act as a hyperlink. This allows a piece of the whole (a state within the country image, for example) to be independently clickable. Using some coding magic, the independent sections can be made to change color on mouseover, take you to a new page when clicked, and a whole host of other things. This is a lot of work for someone trying to put up a quick interactive flowchart, map, or floorplan.

I was able to use SmartDraw and MapsAlive to automate the process somewhat. It wasn't painless, but it was a lot easier than doing it all by hand. Both products have free trials so you can test this out yourself. Chances are, you can find your way to SmartDraw's website (hint: there's a link in the right sidebar). MapsAlive is located here.

How To 

First, I imported an image of the US (below) into MapsAlive followed by uploading the corresponding image map of the 50 states. I have attached the 50 states image map to this post since that is not automated by either product. If anyone knows of a product that exports both a complex image and its image map, let me know.

Once that was done, I updated the layout and appearance of the map and the corresponding "markers" - the individual clickable areas (in this case, the states). I differentiated the states that had already held their primary elections by making them different color. On mouseover, each state is represented by a "slide" that shows up below the map. This was the basic slide image for a race that hadn't finished:

Finally, I supplemented each state slide with some basic textual information about the date of the primary and the winners' names.  Here's a screenshot of the MapsAlive interface once most of the information was filled in:

MapsAlive also hosts the map (or "tour", as they call each project) on their own servers. You can either embed the tour on your own website or visit the direct link. For example, the direct link to my Primary Map is here.

Conclusion

It's still not point-and-click simple to create a high-quality electoral map from scratch. Using smaller markers, like stars or circles, would eliminate the need for image maps, greatly decreasing the difficulty level, but would eliminate the elegance of pointing the mouse anywhere on the state to get a result. That being said, using this method still beats anything else out there. And of course, there are applications for this method beyond simple maps.

If you have a better way of creating interactive graphics, or even a spiffy example, leave a comment.