rCharts F1

This is a rCharts recreation of the Formula 1 Points Sankey Diagram in this fine post. See this post for more details on how to make d3.js Sankey Diagrams in R with rCharts.

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="https://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="https://aozora.github.io/bootplus/assets/css/docs.css">
    <link rel='stylesheet' href='https://timelyportfolio.github.io/rCharts_d3_sankey/css/sankey.css'>
    
    <script src='https://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='https://timelyportfolio.github.io/rcharts_d3_sankey/js/sankey.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chart2544fc8157a' class='rChart nvd3Plot rCharts_d3_sankey'></div>
          <br/>
<pre><code class='r'>#another one from Tony Hirst
#post at https://blog.ouseful.info/2012/05/24/f1-championship-points-as-a-d3-js-powered-sankey-diagram/
#data at https://views.scraperwiki.com/run/ergast_championship_nodelist/?
#get source from original example
#this is a JSON, so will need to translate

#expect most data to come straight from R
#in form of source, target, value

links &lt;- matrix(unlist(
  rjson::fromJSON(
    file = &quot;https://views.scraperwiki.com/run/ergast_championship_nodelist/?&quot;
  )$links
),ncol = 3, byrow = TRUE)

nodes &lt;- unlist(
  rjson::fromJSON(
    file = &quot;https://views.scraperwiki.com/run/ergast_championship_nodelist/?&quot;
  )$nodes
)

#nodes are 2 columns but in vector form
#just get the name and ignore id
nodes &lt;- nodes[seq(1,length(nodes),by=2)]

#convert to data.frame so souce and target can be character and value numeric
links &lt;- data.frame(links)
colnames(links) &lt;- c(&quot;source&quot;, &quot;target&quot;, &quot;value&quot;)
links$source &lt;- sapply(links$source, FUN = function(x) {return(as.character(nodes[x+1]))}) #x+1 since js starts at 0
links$target &lt;- sapply(links$target, FUN = function(x) {return(nodes[x+1])}) #x+1 since js starts at 0

#now we finally have the data in the form we need
sankeyPlot &lt;- rCharts$new()
sankeyPlot$setLib('.')
sankeyPlot$setTemplate(script = &quot;layouts/chart.html&quot;)

sankeyPlot$set(
  data = links,
  nodeWidth = 15,
  nodePadding = 10,
  layout = 32,
  width = 700,
  height = 400,
  units = &quot;points&quot;
)

sankeyPlot
</code></pre>
</div>
        </div>
      </div>
    </div>

params.units ? units = " " + params.units : units = "";

//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"),    // zero decimal places
    format = function(d) { return formatNumber(d) + units; },
    color = d3.scale.category20();

//now get nodes based on links data
//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
                .key(function (d) { return d.name; })
                .map(nodes));

//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
    links[i].source = nodes.indexOf(links[i].source);
    links[i].target = nodes.indexOf(links[i].target);
});

//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
    nodes[i] = { "name": d };
});

sankey
  .nodes(nodes)
  .links(links)
  .layout(params.layout);
  
var link = svg.append("g").selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", path)
  .style("stroke-width", function (d) { return Math.max(1, d.dy); })
  .sort(function (a, b) { return b.dy - a.dy; });

link.append("title")
  .text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

node.append("rect")
  .attr("height", function (d) { return d.dy; })
  .attr("width", sankey.nodeWidth())
  .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
  .style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
.append("title")
  .text(function (d) { return d.name + "\n" + format(d.value); });

node.append("text")
  .attr("x", -6)
  .attr("y", function (d) { return d.dy / 2; })
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .attr("transform", null)
  .text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
  .attr("x", 6 + sankey.nodeWidth())
  .attr("text-anchor", "start");

// the function for moving the nodes
  function dragmove(d) {
    d3.select(this).attr("transform", 
        "translate(" + (
                   d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
                ) + "," + (
                   d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
                ) + ")");
        sankey.relayout();
        link.attr("d", path);
  }
</script>
    
  </body>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script 
    src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
  </script>
  <script>
    var pres = document.getElementsByTagName("pre");
    for (var i=0; i < pres.length; ++i) {
      pres[i].className = "prettyprint linenums";
    }
    prettyPrint();
  </script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://timelyportfolio.github.io/rCharts_d3_sankey/js/sankey.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js to a secure url

https://d3js.org/d3.v3.min.js

https://timelyportfolio.github.io/rCharts_d3_sankey/js/sankey.js

https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js