“Bring Up State” animation effect with D3

*Check out our What’s Your Vote Worth? map to see this effect.

Tired of falling down into web maps? Zooming, zooming, and zooming in from outer space all the way down to the Earth’s surface got you feeling sad?

Here’s another idea: demand that geographic features come up to you. Web maps typically require you to zoom in and may give the sensation of “falling down” or “diving in” towards the Earth’s surface. Why not make this everyday interaction become more user-focused?

In this JavaScript code sample written with D3, called “Bring Up State”, we show how to serve (provide, give, deliver, etc.) a state polygon that has been clicked on to give it full focus. This is, perhaps, the exact opposite from expecting and assuming that your audience will freely zoom in as with traditional web map experiences. Our sample goes one step further to fade away the remaining states in the background to alleviate visual clutter and bring all attention to the current state. Take a look at the code to see how it is all glued together.

Just click—no need to fly down closer to the Earth—and the visualization will do the heavy lifting of bringing up the geographical feature directly to you.

screenshot of D3 code sample

Check out the code and live demo for this D3 block.

6 (Really 3) steps to Create an Antique-looking Concentric Shoreline Effect in Adobe Illustrator

6 (Really 3) steps to Create an Antique-looking Concentric Shoreline Effect in Adobe Illustrator

*This is a re-post from my former site*

I’m currently working on a map that I’m intending to incorporate Victorian (and maybe a little bit of steampunk) visual influences. For inspiration, I was initially looking at a lot of beautiful Victorian-era (roughly 1830s-1900, some say a little later) sketches of contraptions, including some diagrams of intricate devices that went nowhere.  Then I started to investigate common styling techniques used in maps that were made during the Victorian era. The USGS Historical Topo Map Explorer was a great resource for this investigation. I really wanted to incorporate the sort of concentric shoreline effect that was evident in all the earliest USGS topos, and elsewhere. Check out these cool mid-late 1800s maps in the slideshow that use this effect: