markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
203 lines (192 loc) • 18.7 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Family Tree (Japanese)</title>
<meta name="description" content="A family tree diagram showing Japanese royalty." />
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<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 =
$(go.Adornment, "Auto",
$(go.Shape, "Rectangle",
{ fill: "whitesmoke", 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>