Pretty's Family dTree

.treehouse

1.3.1

readme.md

Thank you ErikGartner/dTree

You just replace gist.github.com with treehouse.gartner.io in the gist url and shazam you are looking at your tree graph!

data.json

[{
  "name": "Braulio",
  "class": "man",
  "marriages": [{
    "spouse": {
      "name": "Elena",
      "class": "woman"
    },
    "children": [{
      "name": "Gloria",
      "class": "woman",
      "marriages": [{
        "spouse": {
          "name": "Asunción",
          "class": "man"
        },
        "children": [{
          "name": "Juana",
          "class": "woman",
          "marriages": [{
            "spouse": {
              "name": "Roger",
              "class": "man"
            },
            "children": [{
              "name": "Dayanne",
              "class": "dayanne"
            }]
          },{
            "spouse": {
              "name": "Miguel",
              "class": "man"
            }
          }]
        },
        {
          "name": "Yossie",
          "class": "woman",
          "marriages": [{
            "spouse": {
              "name": "Carlos",
              "class": "man"
            },
            "children": [{
              "name": "Stacy",
              "class": "woman"
            }]
          }]
        }]
      }]
    },
    {
      "name": "Gilmer",
      "class": "man",
      "marriages": [{
        "spouse": {
          "name": "Nola",
          "class": "woman"
        },
        "children": [{
          "name": "Beto",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Feli",
              "class": "woman"
            },
            "children": [{
              "name": "Melisa",
              "class": "woman"  
            }]
          }]
        }]
      }]
    },
    {
      "name": "Nelly",
      "class": "woman",
      "marriages": [{
        "spouse": {
          "name": "Miguel",
          "class": "man"
        },
        "children": [{
          "name": "Miguel",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Denisse",
              "class": "woman"
            },
            "children": [{
              "name": "Paula",
              "class": "woman"  
            },{
              "name": "Victor A.",
              "class": "man"  
            }]
          }]
        },{
          "name": "Jose",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Juliet",
              "class": "woman"
            },
            "children": [{
              "name": "Jose M.",
              "class": "man"  
            },{
              "name": "Marcelo",
              "class": "man"  
            }]
          }]
        },{
          "name": "Leticia",
          "class": "woman",
          "marriages": [{
            "spouse": {
              "name": "Cristian",
              "class": "man"
            },
            "children": [{
              "name": "Nicolas",
              "class": "man"  
            }]
          }]
        }]
      }]
    },
    {
      "name": "Cleme",
      "class": "woman",
      "marriages": [{
        "spouse": {
          "name": "El mañoso",
          "class": "man"
        },
        "children": [{
          "name": "Juan",
          "class": "man"  
        },{
          "name": "Cesar",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Nati",
              "class": "woman"
            },
            "children": [{
              "name": "Kety",
              "class": "woman"  
            },{
              "name": "Darlin",
              "class": "man"  
            }]
          }]
        }]
      }]
    },
    {
      "name": "Elsa",
      "class": "woman",
      "marriages": [{
        "spouse": {
          "name": "Pedro",
          "class": "man"
        },
        "children": [{
          "name": "Davis",
          "class": "man"  
        },{
          "name": "Robin",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Tania",
              "class": "woman"
            },
            "children": [{
              "name": "Doruk",
              "class": "woman"  
            }]
          }]
        },{
          "name": "Diana",
          "class": "woman",
          "marriages": [{
            "spouse": {
              "name": "Jorge",
              "class": "man",
              "marriages": [{
                "spouse": {
                  "name": "-------",
                  "class": "woman"
                },
                "children": [{
                  "name": "Jorgito",
                  "class": "man"  
                }]
              }]
            },
            "children": [{
              "name": "Rodrigo",
              "class": "man"  
            }]
          }]
        }]
      }]
    },{
      "name": "Eduardo",
      "class": "man",
      "marriages": [{
        "spouse": {
          "name": "Elena",
          "class": "woman"
        },
        "children": [{
          "name": "Edgar",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Julisa",
              "class": "woman"
            },
            "children": [{
              "name": "Lia",
              "class": "woman"  
            }]
          }]
        },{
          "name": "Elvis",
          "class": "man"  
        },{
          "name": "Eduard",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Cecilia",
              "class": "woman"
            },
            "children": [{
              "name": "Marta",
              "class": "woman"  
            },{
              "name": "Alexandra",
              "class": "woman"  
            }]
          }]
        },{
          "name": "Raul",
          "class": "man"  
        },{
          "name": "Enrique",
          "class": "man"  
        }]
      }]
    }]
  }]
}]

renderer.handlebars

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

stylesheet.css

@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Courgette');

.linage {
  fill: none;
  stroke: rgb(0, 0, 0);
}
.marriage {
  fill: none;
  stroke: rgb(187, 0, 0);
}
.man {
  font-family: 'Courgette', cursive;
  font-size: medium;
  background-color: lightblue;
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box;
}
.woman {
  font-family: 'Courgette', cursive;
  font-size: medium;
  background-color: pink;
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box;
}
.dayanne {
  font-family: 'Lobster', cursive;
  font-size: medium;
  background-color: rgb(181, 181, 181);
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box;
}
.emphasis{
  font-style: italic;
}
p {
  padding:0;
  margin:0;
}