Shan had the idea to construct a human-readable sentence for the highlighted path, which served elegantly to explain how the graphic works.

Again, what you care about or this graphic is who wins, so the Voronoi is constructed using only decision nodes: the path to the outcome closest to the mouse is highlighted. The other technical detail worth mentioning is the invisible Voronoi overlay to improve mouseover interaction. Tom Suozzi, a former Democratic congressman, won a closely watched special House election to replace. (See my tutorial on object constancy for details.) It was really exciting to see it work the first time, especially for the more complicated transition flipping between the two parties! New York Third Congressional District Special Election Results. The technical crux was implementing the key function for the data-join correctly, so that parts of the tree are remapped correctly as you add and remove states. With examples, it was possible to generalize the behavior of the transitions and start the implementation. To assist my thinking, I sketched out a sample tree with eight different interactions and the corresponding animations. 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. The hard part of this graphic, implementation-wise, is the animated transition as you flip states. The static layout was therefore surprisingly simple (because of the existing D3 layout) the binary tree is computed recursively by summing the electoral votes for each path. The nodes are positioned using the Reingold-Tilford “tidy” algorithm, as implemented by D3’s tree layout. Shan and I frequently attempt competing ideas even if a concept lacks promise, we may learn something from it that can be used to improve the graphic.Ī question I often ask: what is the most salient aspect of the visualization? Is it the insight you were hoping to show, or is it merely some artifact of how the data was collected, formatted or laid out? In other words, are the key insights the most obvious? And, are there distractions or unnecessary elements that you can remove to accelerate understanding? It’s hard to predict what something will look like until you try, especially when working with data. More generally, iteration is about evaluation: figuring out what works and what doesn’t, and then brainstorming ideas for the next iteration. This is very helpful for showing previously-explored ideas and by extension the process leading to the current version. We use a git-backed preview server that allows us to share versioned previews of graphics (any commit, any fork) and get feedback. Change the president, the states won and the. Rapid iteration and feedback are essential to converging on a good design quickly fresh eyes offer critical perspective that is difficult to achieve solo. Create an alternate history with this 2020 interactive electoral map. Shan and I work out of the San Francisco bureau of The New York Times, but we are in constant contact with our esteemed colleagues in Manhattan.

Nytimes interactive election