dTree Demo

.editorconfig

# Cross-platform formatting config
# See https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

[*.{js,mjs,json,md,css,handlebars,html}]
charset = utf-8
indent_style = space
indent_size = 2

.treehouse

1.3.1

readme.md

Wallace Family Tree

This is an attempt at mapping out my ancstry on the Wallace family side.

Credits

Data was collected from various members of the Wallace family of Gin-Gin QLD, and collated by me (ick Stokoe).

Software

This uses [dTree][1] - an open source graph library written by Erik Gärtner.

data.json

[
  {
    "name": "Gordon Wallace",
    "class": "man",
    "textClass": "emphasis",
    "marriages": [
      {
        "spouse": {
          "name": "Betty Wallace",
          "class": "woman"
        },
        "children": [
          {
	          "name": "Tony Wallace",
            "class": "man",
            "marriages": []
          },
          {
            "name": "Barry Wallace",
            "class": "man",
            "marriages": [
              {
                "spouse": {
                  "name": "Janet Woolley (ne Stokoe)",
                  "class": "woman"
                },
                "children": [
                  {
                    "name": "Nicholas Stokoe",
                    "class": "man",
                    "marriages": [
                    ]
                  }
                ]
              },
              {
                "spouse": {},
                "children": [
                  {
                    "name": "Samantha Ann Lewis",
                    "class": "woman",
                    "marriages": []
                  }
                ]
              },
              {
                "spouse": {},
                "children": [
                  {
                    "name": "Samantha Bidgood (ne )",
                    "class": "woman",
                    "marriages": [
                      {
                        "spouse": {
                          "name": "Ross Bidgood",
                          "class": "man"
                        },
                        "children": [                        
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "Judy Wallace",
            "class": "woman"
          },
          {
            "name": "Ricky Wallace",
            "class": "man"
          }
        ]
      }
    ]
  }
]

renderer.handlebars

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

stylesheet.css

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