Plot d3 plot on sheet / map map

I have a d3 radial diagram that I would like to draw / overlay on a Leaflet / Mapbox map at lat, long coordinates.

I looked around and all the solutions seem to display circles on the map using cx, cy positions which I don't need.

Is it possible to add SVG surrounding the diagram to the map?

Below is the code and link to a radial chart (which may or may not be used for this question as I just want to know how to plot an SVG on a map)

CODE FOR D3 CHART

var width = 300;
var height = 300;
var twoPi = 2 * Math.PI; // Full circle
var formatPercent = d3.format(".0%");

var data = [{
  "range": "0-20",
  "count": 20
}, {
  "range": "21-40",
  "count": 10
}, {
  "range": "41-60",
  "count": 17
}, {
  "range": "61-80",
  "count": 49
}, {
  "range": "81-100",
  "count": 90
}];

var max = d3.max(data, function(d) {
  return +d.count;
});

var percent = d3.max(data, function(d) {
  return +d.count / 10;
});

var radiusBackground = .25;
var radiusForeground = .25;
var gap = 28;
var maxCount = max + percent;

var svg = d3.select(map.getPanes().overlayPane).append("svg")
    .attr("width", 1000)
    .attr("height", 1000)
    .attr("transform", "translate(" + map.latLngToLayerPoint(latLng).x + "," + map.latLngToLayerPoint(latLng).y + ")");

var g = svg.append("g")
  .attr("transform", "translate(" + width / 10 + "," + height / 10 + ")")
  .attr("class", "leaflet-zoom-hide");

var background = g.selectAll(".twoPi")
    .data(data).enter()
    .append("path")
    .attr("class", "twoPi")
    .each(full);

var foreground = g.selectAll(".outerPath")
        .data(data).enter()
        .append("path")
        .attr("class", "outerPath")
        .each(drawArc);


map.on("viewreset", update);
update();

function update() {
    foreground.attr("transform", 
        function(d) { 
        return "translate("+ 
        map.latLngToLayerPoint(latLng).x/10000 +","+ 
        map.latLngToLayerPoint(latLng).y/10000 +")";
        }
    )
    background.attr("transform", 
        function(d) { 
        return "translate("+ 
        map.latLngToLayerPoint(latLng).x/10000 +","+ 
        map.latLngToLayerPoint(latLng).y/10000 +")";
        }
    )
}

function full() {

  var arc = d3.svg.arc()
    .startAngle(0)
    .endAngle(twoPi)
    .innerRadius(0 + gap * radiusBackground)
    .outerRadius(26 + gap * radiusBackground);

  d3.select(this)
    .attr("transform", "translate(" + (width / 2.5) + "," + (height / 2.5) + ")")
    .attr("d", arc)
    .style("opacity", "0.5");
  radiusBackground++;
}

function drawArc(d, i) {

  var arc = d3.svg.arc()
    .startAngle(0)
    .endAngle(twoPi * (d.count / maxCount))
    .innerRadius(0 + gap * radiusForeground)
    .outerRadius(26 + gap * radiusForeground);

  d3.select(this)
    .attr("transform", "translate(" + (width / 2.5) + "," + (height / 2.5) + ")")
    .attr("d", arc)
    .attr("id", "path" + i)
    .on("mouseover", function() {
      d3.select(this)
        .style("fill", "red")
        .style("cursor", "pointer");
    })
    .on("mouseout", function() {
      d3.select(this)
        .style("fill", "#8FAAE5");
    })
  radiusForeground++;

  var text = g.append("text")
    .attr("x", 12 + radiusForeground)
    .attr("dy", 20)
    .style("pointer-events", "none");

  text.append("textPath")
    .attr("fill", "white")
    .attr("xlink:href", "#path" + i)
    .text(d.count);
}

      

        
        
        
      

    

CODEPEN LINK TO D3 CHART

CARD CODE (VERY WRONG I ACCEPT)

    L.mapbox.accessToken = 'ACCESS TOKEN HERE';

var map = L.mapbox.map('map', 'NAME HERE', {zoomControl: false}).setView([53.4054, -2.9858], 16);
var myLayer = L.mapbox.featureLayer().addTo(map);

var geojson = [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [53.4054, -2.9858]
        },
        "properties": {
            "icon": {
                "className": "sensor-icon",
                //"html": "▼",
                "iconSize": null
            }
        }
    },
];


myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;
        marker.setIcon(L.divIcon(feature.properties.icon));
    });
    myLayer.setGeoJSON(geojson);

    new L.Control.Zoom({ position: 'bottomleft' }).addTo(map);

    var latLng = new L.LatLng(geojson[0].geometry.coordinates[0], geojson[0].geometry.coordinates[1]);

      

        
        
        
      

    

Thank you in advance