Построение родового дерева на клиенте (браузер) имея входные данные

Постановка задачи:

построить визуальное представление родового дерева на странице .html (или любой другой, поддерживаемой браузером, не суть).

Тип исходных данных:

в БД хранятся записи о персонах. Каждая персона располагает собственным набором информации (такие как: фото персоны, дата рождения, имя, дата смерти если уже случилось, описание характера личности и т.п.), содержит ссылки на двух родителей, содержит ссылки на заключенные и, если случилось, расторгнутые браки с иными персонами.

Проект на серверной стороне реализован на c# (ASP.NET). Если кому поможет в понимании с какой стороны подойти к реализации задачи, то во тчто мы имеем:

List<People> peoples - массив людей, входящих в родовое дерево может содержать от 1 до 1000 человек.

Само описание типа People:

namespace Classes

{

    public class People

    {

        #region Основные данные

        /// <summary>

        /// Идентификатор персоны

        /// </summary>

        public int Id { get; set; }

        /// <summary>

        /// Имя персоны

        /// </summary>

        public string Name { get; set; }

        /// <summary>

        /// Дата рождения персоны

        /// </summary>

        public DateTime BirthDay { get; set; }

        /// <summary>

        /// Дата смерти персоны (если еще жива, то значение минимальное)

        /// </summary>

        public DateTime DeathDay { get; set; }

        /// <summary>

        /// Возраст

        /// </summary>

        public int Age { get; set; }

        /// <summary>

        /// Идентификатор отца

        /// </summary>

        public int Parent1_Id { get; set; }

        /// <summary>

        /// Идентификатор матери

        /// </summary>

        public int Parent2_Id { get; set; }

        /// <summary>

        /// Первый родитель (отец)

        /// </summary>

        public People Parent1 { get; set; }

        /// <summary>

        /// Второй родитель (мать)

        /// </summary>

        public People Parent2 { get; set; }

        /// <summary>

        /// История рождения

        /// </summary>

        public string BirthDayHistory { get; set; }

        /// <summary>

        /// Обстоятельства смерти

        /// </summary>        

        public string DeathDayHistory { get; set; }

        #endregion

        #region дополнительные заметки, особые даты

        /// <summary>

        /// Дополнительные заметки

        /// </summary>

        public string Common { get; set; }

        /// <summary>

        /// Особые даты и события: [дата1][описание1]|[дата2][описание2]

        /// </summary>

        public string Specials { get; set; }

        #endregion

        /// <summary>

        /// Идентификатор аккаунта в системе

        /// </summary>

        public int UserId { get; set; }

        public List<Classes.Vedding> Veddings { get; set; }

        public People()

        {

        }

    }

}

Само описание типа Vedding:

namespace Classes

{

    public class Vedding

    {        

        /// <summary>

        /// Идентификатор в системе

        /// </summary>

        public int Id { get; set; }

        /// <summary>

        /// Идентификатор партнера 1 в системе

        /// </summary>

        public int Name1_Id { get; set; }        

        /// <summary>

        /// Идентификатор партнера 2 в системе

        /// </summary>

        public int Name2_Id { get; set; }

        /// <summary>

        /// Дата росписи

        /// </summary>

        public DateTime VeddingDate { get; set; }

        /// <summary>

        /// История бракосочетания

        /// </summary>

        public string VeddingHistory { get; set; }

        /// <summary>

        /// История развода

        /// </summary>

        public string DivorcedHistory { get; set; }

        /// <summary>

        /// Дата развода

        /// </summary>

        public DateTime DivorceDate { get; set; }

        public Vedding()

        {

        }

    }

}

Особенности задачи:

особенность дерева состоит в том, что оно предусмотрено для отображения не только вертикальных ветвей от основной персоны и через родителей, родителей родителей и дальше пра-пра, но и для отображения паралельных веток братьев и сестер на каждом колене (братья и сестры, в том числе сводные, у главной персоны, у родителей, у прародителей и т.д.). Таким образом, дерево не только вертикально ориентировано, но и горизонтально на различное удаление от центра по горизонтали.

К примеру, в дереве могут присутствовать тети и дяди, а также двоюродные дедушки и бабушки с их потомками, двоюродные братья и сестры.

Думаю, суть ясна.

В приложениях несколько графических файлов, поясняющих примерный вид задуманного.

Возможно для исполнителя станет полезным библиотеки для клиентской реализации:

https://almende.github.io/vis/network_examples.html 

https://almende.github.io/vis/examples/network/nodeStyles/imagesWithBorders.html  (на примере интерактивных элементов, способных к перемещению мышкой).

Что ожидается от исполнителя:

1. предоставить полную реализацию сего на странице .html;
2. предоставить требования в каком виде следует поставить пакет данных на страницу .html;
3. реализовать задачу так, что бы в будущем возможно было без проблем добавить/удалить новые пункты данных без поломки всей системы.

Дополнительно:

можно активировать один элемент и должно быть выделены все нисходящие родовые ветки, а справа во фрейме должно вывестись вся информация по персоне.

Наши уточнения по проекту и Ваша стоимость работ - в личной переписке.