1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <title>Genogram</title>
|
5 |
|
6 | <meta name="description" content="A genogram is a family tree diagram for visualizing hereditary patterns." />
|
7 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
8 |
|
9 | <script src="../samples/assets/require.js"></script>
|
10 | <script src="../assets/js/goSamples.js"></script>
|
11 |
|
12 |
|
13 | <script>
|
14 | function init() {
|
15 | require(["genogramScript"], function(app) {
|
16 | app.init();
|
17 | });
|
18 | }
|
19 | </script>
|
20 | </head>
|
21 | <body onload="init()">
|
22 | <div id="sample">
|
23 | <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
|
24 | <p>A <em>genogram</em> or <em>pedigree chart</em> is an extended family tree diagram that displays information about each person or each relationship.</p>
|
25 | <p>
|
26 | There are functions that convert an attribute value into a brush color or Shape geometry,
|
27 | to be added to the Node representing the person.
|
28 | </p>
|
29 | <p>
|
30 | A custom <a>LayeredDigraphLayout</a> does the layout, assuming there is a central person whose mother and father
|
31 | each have their own ancestors. In this case we focus on "Bill", but any of the children of "Alice" and "Aaron" would work.
|
32 | The overridden <b>add</b> function allows husband/wife pairs to be represented by a single <a>LayeredDigraphVertex</a>.
|
33 | </p>
|
34 | <p>For a simpler family tree, see the <a href="familyTree.html">family tree sample</a>.</p>
|
35 | <p>
|
36 | The node data representing the people, processed by the <code>setupDiagram</code> function is below.
|
37 | The properties are:
|
38 | <ul>
|
39 | <li><b>key</b>, the unique ID of the person</li>
|
40 | <li><b>n</b>, the person's name</li>
|
41 | <li><b>s</b>, the person's sex</li>
|
42 | <li><b>m</b>, the person's mother's key</li>
|
43 | <li><b>f</b>, the person's father's key</li>
|
44 | <li><b>ux</b>, the person's wife</li>
|
45 | <li><b>vir</b>, the person's husband</li>
|
46 | <li><b>a</b>, an Array of the attributes or markers that the person has</li>
|
47 | </ul>
|
48 | </p>
|
49 | <pre id="peopleData">
|
50 | [
|
51 | { key: 0, n: "Aaron", s: "M", m:-10, f:-11, ux: 1, a: ["C", "F", "K"] },
|
52 | { key: 1, n: "Alice", s: "F", m:-12, f:-13, a: ["B", "H", "K"] },
|
53 | { key: 2, n: "Bob", s: "M", m: 1, f: 0, ux: 3, a: ["C", "H", "L"] },
|
54 | { key: 3, n: "Barbara", s: "F", a: ["C"] },
|
55 | { key: 4, n: "Bill", s: "M", m: 1, f: 0, ux: 5, a: ["E", "H"] },
|
56 | { key: 5, n: "Brooke", s: "F", a: ["B", "H", "L"] },
|
57 | { key: 6, n: "Claire", s: "F", m: 1, f: 0, a: ["C"] },
|
58 | { key: 7, n: "Carol", s: "F", m: 1, f: 0, a: ["C", "I"] },
|
59 | { key: 8, n: "Chloe", s: "F", m: 1, f: 0, vir: 9, a: ["E"] },
|
60 | { key: 9, n: "Chris", s: "M", a: ["B", "H"] },
|
61 | { key: 10, n: "Ellie", s: "F", m: 3, f: 2, a: ["E", "G"] },
|
62 | { key: 11, n: "Dan", s: "M", m: 3, f: 2, a: ["B", "J"] },
|
63 | { key: 12, n: "Elizabeth", s: "F", vir: 13, a: ["J"] },
|
64 | { key: 13, n: "David", s: "M", m: 5, f: 4, a: ["B", "H"] },
|
65 | { key: 14, n: "Emma", s: "F", m: 5, f: 4, a: ["E", "G"] },
|
66 | { key: 15, n: "Evan", s: "M", m: 8, f: 9, a: ["F", "H"] },
|
67 | { key: 16, n: "Ethan", s: "M", m: 8, f: 9, a: ["D", "K", "S"] },
|
68 | { key: 17, n: "Eve", s: "F", vir: 16, a: ["B", "F", "L", "S"] },
|
69 | { key: 18, n: "Emily", s: "F", m: 8, f: 9 },
|
70 | { key: 19, n: "Fred", s: "M", m: 17, f: 16, a: ["B"] },
|
71 | { key: 20, n: "Faith", s: "F", m: 17, f: 16, a: ["L"] },
|
72 | { key: 21, n: "Felicia", s: "F", m: 12, f: 13, a: ["H"] },
|
73 | { key: 22, n: "Frank", s: "M", m: 12, f: 13, a: ["B", "H"] },
|
74 |
|
75 | // "Aaron"'s ancestors
|
76 | { key: -10, n: "Paternal Grandfather", s: "M", m: -33, f: -32, ux: -11, a: ["A"] },
|
77 | { key: -11, n: "Paternal Grandmother", s: "F", a: ["E"] },
|
78 | { key: -32, n: "Paternal Great", s: "M", ux: -33, a: ["F", "H"] },
|
79 | { key: -33, n: "Paternal Great", s: "F" },
|
80 | { key: -40, n: "Great Uncle", s: "M", m: -33, f: -32, a: ["F", "H"] },
|
81 | { key: -41, n: "Great Aunt", s: "F", m: -33, f: -32, a: ["B", "I"] },
|
82 | { key: -20, n: "Uncle", s: "M", m: -11, f: -10, a: ["A"] },
|
83 |
|
84 | // "Alice"'s ancestors
|
85 | { key: -12, n: "Maternal Grandfather", s: "M", ux: -13, a: ["D", "L"] },
|
86 | { key: -13, n: "Maternal Grandmother", s: "F", m: -31, f: -30, a: ["H"] },
|
87 | { key: -21, n: "Aunt", s: "F", m: -13, f: -12, a: ["C", "I"] },
|
88 | { key: -22, n: "uncle", s: "M", ux: -21 },
|
89 | { key: -23, n: "cousin", s: "M", m: -21, f: -22 },
|
90 | { key: -30, n: "Maternal Great", s: "M", ux: -31, a: ["D", "J"] },
|
91 | { key: -31, n: "Maternal Great", s: "F", m: -50, f: -51, a: ["B", "H", "L"] },
|
92 | { key: -42, n: "Great Uncle", s: "M", m: -30, f: -31, a: ["C", "J"] },
|
93 | { key: -43, n: "Great Aunt", s: "F", m: -30, f: -31, a: ["E", "G"] },
|
94 | { key: -50, n: "Maternal Great Great", s: "F", ux: -51, a: ["D", "I"] },
|
95 | { key: -51, n: "Maternal Great Great", s: "M", a: ["B", "H"] }
|
96 | ]
|
97 | </pre>
|
98 | </div>
|
99 |
|
100 | </body>
|
101 | </html>
|