Fork me on GitHub

NY Times 512 Paths to the White House

Recreated in R with rCharts and slidify


I claim absolutely no credit for this visualization, which I consider one of the most instructive I have ever seen. If anybody believes this to be not fair use, I will take it down immediately.

We will provide a detailed tutorial below to go from the NYT feature to something we can render from R, but for now you can just download the rCharts_512paths directory from Github. Set your working directory (setwd) to your download location. Then simply run the following couple lines of code in R.

#if you have not installed slidify, slidifyLibraries, or rCharts
#require(devtools)
#install_github('slidify', 'ramnathv', ref = 'dev')
#install_github('rCharts', 'ramnathv')
#install_github('slidifyLibraries', 'ramnathv', ref = 'dev') # optional

#setwd("rCharts_512paths")

require(rCharts)
#get data from downloaded NYT tsv and inject in through params
data <- read.delim(file = "data/states.tsv")
p1 <- rCharts$new()
p1$setLib('./libraries/widgets/x512paths')
p1$field('lib', 'x512paths')
p1$set( data = toJSONArray( data ) )
p1

Florida is a Must Win for Romney

If Mr. Romney loses Florida, he has only one way to victory: through all the other battleground states. He has led most polls there, however, and is the favorite. If Mr. Romney wins Florida, he has 75 paths open to him.

Ohio: Obama's Firewall

Of the three largest battleground states, Mr. Obama has the largest lead in Ohio – partly because of a strong local economy and the auto industry bailout. If he loses here, it's likely he will trail in Florida and North Carolina too. Losing all three leaves him with only 14 ways to win.

Times's Battlegrounds

Nine states are shown above, but The Times rates only seven of them as battlegrounds. If Nevada goes to Mr. Obama and North Carolina goes to Mr. Romney, as The Times’s ratings suggest, the president will have four times as many paths to victory as his opponent.

Edge of Your Seat Possibilities

There are five paths to a tie. In this case, the newly elected House of Representatives would select the president (likely Mr. Romney) and the Senate would select the vice president (possibly Joseph R. Biden Jr.).



Steps to Accomplish

  1. Create a new directory x512paths anywhere you like. We choose x512paths, since shiny does not like paths that start with a number. Within this new x512paths, set up two subdirectories: external and layouts.
  2. Save iframe.html from the NYT into the new x512paths/layouts directory from step 1. This isolates the visualization, so we can use it for our template.
  3. Rename iframe.html to chart.html.
  4. Open chart.html from step 2 in a text editor.
  5. Copy everything between the tags into a new text file that we will name nyt_512.css and save in x512paths/external created in step 1.

  6. Delete everything in chart.html except for the portion 

       
  div class="g-controls"    
  ...    
    function diagonal(d) {    
    var x0 = d.source.x, y0 = y(d.source.depth),    
        x1 = d.target.x, y1 = y(d.target.depth);    
    if (x0 < x1) x0 += w(d.target.probability) / 2;    
    else if (x0 > x1) x0 -= w(d.target.probability) / 2;    
    return "M" + x0 + "," + y0    
        + "C" + x0 + "," + (y0 + y1) / 2    
        + "," + x1 + "," + (y0 + y1) / 2    
        + "," + x1 + "," + y1;    
    }    

  })();    
  \<\/script\>

  7. Change the line

    d3.tsv("states.tsv", function(error, states) {

    to 

    d3.tsv("http://timelyportfolio.github.io/rCharts_512paths/data/states.tsv", function(error, states) {

  8. Save d3.v3.min.js into x512paths/external created in step 1.

  9. Create a new text file that we will call config.yml and save in the x512paths from step 1.

      
x512paths:    
    css: [external/nyt_512.css]    
    jshead: [external/d3.v3.min.js]    
    cdn:    
      jshead:    
        - http://d3js.org/d3.v3.min.js

  10. Now is a good time to check your directory structure. It should look like the picture below.
    picture of directory structure

  11. Try to rerun the code above in R, but change the

p1$setLib('./libraries/widgets/x512paths')

to

p1$setLib( 'pathtoyournewdirectory/x512paths' )

so your couple of lines of code should look something like this.

require(rCharts)
#get data from downloaded NYT tsv and inject in through params
data <- read.delim(file = "data/states.tsv")
p1 <- rCharts$new()
#make sure to change this path to your newly created masterpiece
p1$setLib('pathtoyournewdirectory/x512paths')
p1$field('lib', 'x512paths')
p1$set( data = toJSONArray( data ) )
p1

As a disclaimer, I made some unnecessary adjustments not documented above. These were primarily for politeness. The only changes to the code remove dependencies on NYT for the d3 and svg/png graphics. Also, as an illustration of how we can do this, data is provided from R rather than the original d3.tsv method. If you are interested in these changes, feel free to explore the code.


Thanks to: