UNPKG

5.12 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Genogram</title>
5 <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
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 <!-- requires minimal.js, built from minimal.ts -->
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>