JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="hook"></div>
<div id="button"></div>

CSS

svg {
    border: 1px dashed lightblue;
    padding: 1em;
}

JavaScript

/* D3 init ******************************************* */

d3.ns.prefix.geo = 'http://example.com/'; // 10 & 12. there is no attribute "xmlns"

var svg = d3.select("#hook")
        .append("svg:svg").attr("id","test")
            .attr("width", 200)
            .attr("height", 200)
            .attr('version', '1.1')
            .attr('xmlns', 'http://www.w3.org/2000/svg');

      // add custom namespace with jQuery      
      // workaround, because of D3 bug: https://github.com/mbostock/d3/issues/1935 
      // https://github.com/gopeter/semantic-diagrams/blob/ad630ba1566bbaba622e317732d9d90a2f281fab/static/js/app.js#L132
      $('svg').attr('xmlns:geo', 'http://example.com/');

/* *************************************************** */
/* NS MODULE ***************************************** */

 //  d3.select("svg").attr(":xmlns:geo","http://www.example.com/something/")

    svg.append("geo:geo")                     // 1   element "geo" undefined
        .attr(':geo:aaa',  "-4.05")           // 2   there is no attribute "..."
    	.attr('geo:bbb', "40.5")              // 3   there is no attribute "..."
    	.attr('ccc', "40.5")                  // 4   there is no attribute "..."
        .attr('ddd', "geo:40.5");             // 5   there is no attribute "..."
    svg.append("g").attr("id","geo2")         // ok
        .attr(':geo:aaa2',  "-4.05")          // 6   there is no attribute "..."
    	.attr('geo:bbb2', "40.5")             // 7   there is no attribute "..."
    	.attr('ccc2', "40.5")                 // 8   there is no attribute "..."
        .attr('ddd2', "geo:40.5");            // 9   there is no attribute "..."

/* END *********************************************** */
/* *************************************************** */






/* RANDOM DATAD3 MODULE ****************************** */
var data = []; 
for(i=0; i<24; i++){
    data.push({ 
        x: Math.round(Math.random()*200),
        y: Math.round(Math.random()*200),
        r:...