JSFiddle - React, Tailwind, and code Playground

by BenPortner

HTML

<script src="https://cdn.jsdelivr.net/gh/BenPortner/js_family_tree@master/dist/js_family_tree.umd.js"></script>
<!DOCTYPE html>

<head>
  <script>
    data = {
      "start": "id4",
      "persons": {
        "id1": {
          "name": "Adam",
          "birthyear": 1900,
          "deathyear": 1980,
          "birthplace": "Alberta",
          "deathplace": "Austin"
        },
        "id2": {
          "name": "Berta",
          "birthyear": 1901,
          "deathyear": 1985,
          "birthplace": "Berlin",
          "deathplace": "Bern"
        },
        "id3": {
          "name": "Charlene",
          "birthyear": 1930,
          "deathyear": 2010,
          "birthplace": "Château",
          "deathplace": "Cuxhaven"
        },
        "id4": {
          "name": "Dan",
          "birthyear": 1926,
          "deathyear": 2009,
          "birthplace": "den Haag",
          "deathplace": "Derince"
        },
        "id5": {
          "name": "Eric",
          "birthyear": 1931,
          "deathyear": 2015,
          "birthplace": "Essen",
          "deathplace": "Edinburgh"
        },
        "id6": {
          "name": "Francis",
          "birthyear": 1902,
          "deathyear": 1970,
          "birthplace": "Firenze",
          "deathplace": "Faizabad"
        },
        "id7": {
          "name": "Greta",
          "birthyear": 1905,
          "deathyear": 1990,
        },
        "id8": {
          "name": "Heinz",
          "birthyear": 1970,
        },
        "id9": {
          "name": "Iver",
          "birthyear": 1925,
          "deathyear": 1963,
        },
        "id10": {
          "name": "Jennifer",
          "birthyear": 1950,
        },
        "id11": {
          "name": "Klaus",
          "birthyear": 1933,
          "deathyear": 2013,
        },
        "id12": {
          "name": "Lennart",
          "birthyear": 1999,
        },
      },
      "unions": {
  ...

CSS

.svg-container {
    position: absolute;
    top: 0.5%;
    left: 0.5%;
    width: 99%;
    height: 99%;
}

.svg-container svg {
    width: 100%;
    height: 100%;
}

.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 {
    position: absolute;
    font: 12px sans-serif;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 5px;
}

JavaScript

// make family tree object (using data from resource data.js)
const container = document.getElementById("container");
const ft = new FT.FamilyTree(data, container);