I'm still trying to get the chart that I created using rCharts into the slide deck of the slides. I tried to copy a script that creates rCharts to the slidify.Rmd file, but all I get is an empty slide.
Here is the .Rmd file:
--- title : Test Sankey subtitle : author : Matthew job : framework : io2012 # {io2012, html5slides, shower, dzslides, ...} highlighter : highlight.js # {highlight.js, prettify, highlight} hitheme : tomorrow # widgets : [d3_sankey] # {mathjax, quiz, bootstrap} mode : selfcontained # {standalone, draft} --- Slide 1 --- The graph should be on the next slide. --- <div id='sankey1' class='rChart d3_sankey'></div> <script> (function(){ var params = { "dom": "sankey1", "width": 960, "height": 500, "data": { "source": [ "a", "b", "c", "d", "e", "a", "d", "f", "e", "g", "h", "j", "j", "k", "l", "q" ], "target": [ "j", "d", "a", "q", "f", "k", "e", "g", "j", "e", "l", "c", "h", "b", "d", "a" ], "value": [ 8, 1, 4, 6, 2, 1, 1, 1, 6, 9, 2, 2, 4, 6, 9, 1 ] }, "nodeWidth": 15, "nodePadding": 10, "layout": 32, "id": "sankey1" }; 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%"); } 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 all source and target into nodes //will reduce to unique in the next step //also get 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 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); }); var node = svg.append("g").selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function (d) { return "translate(" + dx + "," + dy + ")"; }) .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 dx < 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(" + ( dx = Math.max(0, Math.min(params.width - d.dx, d3.event.x)) ) + "," + ( dy = Math.max(0, Math.min(params.height - d.dy, d3.event.y)) ) + ")"); sankey.relayout(); link.attr("d", path); } })(); </script>
When I compile the .Rmd file to R, I get the following output:
slidify("index.Rmd") processing file: index.Rmd |.................................................................| 100% ordinary text without R code output file: index.md Copying files to libraries/frameworks/io2012... Copying files to libraries/highlighters/highlight.js... Copying files to libraries/widgets/d3_sankey... [1] "index.html"
Any idea on what I'm doing wrong here? Thank you very much!