rd3.jsr2d3

Use R data.frame object in d3.js using r2d3


I'm trying to understand how an R data frame is passed to a d3.js script using the package r2d3. An extension of the r2d3 bar chart example to access variables in data.frame object would be helpful.

R code:

library(r2d3)
data <- data.frame(nums = c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20))
r2d3(data, script = "test.js")

js code:

var barHeight = Math.floor(height / data.length);

svg.selectAll('rect')
  .data(data.nums)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');

Error:

Error: svg.selectAll(...).data(...).enter is not a function in (test.js#5:4)
TypeError: svg.selectAll(...).data(...).enter is not a function

Solution

  • This error occurs because data.nums is undefined.

    Your data variable is not an object containing an array as follows:

    var data = {
          nums: [0.3,0.6,0.8,0.95,0.40,0.20]
        }
    

    But, rather an array containing objects:

    var data = [
      {nums:0.3},
      {nums:0.6},
      {nums:0.8},
      {nums:0.95},
      {nums:0.40},
      {nums:0.2}
    ]
    

    To keep you r side code, we just need to pass the data array itself to selection.data() and access the nums property of each datum:

    var barHeight = Math.floor(height / data.length);
    
    svg.selectAll('rect')
      .data(data)
      .enter().append('rect')
        .attr('width', function(d) { return d.nums * width; })
        .attr('height', barHeight)
        .attr('y', function(d, i) { return i * barHeight; })
        .attr('fill', 'steelblue');