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.
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: '© ' + 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)
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"))