A genogram or pedigree chart is an extended family tree diagram that displays information about each person or each relationship.

There are functions that convert an attribute value into a brush color or Shape geometry, to be added to the Node representing the person.

A custom LayeredDigraphLayout does the layout, assuming there is a central person whose mother and father each have their own ancestors. In this case we focus on "Bill", but any of the children of "Alice" and "Aaron" would work. The overridden add function allows husband/wife pairs to be represented by a single LayeredDigraphVertex.

For a simpler family tree, see the family tree sample.

The node data representing the people, processed by the setupDiagram function is below. The properties are:

• key, the unique ID of the person
• n, the person's name
• s, the person's sex
• m, the person's mother's key
• f, the person's father's key
• ux, the person's wife
• vir, the person's husband
• a, an Array of the attributes or markers that the person has

[
  { key: 0, n: "Aaron", s: "M", m: -10, f: -11, ux: 1, a: ["C", "F", "K"] },
  { key: 1, n: "Alice", s: "F", m: -12, f: -13, a: ["B", "H", "K"] },
  { key: 2, n: "Bob", s: "M", m: 1, f: 0, ux: 3, a: ["C", "H", "L"] },
  { key: 3, n: "Barbara", s: "F", a: ["C"] },
  { key: 4, n: "Bill", s: "M", m: 1, f: 0, ux: 5, a: ["E", "H"] },
  { key: 5, n: "Brooke", s: "F", a: ["B", "H", "L"] },
  { key: 6, n: "Claire", s: "F", m: 1, f: 0, a: ["C"] },
  { key: 7, n: "Carol", s: "F", m: 1, f: 0, a: ["C", "I"] },
  { key: 8, n: "Chloe", s: "F", m: 1, f: 0, vir: 9, a: ["E"] },
  { key: 9, n: "Chris", s: "M", a: ["B", "H"] },
  { key: 10, n: "Ellie", s: "F", m: 3, f: 2, a: ["E", "G"] },
  { key: 11, n: "Dan", s: "M", m: 3, f: 2, a: ["B", "J"] },
  { key: 12, n: "Elizabeth", s: "F", vir: 13, a: ["J"] },
  { key: 13, n: "David", s: "M", m: 5, f: 4, a: ["B", "H"] },
  { key: 14, n: "Emma", s: "F", m: 5, f: 4, a: ["E", "G"] },
  { key: 15, n: "Evan", s: "M", m: 8, f: 9, a: ["F", "H"] },
  { key: 16, n: "Ethan", s: "M", m: 8, f: 9, a: ["D", "K"] },
  { key: 17, n: "Eve", s: "F", vir: 16, a: ["B", "F", "L"] },
  { key: 18, n: "Emily", s: "F", m: 8, f: 9 },
  { key: 19, n: "Fred", s: "M", m: 17, f: 16, a: ["B"] },
  { key: 20, n: "Faith", s: "F", m: 17, f: 16, a: ["L"] },
  { key: 21, n: "Felicia", s: "F", m: 12, f: 13, a: ["H"] },
  { key: 22, n: "Frank", s: "M", m: 12, f: 13, a: ["B", "H"] },

  // "Aaron"'s ancestors
  { key: -10, n: "Paternal Grandfather", s: "M", m: -33, f: -32, ux: -11, a: ["A", "S"] },
  { key: -11, n: "Paternal Grandmother", s: "F", a: ["E", "S"] },
  { key: -32, n: "Paternal Great", s: "M", ux: -33, a: ["F", "H", "S"] },
  { key: -33, n: "Paternal Great", s: "F", a: ["S"] },
  { key: -40, n: "Great Uncle", s: "M", m: -33, f: -32, a: ["F", "H", "S"] },
  { key: -41, n: "Great Aunt", s: "F", m: -33, f: -32, a: ["B", "I", "S"] },
  { key: -20, n: "Uncle", s: "M", m: -11, f: -10, a: ["A", "S"] },

  // "Alice"'s ancestors
  { key: -12, n: "Maternal Grandfather", s: "M", ux: -13, a: ["D", "L", "S"] },
  { key: -13, n: "Maternal Grandmother", s: "F", m: -31, f: -30, a: ["H", "S"] },
  { key: -21, n: "Aunt", s: "F", m: -13, f: -12, a: ["C", "I"] },
  { key: -22, n: "Uncle", s: "M", ux: -21 },
  { key: -23, n: "Cousin", s: "M", m: -21, f: -22 },
  { key: -30, n: "Maternal Great", s: "M", ux: -31, a: ["D", "J", "S"] },
  { key: -31, n: "Maternal Great", s: "F", m: -50, f: -51, a: ["B", "H", "L", "S"] },
  { key: -42, n: "Great Uncle", s: "M", m: -30, f: -31, a: ["C", "J", "S"] },
  { key: -43, n: "Great Aunt", s: "F", m: -30, f: -31, a: ["E", "G", "S"] },
  { key: -50, n: "Maternal Great Great", s: "F", vir: -51, a: ["D", "I", "S"] },
  { key: -51, n: "Maternal Great Great", s: "M", a: ["B", "H", "S"] }
]
  

GoJS version 2.2.5. Copyright 1998-2022 by Northwoods Software.