JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v3.min.js"></script>

  </head>

  <body>
    <div id="visfel_map"></div>

  </body>
  <script>
    var jsonData = {
      "type": "map",
      "tree_size": "2",
      "map_id": "1",
      "name": "Sounds for Speech",
      "img": "manage/visfel_images/map-1516338051-sounds for speech.png",
      "children": [{
          "type": "category",
          "tree_size": "2",
          "category_id": "1",
          "name": "Vowels",
          "img": "manage/visfel_images/category-1516338094-vowel sound.png",
          "children": [{
              "type": "sub",
              "tree_size": "2",
              "sub_category_id": "1",
              "name": "A",
              "img": "manage/visfel_images/sub-1516338159-A.png"
            },
            {
              "type": "sub",
              "tree_size": "2",
              "sub_category_id": "2",
              "name": "E",
              "img": "manage/visfel_images/sub-1516338189-E.png"
            },
            {
              "type": "sub",
              "tree_size": "2",
              "sub_category_id": "3",
              "name": "I",
              "img": "manage/visfel_images/sub-1516338212-i.png"
            },
            {
              "type": "sub",
              "tree_size": "2",
              "sub_category_id": "4",
              "name": "O",
              "img": "manage/visfel_images/sub-1516338235-O.png"
            },
            {
              "type": "sub",
              "tree_size": "2",
              "sub_category_id": "5",
              "name": "U",
              "img": "manage/visfel_images/sub-1516338260-U.png"
            }
          ]
        },
        {
          "type": "category",
          "tree_size": "2",
          "category_id": "2",
          "name": "Consonents",
          "img":...

JavaScript

// some colour variables
var tcBlack = "purple";

// rest of vars
var w = 1500,
  h = 800,
  maxNodeSize = 50,
  x_browser = 25,
  y_browser = 25,
  root;

var vis;
var force = d3.layout.force();
vis = d3.select("#visfel_map").append("svg")
         .attr("width", w).attr("height", h).attr("id", "mainSvg");


  root = jsonData;
  root.fixed = true;
  root.x = w / 2;
  root.y = h / 4;


  // Build the path
  var defs = vis.insert("svg:defs")
    .data(["end"]);
  defs.enter().append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");
  update();

function update() {
  var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);
  force.nodes(nodes)
    .links(links)
    .gravity(0.05)
    .charge(-2500)
    .linkDistance(200)
    .friction(0.5)
    .linkStrength(function(l, i) {
      return 1;
    })
    .size([w, h])
    .on("tick", tick)
    .start();

  var path = vis.selectAll("path.link")
    .data(links, function(d) {
      return d.target.id;
    });
  path.enter().insert("svg:path")
    .attr("class", "link")
    // .attr("marker-end", "url(#end)")
    .style("stroke", "#ff8888")
    .style("fill", "none");


  // Exit any old paths.     path.exit().remove();



  // Update the nodes…
  var node = vis.selectAll("g.node")
    .data(nodes, function(d) {
      return d.id;
    });


  // Enter any new nodes.
  var nodeEnter = node.enter().append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .on("click", click)
    .call(force.drag);

  /* Append a circle    */
  nodeEnter.append("svg:circle")
    .attr("r", function(d) {
      return Math.sqrt(d.size) / 10 || 4.5;
    })
    .style("fill", "#eee");


  var idStart = "letter_";

  // Append images
  var images = nodeEnter.append("svg:image")
    .attr("xlink:href",   "https://www.freeclipartnow.com/d/39895-1/decorative-letter-A.jpg")
    .attr("id", function(d){return idStart + d.name;})
    .attr("x", function(d) {
  ...