JSFiddle - React, Tailwind, and code Playground

by BenPortner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/BenPortner/js_family_tree/js/d3-dag.js"></script>
<script src="https://cdn.jsdelivr.net/gh/BenPortner/js_family_tree@0.3.1-alpha/js/familytree.js"></script>
<!DOCTYPE html>

<head>
  <script>
    data = {
      "start": "id4",
      "persons": {
        "id1": {
          "id": "id1",
          "name": "Adam",
          "birthyear": 1900,
          "deathyear": 1980,
          "own_unions": ["u1"],
          "birthplace": "Alberta",
          "deathplace": "Austin"
        },
        "id2": {
          "id": "id2",
          "name": "Berta",
          "birthyear": 1901,
          "deathyear": 1985,
          "own_unions": ["u1"],
          "birthplace": "Berlin",
          "deathplace": "Bern"
        },
        "id3": {
          "id": "id3",
          "name": "Charlene",
          "birthyear": 1930,
          "deathyear": 2010,
          "own_unions": ["u3", "u4"],
          "parent_union": "u1",
          "birthplace": "Château",
          "deathplace": "Cuxhaven"
        },
        "id4": {
          "id": "id4",
          "name": "Dan",
          "birthyear": 1926,
          "deathyear": 2009,
          "own_unions": [],
          "parent_union": "u1",
          "birthplace": "den Haag",
          "deathplace": "Derince"
        },
        "id5": {
          "id": "id5",
          "name": "Eric",
          "birthyear": 1931,
          "deathyear": 2015,
          "own_unions": ["u3"],
          "parent_union": "u2",
          "birthplace": "Essen",
          "deathplace": "Edinburgh"
        },
        "id6": {
          "id": "id6",
          "name": "Francis",
          "birthyear": 1902,
          "deathyear": 1970,
          "own_unions": ["u2"],
          "birthplace": "Firenze",
          "deathplace": "Faizabad"
        },
        "id7": {
 ...

CSS

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.person {
    stroke: steelblue;
    stroke-width: 3px;
}

.extendable {
    fill: lightsteelblue;
}

.non-extendable {
    fill: #fff;
}

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

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

.tooltip {
    font: 12px sans-serif;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
}

JavaScript

// insert svg object to hold the family tree
const svg = d3.select("svg")
  .attr("width", document.body.offsetWidth)
  .attr("height", document.documentElement.clientHeight);

// make family tree object (using data from resource data.js)
FT = new FamilyTree(data, svg)
  .orientation("vertical");

// draw family tree
FT.draw();

// optional: load data from remote source
FT.load_data("https://cdn.jsdelivr.net/gh/BenPortner/js_family_tree@master/data/data.js");