It’s been 40 years since the United States Supreme court passed Roe V. Wade. On behalf of this anniversary we set out to visualize the past two years of abortion related regulation—135 new laws in 30 states. That’s the most laws passed in a concentrated time since 1973.
The original idea was to “map out” the laws… but mapping doesn’t mean it has to BE a map. Matt Ericson, deputy graphics director at the NYTimes has written a great article about this very topic. The most convincing reason not to do a traditional map for this set of data is that we’re limited to 30 states—so any geographical patterns we’d hope to see on the continental U.S. had lots of blank areas interrupting the landscape.
It was important to us that people could both explore categorical trends in legislation and geographical patterns. Since the map above only does it one way we tried dividing each law into mini circle charts representing our six categories of laws, but that made it very hard to compare the quantity of laws state to state.
Terrible. But both worth trying.
Following the lead of the Guardian U.S.’s gay rights map from last year we broke broad regions into a circle. Dividing first into Midwest, South, West, and North then slicing these portions into finer slivers for states.
Then, for each law we assigned a geometric symbol representing the kind of regulation passed and skewered these points state by state on a line, creating micro bar charts on the concentric circles. One symbol=one law.
For the printed version of the graphic we annotated the data visualization with the most interesting legislation. For the interactive version we set out to do something similar— explore the most interesting laws using a set of tabs that categorize each trend. It felt natural walking someone through the data in a few steps rather than leaving them to weed their way through 135 abortion restrictions on their own.
But that was easier said than done, here’s what happened when Allison first tried to build a stepper on top of the graphic:
A little jiggling things around and it was back on the page, thankfully, but this was also our first experiment in exporting the graphic from Illustrator as an SVG file, which is an AWESOME alternative to a dead .jpg. We could manipulate each “node” (the little symbols on the graphic). After seeing the chart in it’s full interactive form… it felt… incomplete. You can’t help but want to roll over each dot and find out what law it represents. So, we set out to do just that. the six different categories of restrictions.
Exporting the graphic as an SVG from Illustrator is actually really easy (more on that here) and gives you something that looks like this:
The code shows how every line, word, and polygon from Illustrator is drawn as a vector shape (rather than a pixel), and allows you to use JavaScript to manipulate each SVG object — in our case highlighting these “nodes” (the little symbols on the graphic) to show the most interesting data points at each step.It was a pain in the a$% assigning IDs to 135 nodes, but it was worth it in the end. Using the incredible Mr. Data Converter we were able to upload our excel sheet right in and get this awesomeness:
Those IDs correspond with the IDs of the nodes, allowing us to call on those IDs using javascript to and display the specific law with a little hovering action. It required quite a bit of extra work, but we knew people would want to be able to see what was happening in their own states and crazy places like Kansas and Arizona.
Roll overs, tabs, svgs, these are not breakthroughs in the world of interactive graphics but they are for us. Sure, I’d make the type size bigger, and rethink some of those symbols looking at it now but now is not a time for regrets. We’re super proud of this project, especially given the topic.
—jennifer + allison
![theatlantic:
Dear Romney Campaign, This Is How You Make a Venn Diagram
[Image: Upworthy]](http://24.media.tumblr.com/tumblr_m6pmsiIe9s1qcokc4o1_500.jpg "theatlantic:
Dear Romney Campaign, This Is How You Make a Venn Diagram
[Image: Upworthy]")
