gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
209 lines (197 loc) • 19.6 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Family Tree (Japanese)</title>
<meta name="description" content="A family tree diagram showing Japanese royalty." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
{
allowCopy: false,
layout: // create a TreeLayout for the family tree
$(go.TreeLayout,
{ angle: 90, nodeSpacing: 5 })
});
var bluegrad = $(go.Brush, "Linear", { 0: "rgb(60, 204, 254)", 1: "rgb(70, 172, 254)" });
var pinkgrad = $(go.Brush, "Linear", { 0: "rgb(255, 192, 203)", 1: "rgb(255, 142, 203)" });
// Set up a Part as a legend, and place it directly on the diagram
myDiagram.add(
$(go.Part, "Table",
{ position: new go.Point(10, 10), selectable: false },
$(go.TextBlock, "Key",
{ row: 0, font: "bold 10pt Helvetica, Arial, sans-serif" }), // end row 0
$(go.Panel, "Horizontal",
{ row: 1, alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ desiredSize: new go.Size(30, 30), fill: bluegrad, margin: 5 }),
$(go.TextBlock, "Males",
{ font: "bold 8pt Helvetica, bold Arial, sans-serif" })
), // end row 1
$(go.Panel, "Horizontal",
{ row: 2, alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ desiredSize: new go.Size(30, 30), fill: pinkgrad, margin: 5 }),
$(go.TextBlock, "Females",
{ font: "bold 8pt Helvetica, bold Arial, sans-serif" })
) // end row 2
));
// get tooltip text from the object's data
function tooltipTextConverter(person) {
var str = "";
str += "Born: " + person.birthYear;
if (person.deathYear !== undefined) str += "\nDied: " + person.deathYear;
if (person.reign !== undefined) str += "\nReign: " + person.reign;
return str;
}
// define tooltips for nodes
var tooltiptemplate =
$("ToolTip",
{ "Border.fill": "whitesmoke", "Border.stroke": "black" },
$(go.TextBlock,
{
font: "bold 8pt Helvetica, bold Arial, sans-serif",
wrap: go.TextBlock.WrapFit,
margin: 5
},
new go.Binding("text", "", tooltipTextConverter))
);
// define Converters to be used for Bindings
function genderBrushConverter(gender) {
if (gender === "M") return bluegrad;
if (gender === "F") return pinkgrad;
return "orange";
}
// replace the default Node template in the nodeTemplateMap
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ deletable: false, toolTip: tooltiptemplate },
new go.Binding("text", "name"),
$(go.Shape, "Rectangle",
{
fill: "orange",
stroke: "black",
stretch: go.GraphObject.Fill,
alignment: go.Spot.Center
},
new go.Binding("fill", "gender", genderBrushConverter)),
$(go.Panel, "Vertical",
$(go.TextBlock,
{
font: "bold 8pt Helvetica, bold Arial, sans-serif",
alignment: go.Spot.Center,
margin: 6
},
new go.Binding("text", "name")),
$(go.TextBlock,
new go.Binding("text", "kanjiName"))
)
);
// define the Link template
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ routing: go.Link.Orthogonal, corner: 5, selectable: false },
$(go.Shape)); // the default black link shape
// here's the family data
var nodeDataArray = [
{ key: 0, name: "Osahito", gender: "M", fullTitle: "Emperor Kōmei", kanjiName: "統仁 孝明天皇", posthumousName: "Komei", birthYear: "1831", deathYear: "1867" },
{ key: 1, parent: 0, name: "Matsuhito", gender: "M", fullTitle: "Emperor Meiji", kanjiName: "睦仁 明治天皇", posthumousName: "Meiji", birthYear: "1852", deathYear: "1912" },
{ key: 2, parent: 1, name: "Toshiko", gender: "F", fullTitle: "Princess Yasu-no-Miya Toshiko", birthYear: "1896", deathYear: "1978", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 3, parent: 2, name: "Higashikuni Morihiro", gender: "M", fullTitle: "Prince Higashikuni Morihiro", kanjiName: "東久邇宮 盛厚王", birthYear: "1916", deathYear: "1969", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 4, parent: 3, name: "See spouse for descendants" },
{ key: 5, parent: 2, name: "Moromasa", gender: "M", fullTitle: "Prince Moromasa", kanjiName: "師正王", birthYear: "1917", deathYear: "1923" },
{ key: 6, parent: 2, name: "Akitsune", gender: "M", fullTitle: "Prince Akitsune", kanjiName: "彰常王", birthYear: "1920", deathYear: "2006", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 7, parent: 2, name: "Toshihiko", gender: "M", fullTitle: "Prince Toshihiko", kanjiName: "俊彦王", birthYear: "1929", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 8, parent: 1, name: "Yoshihito", gender: "M", fullTitle: "Emperor Taishō", kanjiName: "嘉仁 大正天皇,", posthumousName: "Taisho", birthYear: "1879", deathYear: "1926" },
{ key: 9, parent: 8, name: "Hirohito", gender: "M", fullTitle: "Emperor Showa", kanjiName: "裕仁 昭和天皇", posthumousName: "Showa", birthYear: "1901", deathYear: "1989" },
{ key: 10, parent: 9, name: "Higashikuni Shigeko", gender: "F", spouse: "Higashikuni Morihiro", spouseKanji: "東久邇宮 盛厚王", fullTitle: "Princess Shigeko Higashikuni", kanjiName: "東久邇成子", birthYear: "1925", deathYear: "1961", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 11, parent: 10, name: "Higashikuni Nobuhiko", gender: "M", fullTitle: "Prince Higashikuni Nobuhiko", kanjiName: "東久邇宮 信彦王", birthYear: "1945", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 12, parent: 11, name: "Higashikuni Yukihiko", gender: "M", fullTitle: "No Title", birthYear: "1974" },
{ key: 13, parent: 10, name: "Higashikuni Fumiko", gender: "F", fullTitle: "Princess Higashikuni Fumiko", kanjiName: "文子女王", birthYear: "1946", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 14, parent: 10, name: "Higashikuni Naohiko", gender: "M", fullTitle: "No Title", kanjiName: "東久邇真彦", birthYear: "1948" },
{ key: 15, parent: 14, name: "Higashikuni Teruhiko", gender: "M", fullTitle: "No Title" },
{ key: 16, parent: 14, name: "Higashikuni Matsuhiko", gender: "M", fullTitle: "No Title" },
{ key: 17, parent: 10, name: "Higashikuni Hidehiko", gender: "M", fullTitle: "No Title", kanjiName: "東久邇基博", birthYear: "1949" },
{ key: 18, parent: 10, name: "Higashikuni Yuko", gender: "F", fullTitle: "No Title", kanjiName: "東久邇優子", birthYear: "1950" },
{ key: 19, parent: 9, name: "Sachiko", gender: "F", fullTitle: "Princess Sachiko", kanjiName: "久宮祐子", birthYear: "1927", deathYear: "1928" },
{ key: 20, parent: 9, name: "Kazuko Takatsukasa", gender: "F", fullTitle: "Kazuko, Princess Taka", kanjiName: "鷹司 和子", birthYear: "1929", deathYear: "1989", statusChange: "In 1950, lost imperial family status by marrying a commoner" },
{ key: 21, parent: 9, name: "Atsuko Ikeda", gender: "F", fullTitle: "Atsuko, Princess Yori", kanjiName: "池田厚子", birthYear: "1931", statusChange: "In 1952, lost imperial family status by marrying a commoner" },
{ key: 22, parent: 9, name: "Akihito", gender: "M", fullTitle: "Reigning Emperor of Japan; Tennō", kanjiName: "明仁 今上天皇", posthumousName: "Heisei", birthYear: "1933" },
{ key: 23, parent: 22, name: "Naruhito", gender: "M", fullTitle: "Naruhito, Crown Prince of Japan", kanjiName: "皇太子徳仁親王", orderInSuccession: "1", birthYear: "1960" },
{ key: 24, parent: 23, name: "Aiko", gender: "F", fullTitle: "Aiko, Princess Toshi", kanjiName: "敬宮愛子内親王", birthYear: "2001" },
{ key: 25, parent: 22, name: "Fumihito", gender: "M", fullTitle: "Fumihito, Prince Akishino", kanjiName: "秋篠宮文仁親王", orderInSuccession: "2", birthYear: "1965" },
{ key: 26, parent: 25, name: "Mako", gender: "F", fullTitle: "Princess Mako of Akishino", kanjiName: "眞子内親王", birthYear: "1991" },
{ key: 27, parent: 25, name: "Kako", gender: "F", fullTitle: "Princess Kako of Akishino", kanjiName: "佳子内親王", birthYear: "1994" },
{ key: 28, parent: 25, name: "Hisahito", gender: "M", fullTitle: "Prince Hisahito of Akishino", kanjiName: "悠仁親王", orderInSuccession: "3", birthYear: "2006" },
{ key: 29, parent: 22, name: "Sayako Kuroda", gender: "F", fullTitle: "Princess Sayako of Japan", kanjiName: "黒田清子", birthYear: "1969", statusChange: "In 2005, lost imperial family status by marrying a commoner" },
{ key: 30, parent: 9, name: "Masahito", gender: "M", fullTitle: "Masahito, Prince Hitachi", kanjiName: "常陸宮正仁親王", orderInSuccession: "4", birthYear: "1935" },
{ key: 31, parent: 9, name: "Takako Shimazu", gender: "F", fullTitle: "Princess Takako", kanjiName: "島津貴子", birthYear: "1939", statusChange: "In 1960, lost imperial family status by marrying a commoner" },
{ key: 32, parent: 31, name: "Yorihisa Shimazu", gender: "M", fullTitle: "No Title", birthYear: "1962" },
{ key: 33, parent: 8, name: "Yasuhito", gender: "M", fullTitle: "Yasuhito, Prince Chichibu of Japan", kanjiName: "秩父宮 雍仁", birthYear: "1902", deathYear: "1953" },
{ key: 34, parent: 8, name: "Nobuhito", gender: "M", fullTitle: "Nobuhito, Prince Takamatsu", kanjiName: "高松宮宣仁親王", birthYear: "1905", deathYear: "1987" },
{ key: 35, parent: 8, name: "Takahito", gender: "M", fullTitle: "Takahito, Prince Mikasa", kanjiName: "三笠宮崇仁親王", orderInSuccession: "5", birthYear: "1915" },
{ key: 36, parent: 35, name: "Yasuko Konoe", gender: "F", fullTitle: "Princess Yasuko of Mikasa", kanjiName: "甯子内親王", birthYear: "1944", statusChange: "In 1966, lost imperial family stutus by marrying a commoner" },
{ key: 37, parent: 36, name: "Tadahiro", gender: "M", fullTitle: "None" },
{ key: 38, parent: 35, name: "Tomihito", gender: "M", fullTitle: "Prince Tomohito of Mikasa", kanjiName: "三笠宮寬仁", orderInSuccession: "6", birthYear: "1946" },
{ key: 39, parent: 38, name: "Akiko", gender: "F", fullTitle: "Princess Akiko of Mikasa", kanjiName: "彬子女王", birthYear: "1981" },
{ key: 40, parent: 38, name: "Yoko", gender: "F", fullTitle: "Princess Yoko of Mikasa", kanjiName: "瑶子女王", birthYear: "1983" },
{ key: 41, parent: 35, name: "Yoshihito", gender: "M", fullTitle: "Yoshihito, Prince Katsura", kanjiName: "桂宮 宜仁親王", orderInSuccession: "7", birthYear: "1948" },
{ key: 42, parent: 35, name: "Masako Sen", gender: "F", fullTitle: "Princess Masako of Mikasa", kanjiName: "容子内親王", birthYear: "1951", statusChange: "In 1983, lost imperial family status by marrying a commoner" },
{ key: 43, parent: 42, name: "Akifumi", gender: "M", fullTitle: "No Title" },
{ key: 44, parent: 42, name: "Takafumi", gender: "M", fullTitle: "No Title" },
{ key: 45, parent: 42, name: "Makiko", gender: "F", fullTitle: "No Title" },
{ key: 46, parent: 35, name: "Norihito", gender: "M", fullTitle: "Norihito, Prince Takamado", kanjiName: "高円宮憲仁親王", birthYear: "1954", deathYear: "2002" },
{ key: 47, parent: 46, name: "Tsuguko", gender: "F", fullTitle: "Princess Tsuguko of Takamado", kanjiName: "承子女王", birthYear: "1986" },
{ key: 48, parent: 46, name: "Noriko", gender: "F", fullTitle: "Princess Noriko of Takamado", kanjiName: "典子女王", birthYear: "1988" },
{ key: 49, parent: 46, name: "Ayako", gender: "F", fullTitle: "Princess Ayako of Takamado", kanjiName: "絢子女王", birthYear: "1990" },
{ key: 50, parent: 1, name: "Masako", gender: "F", fullTitle: "Princess Masako of Tsune", birthYear: "1888", deathYear: "1940" },
{ key: 51, parent: 50, name: "Takeda Tsuneyoshi", gender: "M", fullTitle: "Prince Takeda Tsunehisa", kanjiName: "竹田宮恒徳王", birthYear: "1909", deathYear: "1992", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 52, parent: 51, name: "Takeda Tsunetada", gender: "M", fullTitle: "Prince Takeda Tsunetada", kanjiName: "竹田恒正王", birthYear: "1940", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 53, parent: 52, name: "Takeda Tsunetaka", gender: "M", fullTitle: "No Title", birthYear: "1967" },
{ key: 54, parent: 52, name: "Takeda Hiroko", gender: "M", fullTitle: "No Title", birthYear: "1971" },
{ key: 55, parent: 51, name: "Takeda Motoko", gender: "F", fullTitle: "Princess Takeda Motoko", kanjiName: "素子女王", birthYear: "1942", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 56, parent: 51, name: "Takeda Tsunekazu", gender: "M", fullTitle: "No Title", kanjiName: "竹田恒和王", birthYear: "1944", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 57, parent: 51, name: "Takeda Noriko", gender: "F", fullTitle: "Princess Takeda Noriko", kanjiName: "紀子女王", birthYear: "1943", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 58, parent: 51, name: "Tsuneharu Takeda", gender: "M", fullTitle: "Prince Tsuneharu Takeda", kanjiName: "竹田恒治王", birthYear: "1945", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 59, parent: 50, name: "Takeda Ayako", gender: "F", fullTitle: "Princess Tsune-no-Miya Takeda Ayako", kanjiName: "禮子女王", birthYear: "1911", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 60, parent: 1, name: "Fusako", gender: "F", fullTitle: "Princess Fusako of Kane", birthYear: "1890", deathYear: "1974" },
{ key: 61, parent: 60, name: "Kitashirakawa Nagahisa", gender: "M", fullTitle: "Prince Kitashirakawa Nagahisa", kanjiName: "北白川宮永久王", birthYear: "1910", deathYear: "1940" },
{ key: 62, parent: 61, name: "Kitashirakawa Michihisa", gender: "M", fullTitle: "Prince Kitashirakawa Michihisa", birthYear: "1937", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 63, parent: 62, name: "Kitashirakawa Naoko", gender: "F", fullTitle: "No Title", birthYear: "1969" },
{ key: 64, parent: 62, name: "Kitashirakawa Nobuko", gender: "F", fullTitle: "No Title", birthYear: "1971" },
{ key: 65, parent: 62, name: "Kitashirakawa Akiko", gender: "F", fullTitle: "No Title", birthYear: "1973" },
{ key: 66, parent: 61, name: "Hatsuko", gender: "F", fullTitle: "Princess Hatsuko", birthYear: "1939", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 67, parent: 60, name: "Kitashirakawa Mineko", gender: "F", fullTitle: "Princess Kitashirakawa Mineko", kanjiName: "美年子女王", birthYear: "1910", deathYear: "1970", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 68, parent: 60, name: "Kitashirakawa Sawako", gender: "F", fullTitle: "Princess Kitashirakawa Sawako", kanjiName: "佐和子女王", birthYear: "1913", deathYear: "2001", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 69, parent: 60, name: "Kitashirakawa Taeko", gender: "F", fullTitle: "Princess Kitashirakawa Taeko", kanjiName: "多惠子女王", birthYear: "1920", deathYear: "1954", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 70, parent: 1, name: "Nobuko", gender: "F", fullTitle: "Princess Fumi-no-Miya Nobuko", birthYear: "1891", deathYear: "1933" },
{ key: 71, parent: 70, name: "Asaka Kikuko", gender: "F", fullTitle: "Princess Asaka Kikuko", kanjiName: "紀久子", birthYear: "1911", deathYear: "1989", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 72, parent: 70, name: "Asaka Takahiko", gender: "M", fullTitle: "Prince Asaka Takahiko", kanjiName: "朝香 孚彦", birthYear: "1913", deathYear: "1994", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 73, parent: 72, name: "Fukuko", gender: "F", fullTitle: "No Title" },
{ key: 74, parent: 72, name: "Minoko", gender: "F", fullTitle: "No Title" },
{ key: 75, parent: 72, name: "Tomohiko", gender: "M", fullTitle: "No Title" },
{ key: 76, parent: 70, name: "Asaka Tadahito", gender: "M", fullTitle: "Prince Asaka Tadahito", kanjiName: "朝香正彦", birthYear: "1914", deathYear: "1944" },
{ key: 77, parent: 70, name: "Asaka Kiyoko", gender: "F", fullTitle: "Princess Asaka Kiyoko", kanjiName: "湛子", birthYear: "1919", statusChange: "In 1947, lost imperial family status due to American abrogation of Japanese nobility" },
{ key: 78, parent: 1, name: "Ten Other Children Not Surviving Infancy" },
{ key: 79, parent: 0, name: "Five Other Children Not Surviving Infancy" }
];
// create the model for the family tree
myDiagram.model = new go.TreeModel(nodeDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 600px"></div>
<p>For a variation of this tree, see the <a href="familyTree.html">British family tree sample</a>.</p>
<p>For a more complex family tree see the <a href="genogram.html">genogram sample</a>.</p>
</div>
</body>
</html>