JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>
    <!DOCTYPE html>
    <html>
        

      <head>
        <meta charset="utf-8">
        <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
        <title>Flintstone Family Tree</title>
      </head>
      <body>
        <div id='forces'></div>

      </body>
    </html>

JavaScript

var nodes = [

  {"type":'family',"id":'f1',"name":'', "image":""},
  {"type":'person',"id":'p1',"name":'fred flintstone',"age": 39, "relationship": "father","sex":' '},
  {"type":'person',"id":'p2',"name":'wilma flintstone',"age": 36, "relationship": "mother","sex":'m'},
  {"type":'person',"id":'p3',"name":'pebbles flintstone',"age": 4 , "relationship": "daughter","sex":'mf'},
  {"type":'person',"id":'p4',"name":'dino',"age": 8 ,"relationship": "pet","sex":'m'},


  {"type":'family',"id":'f3',"name":'', "image":""},
  {"type":'person',"id":'p5',"name":'barney rubble',"age": 43, "relationship": "father","sex":'m'},
  {"type":'person',"id":'p6',"name":'betty rubble',"age": 41, "relationship": "mother","sex":'f'},
  {"type":'person',"id":'p7',"name":'bam bam rubble',"age": 4, "relationship": "son","sex":'m'},


]

var edges = [
  {id:1,source:'f1',target:'p1',type:'married'},
  {id:2,source:'f1',target:'p2',type:'married'},
  {id:3,source:'f1',target:'p3',type:'child'},
  {id:4,source:'f1',target:'p4',type:'child'},

  {id:8,source:'f3',target:'p5',type:'married'},
  {id:9,source:'f3',target:'p6',type:'married'},
  {id:11,source:'f3',target:'p7',type:'child'}

]


var myChart = familyChart().nodes(nodes)
                           .links(edges);

var width = window.innerWidth, 
   height = window.innerHeight;


var svg = d3.select('#forces').append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("background-color","yellow")
            .call(myChart);

function familyChart() {


  var nodes = [],
      links = [] 

  function my(svg) {

    var family_radius = 15;

    var repelForce = d3.forceManyBody().strength(-3000).distanceMax(450)
                       .distanceMin(85);

    var simulation = d3.forceSimulation()
                       .force("xAxis",d3.forceX(width/2).strength(0.4))
                       .force("yAxis",d3.forceY(height/2).strength(0.6))
                       .force("repelForce",repelForce)
   ...