2

I am trying to build a simple htmlwidget that makes a bar graph using D3 and R. I have setup a gitHub with my code and put together a markdown file with the necessary commands to recreate my workflow when creating the widget. I am not sure if I have a syntax error, or just a problem with my process in general?

I ask because although the code runs, it does not produce an output image in RStudio's viewer. I am hoping that perhaps someone who has experience with D3, htmlwidgets, JavaScript and R can help me figure out what is going wrong with this. Any insights are always greatly appreciated.

Thank you, Nathan

Link: https://github.com/ngfrey/d3BarGraph

Update: I have...

    1. Installed the latest version of HTMLWidgets from GitHub
      1. Fixed the problem with my D3 library not being an actual JavaScript document. Good catch timelyportfolio
      2. Attempted to create this project as a minimal example, however, I do not know how to further minimize my d3BarGraph JavaScript file.
      3. Thanks to timelyportfolio, I think the problem is within the d3BarGraph.js file.
      4. Specifically, how I am binding the data to the instance. Within the HTMLWidgets.widget() function's renderValue section.
      5. I do not see the option to inspect the element when right-clicking in RStudio's Viewer panel. Does this mean nothing is being returned?
      6. I have posted the code I am suspicious about below.
      7. Again, thank you everyone for taking the time to help

Here is the HTMLWidgets.widget part of my code. 

HTMLWidgets.widget({

  name: 'd3BarGraph',

  type: 'output',

  //renderOnNullValue: true,

  initialize: function(el, width, height) {

    var svg =  d3.select(el).append("svg");
    svg
    .attr("width", width)
    .attr("height", height);

    //create barD3 instance

    return barD3().width(width).height(height).svg(svg); //passing the svg obj & options to the barD3 function.

  },
    resize: function(el, width, height, instance) {

    //var svg = instance.svg;
    var svg = d3.select(el).select("svg");
    svg
    .attr('width', width)
    .attr('height', height);

    instance.width(width).height(height).svg(svg).resize();
  },

  renderValue: function(el, params, instance) {
   // instance.lastValue = params;

    var data = HTMLWidgets.dataframeToD3(params.data);

   instance=instance.svg(svg).data(data);

   //var data = [8,16,10,18,19,4,12,18,12,11,19,11,15,13,5];

   d3.select(el)
    .call(instance);

   //Time for the barD3 function
   return barD3().width(width).height(height).svg(svg);
  }



});

I have also updated my GitHub project. I'd love to hear people's comments. Best, NF

nate
  • 1,172
  • 1
  • 11
  • 26
  • Firstly, you need to post your code here in the form of a [minimal, reproducible example](http://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example/5963610). Secondly, try updating `htmlwidgets`. Installing it from GitHub instead of CRAN fixed a similar issue for me. – alistaire Feb 11 '16 at 22:59
  • I'll take a look, but right-click + inspect in RStudio viewer will reveal developer tools which will show you if there are errors. Also, does the d3 code work outside of htmlwidgets? I assume you are doing this as a learning exercise. If not, there are lots of ways to make bar graphs with htmlwidgets. – timelyportfolio Feb 12 '16 at 02:39
  • 1
    Your d3 is not javascript https://github.com/ngfrey/d3BarGraph/blob/master/inst/htmlwidgets/lib/d3-3.5.2/d3.min.js. It should look like https://github.com/juba/scatterD3/blob/master/inst/htmlwidgets/lib/d3-3.5.6.min.js. I would encourage you to get some working d3/javascript prior to making a htmlwidget. – timelyportfolio Feb 12 '16 at 02:52
  • I'm going to work on this all today, using the latest version of htmlWidgets form GitHub. I have been following juba's example, however I will be sure to have a working javascript function before trying to get the figure to work in R. This is a learning exercise. 100%. Afterwards, I will try to reframe my question in a minimally reproducible example. Thanks everyone for getting back to me so quickly. I'll edit my question once I have done the necessary work. --NF – nate Feb 12 '16 at 20:35
  • I have updated my post as per your comments. I still do not get figure output in the viewer. – nate Feb 12 '16 at 23:40

1 Answers1

1

I was able to solve this problem. I have posted a working version on GitHub. The biggest help for me was time away from the project. I also have used more "boiler plate" type code from jcheng5's bubbles example. Please see the Working_Project link for code.

Again, thank you to everyone for sharing your thoughts and helping. Best, NF

nate
  • 1,172
  • 1
  • 11
  • 26
  • Can you please take a look at this question? https://stackoverflow.com/questions/65606653/r-saving-multiple-html-widgets-together thanks! – stats_noob Jan 07 '21 at 05:47