Skip to content

Instantly share code, notes, and snippets.

@EbrahimKaram
Forked from ErikGartner/.treehouse
Last active March 21, 2019 21:00
Show Gist options
  • Select an option

  • Save EbrahimKaram/3b37e11d6b88845f538205234fda1bbf to your computer and use it in GitHub Desktop.

Select an option

Save EbrahimKaram/3b37e11d6b88845f538205234fda1bbf to your computer and use it in GitHub Desktop.
Karam Family Tree
[{
"name": "Niclas Superlongsurname",
"class": "man",
"textClass": "emphasis",
"marriages": [{
"spouse": {
"name": "Iliana",
"class": "woman"
},
"children": [{
"name": "James",
"class": "man",
"marriages": [{
"spouse": {
"name": "Alexandra",
"class": "woman"
},
"children": [{
"name": "Eric",
"class": "man",
"marriages": [{
"spouse": {
"name": "Eva",
"class": "woman"
}
}]
}, {
"name": "Jane",
"class": "woman"
}, {
"name": "Jasper",
"class": "man",
"extra": {
"favorite_color": "Blue"
}
}, {
"name": "Emma",
"class": "woman"
}, {
"name": "Julia",
"class": "woman"
}, {
"name": "Jessica",
"class": "woman"
}]
}]
}]
}]
}]
{{name}}
{{#if extra.favorite_color}}
<br>({{extra.favorite_color}})
{{/if}}
svg {
font: 10px sans-serif;
}
.linage {
fill: none;
stroke: #000;
}
.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;
}
.emphasis{
font-style: italic;
}
p {
padding:0;
margin:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment