Examples using multiple datasets

[shotchki]

Does r2d3 support the production of visualizations which require more than one dataset? e.g. force graphs, which require nodes and links. The package appears to only accept one entry into the data argument, which must always be referred to as "data" in the .js script, e.g.

svg.selectAll("circle.nodes")
   .data(data)
   .enter()
   .append("svg:circle")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
   .attr("r", "10px")
   .attr("fill", "black")

I have tried various means of creating a nested dataset, which I can then call in the .js script, and even filtering the data within the .js script; this works if I write an html file, but not in R using the r2d3 command.

If r2d3 does support the production of visualizations which require more than one dataset, please can you provide an example in the gallery, such as the forcegraph, that actually converts r dataframes, rather than reading in pre-existing .json files?

[jjallaire]

The data argument can be anything you want it to be. See the documentation here on custom data structures: https://rstudio.github.io/r2d3/articles/data_conversion.html

[shotchki]

Thanks for the link. However, r2d3 doesn't appear to be interpreting the data as I'd expect. I shall try to provide a minimum reproducible example:

I've included text files with the contents of my dataframe (data.txt), the js.script file (network4_js.txt) and a short R script with my data_to_json function and r2d3 command (r2d3_github.txt). When I run these in RStudio, the viewer returns a blank screen.

What I would expect is to get a layout of rectangles with blue nodes, as I get when I open an html file containing the "same" d3 (network4_html.txt). Please note, var data is copy and pasted from the R studio console by printing data_to_json(data).

Any ideas why the two don't generate the same output?

data.txt
network4_js.txt
r2d3_github.txt
network4_html.txt

[jjallaire]

There's probably a JavaScript error happening somewhere along the line. Try using the browser debugging tools to run that down.

[shotchki]

I don't really know how to do that, but I've attached an image of the Web Inspector in case it gives you any clues.

Interestingly, if I set viewer = browser, I can get the output in Chrome to match that of the html, but I've noticed its not right; the data isn't filtered out into nodes and links in the .js script - everything is plotted as a node. I think this is a symptom of me trying to mung two tidy dataframes together to get it through the data argument, and then split that into two arrays in the .js script. Ideally, I'd put both dataframes in the data argument, and they'd come out as separate arrays that I can reference in a .js script; guidance on how to do this would be very much appreciated.

[emilmahler]

@shotchki did you solve this? I am having the same problem with a graph network.

[shotchki]

I'm afraid not. I put that project on the back burner in the hopes I'd get some more guidance/inspiration. Currently thinking about re-writing it in igraph & visNetwork.

[agricolamz]

I had the same problem, but I think I figured something out.

Here is an .Rmd that works for me. I hope it helps.

[shotchki]

Thank you for your comment. Unfortunately, it 's not using two variables from the same dataframe, but using multiple dataframes that's the issue.

[jlfsjunior]

@shotchki In network4_js.txt:

svg.selectAll(".line")
   .data(links)
   .enter()
   .append("line")
   .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 })
   .style("stroke", "rgb(6,120,155)");

d.source and d.target are values, not nested objects. Perhaps the best alternative in your case is to create the nested object that you need in R using lists and pass it as data. Something like:

data <- list(
  nodes = list(
    list(name = "K", value = 10, color = "#fff", ...),
    list(...),
    ...
  ),
  links = list(
    list(source = list(x = 1, y = 2), target(x = 3, y = 4), value = 10), 
    list(source = list(x = 21, y = 22), target(x = 23, y = 24), value = 20), 
    ...
  )
)

Then you can just refer to them in js as data.nodes and data.links (no need to filter).

[nvelden]

@shotchki

Very late reply but I tried your solution and I noticed that it only works if you use your own data_to_json function:

    data_to_json <- function(data) {
        jsonlite::toJSON(data, dataframe = "rows", auto_unbox = FALSE, rownames = TRUE)
    } 

 data <- list("df1" = df1, "df2" = df2)

 r2d3(
            data = data_to_json(data),
            script = "graph.js"
        )

Then you can reference using data.df1 and data.df2