How a genius election-related graphic came together The other night, I posted this really amazing New York Times graphic breaking down the numerous roads to Electoral College victory Obama and Romney can take. Think the graphic was cool? Now here’s how they did it. In the words of the Times’ very own Mike Bostock: The hard part of this graphic, implementation-wise, is the animated transition as you flip states. Although this is superficially similar to collapsible interactive trees I had implemented previously, it turned out to be more challenging due to the pruning below decision nodes. To assist my thinking, I sketched out a sample tree with eight different interactions and the corresponding animations. With examples, it was possible to generalize the behavior of the transitions and start the implementation. Which road do you think the Electoral College is going to take? — Ernie @ ShortFormBlog
Pop-upView Separately

How a genius election-related graphic came together

The other night, I posted this really amazing New York Times graphic breaking down the numerous roads to Electoral College victory Obama and Romney can take. Think the graphic was cool? Now here’s how they did it. In the words of the Times’ very own Mike Bostock:

The hard part of this graphic, implementation-wise, is the animated transition as you flip states. Although this is superficially similar to collapsible interactive trees I had implemented previously, it turned out to be more challenging due to the pruning below decision nodes. To assist my thinking, I sketched out a sample tree with eight different interactions and the corresponding animations. With examples, it was possible to generalize the behavior of the transitions and start the implementation.

Which road do you think the Electoral College is going to take?

— Ernie @ ShortFormBlog

Source: source.mozillaopennews.org

192 Notes/ Hide

  1. divinety reblogged this from election
  2. eraldodeliliers reblogged this from election and added:
    The hard part of this graphic, implementation-wise, is the animated transition as you flip states. Although this is...
  3. vegetarian-dinosaur reblogged this from election
  4. colorfulldeath reblogged this from election
  5. codename--dutchess reblogged this from election and added:
    THIS IS AMAZING! :D this is what graphic design is all about in my opinion. turning raw information into something...
  6. rubyvroom reblogged this from election and added:
    This is a pretty neat (and reassuring) graphic.
  7. mamayoda reblogged this from election
  8. perfunctoryprofundities reblogged this from election
  9. desivee13 reblogged this from election and added:
    Pretty cool
  10. modeseventyeight reblogged this from election
  11. book1chp1 reblogged this from election
  12. samlockard reblogged this from election
  13. pattista reblogged this from election
  14. penneay7 reblogged this from election
  15. intervistato reblogged this from election
  16. hotelromeo reblogged this from election and added:
    This is pretty neat and definitely fun to play with right after you’ve voted!
  17. masonmk8 reblogged this from shortformblog
  18. yogurtpockets reblogged this from election
  19. carisbrookdays reblogged this from election and added:
    Don’t quote me on this, but...electoral college is even enough for me
  20. gradycarter reblogged this from shortformblog
  21. elestoque reblogged this from shortformblog and added:
    This is only the coolest graphic ever, and an incredibly interesting way to break up the electoral votes per candidate.
  22. katethefirstmate reblogged this from election and added:
    So I know it doesn’t look it from the rest of my tumblr, but, as a Poli-Sci/Econ/Math major, this election has let me...
  23. hayesdavis reblogged this from shortformblog and added:
    In case anyone wasn’t sure that Mike Bostock is a freaking genius.