Sankey Plot of Grant Funding

<!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://getbootstrap.com/2.3.2/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: 500px;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chart4052b382652' class='rChart rCharts_d3_sankey'>
            </div> 
          <br/>
<pre><code class='r'>grant_id &lt;- 1:100
funding_agency &lt;- sample(rep(c(&quot;NIAID&quot;, &quot;NIGMS&quot;, &quot;NHLBI&quot;, &quot;NCI&quot;, &quot;NINDS&quot;), 20))
study_section &lt;- sample(rep(
  c(&quot;Tumor Cell Biology&quot;, &quot;Tumor Progression&quot;, &quot;Vector Biology&quot;, 
    &quot;Molecular Genetics&quot;, &quot;Medical Imaging&quot;, &quot;Macromolecular Structure&quot;,
    &quot;Infectious Diseases&quot;, &quot;Drug Discovery&quot;, 
    &quot;Cognitive Neuroscience&quot;, &quot;Aging and Geriatrics&quot;), 10
))
total_cost &lt;- rnorm(100, mean = 30000, sd = 10000)

# source, target and value have to be the names
d &lt;- data.frame(
  id = grant_id, 
  source = funding_agency, 
  target = study_section, 
  value = total_cost
)
require(rCharts)
sankeyPlot &lt;- rCharts$new()
sankeyPlot$setLib('https://timelyportfolio.github.io/rCharts_d3_sankey')
sankeyPlot$set(
  data = d,
  nodeWidth = 15,
  nodePadding = 10,
  layout = 32,
  width = 750,
  height = 500,
  labelFormat = &quot;.1%&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();

if(params.labelFormat){
  formatNumber = d3.format(".2%");
}

//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