Geek Answers Handbook

How to insert d3JS javascript file into R Shiny for drawing for Force Network graph?

I am trying to create a brilliant application that displays a complex network graph that I encoded in d3JS. This goes beyond what I can do for the networkD3 R package I have tried. Instead, I want to include in my high user interface .js file that handles the display, and this is where I get lost.

To keep things simple, consider the simplest power network diagrams adapted from here: http://bl.ocks.org/sathomas/11550728 If someone can show me how to bring the SimpleFN.js file (see below) with an ui example. R and server.R, I could then extend the approach to my more complex example. I know how to bring a style.css file. Also not shown is a link to the d3.min.js library ( http://d3js.org/d3.v3.min.js ), which I also know how to link to.

I know what you say: "This is not a jet schedule! Why are you worried?" I'll get there, believe me. :)

Any help with this very basic example would be greatly appreciated!

Hooray!

Tim

NOTE. Cross mail for a brilliant Google group that hasn't been answered to date.

Style.css file:

.node {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 2px;
}

.link {
    stroke: #777;
    stroke-width: 2px;
}

SimpleFN.js file:

var width = 640,
    height = 480;

var nodes = [
    { x:   width/3, y: height/2 },
    { x: 2*width/3, y: height/2 }
];

var links = [
    { source: 0, target: 1 }
];

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .links(links);

force.linkDistance(width/2);

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('circle')
    .attr('class', 'node');
force.on('end', function() {
    node.attr('r', width/25)
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; });
    link.attr('x1', function(d) { return d.source.x; })
        .attr('y1', function(d) { return d.source.y; })
        .attr('x2', function(d) { return d.target.x; })
        .attr('y2', function(d) { return d.target.y; });
});
force.start();
+1
1

d3.min.js, style.css SimpleFN.js , ui.R server.R, :

ui.R

library(shiny)

shinyUI(fluidPage(tags$head(includeScript("d3.min.js")),
                  includeCSS('style.css'),
    mainPanel(uiOutput("chart"))
    ))

server.R

library(shiny)

shinyServer(function(input, output) {
  output$chart <- renderUI({
    includeScript('SimpleFN.js')
  }) 
})

. SimpleFN.js script ui.R, , .

+2

More articles:


All Articles