rstudio / r2d3

R Interface to D3 Visualizations
https://rstudio.github.io/r2d3
Other
516 stars 105 forks source link

Render console.log() to browser javascript console instead of visualization? #60

Open ssp3nc3r opened 5 years ago

ssp3nc3r commented 5 years ago

JavaScript console output from r2d3 is rendered directly into the RStudio viewer visualization instead of the javascript console. See documentation.

This also seems to be the behavior when

r2d3::r2d3(..., viewer = 'browser')

I.e., the console.log() does not output to the console even in the browser. But sometimes I'd like to inspect objects written to the browser console because they are not text.

Is there a clean way to change this behavior, for console.log() information in an r2d3 D3.js to be sent to the browser console?

javierluraschi commented 5 years ago

This should work correctly, console.log() gets printed to the browser console and also in the actual visualization.

For instance, consider the following example, notice the console.log() statement:

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
//
// r2d3: https://rstudio.github.io/r2d3
//

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

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

This code triggers both, an update in the console and the visualization, notice the test message:

r2d3-console-log

Could you perhaps provide the sources of your visualization since is probably specific to that particular code or environment?

ssp3nc3r commented 5 years ago

Yes, your example does write "test" to the console. But if the output is not text, then it just has a generic return. To see this, let's simplify your code above:

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
//
// r2d3: https://rstudio.github.io/r2d3
//

var mysvg = svg.selectAll('rect').data(data);
console.log(mysvg);

which only sends the console,

[object Object]

I cross-posted on stack overflow, and someone posted the following workaround: including,

console = d3.window(svg.node()).console;

as the first line of the javascript gives an inspectable object, where you can expand its hierarchy like so,

Screen Shot 2019-04-17 at 3 39 37 PM

Being able to inspect the actual objects like this can be very useful.

shmoss commented 2 years ago

Did this bug ever get fixed? This issue is kind of a deal-breaker for being able to effectively use r2d3. I've documented the issue here, if it's helpful:

https://stackoverflow.com/questions/69859445/de-bugging-r2d3-r-in-inspector-cant-view-data-in-console

Thank you!