Recursive expansion

by Michael Rovinsky

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div id="d3_object">
    <object>
      <div id="includedContent"></div>
    </object>
  </div>
  
 <!-- **********************************
       hyperlink here to open d3.js node
       e.g. "data"
       *********************************-->
</body>

CSS

.node {
      cursor: pointer;
    }

    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }

    .node text {
      font: 12px sans-serif;
    }

    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }

    #d3_object {
      width: 75%;
      margin: 0.5rem 0.5rem 1rem 0.25rem;
    }

    #includedContent {
      position: static !important;
      display: inline-block;
    }

JavaScript

// Set the dimensions and margins of the diagram
  var margin = {top: 20, right: 90, bottom: 30, left: 90},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  // ----------------------------------------
  /* Pan, zoom! */
  // https://www.d3-graph-gallery.com/graph/interactivity_zoom.html
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .call(d3.zoom().on("zoom", function () {
        svg.attr("transform", d3.event.transform)
      }))
    .append("g")
      .attr("transform", "translate("
            + margin.left + "," + margin.top + ")");
// ----------------------------------------

  var i = 0,
      duration = 250,
      root;

  // declares a tree layout and assigns the size
  var treemap = d3.tree().size([height, width]);

const treeData = { 
  "name": "Root",
  "children": [
    { "name": "Culture",
      "children": [
        { "name": "LGBT" }
      ]
    },

    { "name": "Nature",
      "id": "nature",
      "children": [
        { "name": "Earth",
          "id": "earth",
          "children": [
            { "name": "Environment" },
            { "name": "Geography" },
            { "name": "Geology" },
            { "name": "Geopolitical" },
            { "name": "Geopolitical - Countries" },
            { "name": "Geopolitical - Countries - Canada" },
            { "name": "Geopolitical - Countries - United States" },
            { "name": "Nature" },
            { "name": "Regions" }
          ]
        },
        { "name": "Cosmos" },
        { "name": "Outer space" }
      ]
    },

    { "name": "Humanities",
      "children": [
          { "name": "History" },
          { "name": "Philosophy" },
          { "name": "Philosophy - Theology" }
      ]
    },

    { "name": "Miscellaneous",
      "children": [
          { "name": "Wikipedia",
            "url":...