Quartz Things

The Quartz Things Team is Herman Wong, Zach Seward, David Yanofsky, and Nikhil Sonnad. Follow all of our work at http://qz.com/re/quartzthings/

This is how a global focused business news website covers the United States’s presidential election

The decision for how to cover election night at Quartz was an exercise in balancing our ambition for mind-blowing greatness with our mission statement of providing answers to “knotty questions of seismic importance to business professionals.” We’re also a mobile-first shop.

The three of us come from much, larger, organizations and are well versed in the efforts of other organizations covering election night. We knew our readers were not expecting the same type of coverage from us, both because of our global business purview as well as our smaller size, but we felt we had to do something.

We knew that we needed to show an updating tally of the Electoral College and that doing this through a dynamic and interactive system like other outfits do wasn’t worth it for us.

We decided to create a static graphic of the results and then update and upload it as often as possible.

I fired up Illustrator and threw together what eventually became this.

After seeing it and thinking through the logistics of our coverage, we realized that we wanted a similar image showing the results in the states that would determine the election, both individually and in aggregate.

We could then take any one of these graphics and post them to our facebook page, or tweet them.

The pivotal states graphic had the electoral college results, and the addition of the status of 9 close state races.

The state status template showed the present electoral college results, and the status of that state, which had three possible…states.

This left us with the leader board, the leader board + pivotal states, and the 9 pivotal states each with 4 possible states. If we going to pre-create all of them it would be at least 38 different graphics, each needing to update with the current Electoral College totals.

We didn’t do that because that would be crazy.

I fired up Illustrator and made 3 graphics, each in their own art-board. I then duplicated the state result art-board 8 times using the seemingly everywhere alt-drag technique. Swapped out the state shapes, updated the electoral values, tested some different colors and named every art-board by the state name.

I went from this test document 

to this working document.

Now we can script this.

Adobe provides a scripting interface and IDE for it’s products called ExtendScript toolkit which allows you to manipulate their software’s objects and interfaces using “javascript.”

A half day of ugly code and a handful of ActionScript 2.0 PTSD flashbacks later, we had a script that would update all of the values, copy, and colors as appropriate when we updated the vote totals.

We then set the script to save out each art-board to a folder inside of the dropbox our newsroom shares, making them available to anyone who wanted to use them nearly instantly.

All that was needed was to update the values in the script and run it, over and over and over and over again until we had a winner.

- David Yanofsky

View the code on github

Development Time: 1 day
Expected Life: 1 day