tree

readme.md

a tree.

data.json

[{
  "name": "Adam",
  "class": "man",
  "textClass": "emphasis",
  "marriages": [{
    "spouse": {
      "name": "Megan",
      "class": "woman"
    },
    "children": [{
      "name": "Lilo",
      "class": "man",
      "marriages": [{
        "spouse": {
          "name": "ladyCat",
          "class": "woman"
        },
        "children": [{
          "name": "Meokity",
          "class": "man",
          "marriages": []
        }, {
          "name": "Jane",
          "class": "woman"
        }, {
          "name": "Jasper",
          "class": "man",
          "extra": {
            "favorite_color": "Blue"
          }
        }, {
          "name": "Emma",
          "class": "woman"
        }, {
          "name": "Julia",
          "class": "woman"
        }, {
          "name": "Jessica",
          "class": "woman"
        }]
      }]
    }]
  }]
}]

renderer.handlebars

{{name}}
{{#if extra.favorite_color}}
<br>({{extra.favorite_color}})
{{/if}}

stylesheet.css

svg {
  font: 10px sans-serif
}
.linage {
  fill: none;
  stroke: black;
}
.marriage {
  fill: none;
  stroke: black;
}
.man {
  background-color: lightblue;
  border-style: solid;
  border-width: 1px;
}
.woman {
  background-color: pink;
  border-style: solid;
  border-width: 1px;
  {
.p {
  padding: 0;
  margin: 0;
}