Problems creating Sankey diagrams using d3.js (2) -

this continuation of previous question "problems creating sankey diagrams using d3.js (1)"

here i'm trying follow example posted timelyprtfolio @ http://timelyportfolio.github.io/rcharts_d3_sankey/example_build_network_sankey.html uses packages igraph , rcharts create sankey diagram template

the output running r script

./rcharts_d3_sankey-gh-pages/libraries/widgets/d3_sankey/layouts/chart.html

and resultant html is

<!--attribution: mike bostock https://github.com/d3/d3-plugins/tree/master/sankey mike bostock http://bost.ocks.org/mike/sankey/ -->  <script> (function(){ var params = {{{ chartparams }}};  params.units ? units = " " + params.units : units = "";  //hard code these make available var formatnumber = d3.format("0,.0f"),    // 0 decimal places     format = function(d) { return formatnumber(d) + units; },     color = d3.scale.category20();  if(params.labelformat){   formatnumber = d3.format(".2%"); }  var svg = d3.select('#' + params.id).append("svg")     .attr("width", params.width)     .attr("height", params.height);  var sankey = d3.sankey()     .nodewidth(params.nodewidth)     .nodepadding(params.nodepadding)     .layout(params.layout)     .size([params.width,params.height]);  var path = sankey.link();  var data = params.data,     links = [],     nodes = [];  //get source , target nodes //will reduce unique in next step //also links in object form data.source.foreach(function (d, i) {     nodes.push({ "name": data.source[i] });     nodes.push({ "name": data.target[i] });     links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] }); });   //now nodes based on links data //thanks mike bostock https://groups.google.com/d/msg/d3-js/pl297cftiqk/eso4q_ebu1ij //this handy little function returns distinct / unique nodes nodes = d3.keys(d3.nest()                 .key(function (d) { return d.name; })                 .map(nodes));  //it appears d3 force layout wants numeric source , target //so loop through each link replacing text index 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 make nodes array of objects rather 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); });  var node = svg.append("g").selectall(".node")   .data(nodes) .enter().append("g")   .attr("class", "node")   .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) .call(d3.behavior.drag()   .origin(function (d) { return d; })   .on("dragstart", function () { this.parentnode.appendchild(this); })   .on("drag", dragmove));  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");  // function moving 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> 

this throws error in javascript console "uncaught syntaxerror: unexpected token { timelyportfolio.html:8" referencing var params = {{{ chartparams }}};

timelyportfolio isn't sure might going wrong has made couple of suggestions on how improve custom template pain

again, insights me understand what's going wrong appreciated

many thanks

julian

i saw this. sorry late. {{{ }}} r package whisker based on concept of mustache templates. {{{ chartparams }}} filled r variable when run through rcharts. html not work standalone.