javascriptrd3.jsr-markdownr2d3

Functions not recognised when using R2D3


I have similar code using just javascript which works fine, but when I try to run it from a flexdashboard using R2D3, additional functions included in scripts are not recognised.

I have simplified my code below to focus on the ScaleRadial function (which I include in the htmltools::tag$script) which produces the error TypeError: d3.scaleRadial is not a function.

I have a similar issue with d3.tip, but have not included the code for that.

I've tried everything I can think of but to no avail. Any help warmly welcomed.

enter image description here

dashboard.Rmd

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows

---


Tab 1
===================================== 
  <div id="map" style="width: 800px; height: 800px"></div>

  ```{r}

library(r2d3)
htmltools::tagList(
  htmltools::tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"),
  htmltools::tags$script(src = "https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js"),
  htmltools::tags$script(src = "https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js"),
)

r2d3(script = "bbmapchartSO.js")

```

bbmapchartSO.js

// set the dimensions and margins of the graph
var size = 800;
var margin = {top: 100, right: 0, bottom: 0, left: 0},
    width = size - margin.left - margin.right,
    height = size - margin.top - margin.bottom,
    innerRadius = 240,
    outerRadius = Math.min(width, height) / 2;   // the outerRadius goes from the middle of the SVG area to the border,

    var places = [
      {
          "id": 1,
          "value": 15
      },
      {
          "id": 2,
          "value": 50
      },
      {
          "id": 3,
          "value": 36
      },
      {
          "id": 4,
          "value": 65
      }]

  var mapCenter = new L.LatLng(52.482672, -1.897517);

  var map = L.map('map').setView(mapCenter, 15);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            dragging: false
            }).addTo(map);

    /* Initialize the SVG layer */
    map._initPathRoot();

    /* We simply pick up the SVG from the map object */
    var leaflet_svg = d3.select("#map").select("svg"),
        central_map_svg = leaflet_svg.append("g"),
      chart_svg = leaflet_svg.append("g")
        .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

  function plotBBChartOnMap(data) {

  // X scale
  var x = d3.scaleBand()
      .range([0, 2 * Math.PI])    // X axis goes from 0 to 2pi = all around the circle. 
      .align(0)                  // This does nothing
      .domain(data.map(function(d) { return d.id; })); // The domain of the X axis is the list of Stations.

  // Y scale outer variable
  var y= d3.scaleRadial()
      .range([innerRadius, outerRadius])   // Domain will be define later.
      .domain([0, 68]); // Domain of Y is from 0 to the max seen in the data

  // Add the bars
  chart_svg.append("g")
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(y(0))
          .outerRadius(function(d) { return y(d['value']); })
          .startAngle(function(d) { return x(d.id); })
          .endAngle(function(d) { return x(d.id) + x.bandwidth(); })
          .padAngle(0.02)
          .padRadius(innerRadius))
}

plotBBChartOnMap(places)

Solution

  • The dependencies parameter from the r2d3 package describes:

    Additional HTML dependencies. These can take the form of paths to JavaScript or CSS files, or alternatively can be fully specified dependencies created with htmltools::htmlDependency.

    So only files are supported, not URL unfortunately and same for htmlDependency. So instead you can do:

    library(r2d3)
    
    download.file("https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js", "leaflet-0.7.js")
    download.file("https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js", "d3-scale-radial.js")
    download.file("https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js", "d3-tip.min.js")
    
    r2d3(script = "bbmapchartSO.js",
         dependencies = list("leaflet-0.7.js",
                             "d3-scale-radial.js",
                             "d3-tip.min.js"))