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

Leave a Reply

Your email address will not be published. Required fields are marked *