Addon:D3 Ancestral and Descendant Charts

This is a Third-party Addon. The Addon/Plugin system is controlled by the Plugin Manager. Please use carefully on data that is backed up, and help make it better by reporting any issues to the bug tracker. Unless otherwise stated on this page, you can download this addon by following these instructions. Please note that some Addons have prerequisites that need to be installed before they can be used.

Report menu selection highlighted

The D3 Ancestral and Descendant Charts addon consists of three(3) Web based reports:

• Ancestral Collapsible Tree
• Ancestral Fan Chart
• Descendant Indented Tree.

Each chart uses the D3.js library for its layout which are SVG based and provide some really nice inter-activeness and animation.

Note the filtering is based off the text based Ancestry and Descendant Reports.

All of the reports generate a JSON file for ancestry/descendant's and could be easily customized for other usage.

Usage

Ancestral Collapsible Tree

Ancestral Collapsible Tree - example output

This report is available under the menu Reports > Web Pages > Ancestral Collapsible Tree...

A graphical representation of ancestry for a given individual.

By default up to Great Grandparents are displayed.

Clicking on an ancestor whom has further ancestors will either collapse or expand all ancestors for that person.

Specific customizable colors indicate whether there are further ancestors for a given person, and can be specified for maternal and paternal lines.

Ancestral Collapsible Tree Options

Ancestral Collapsible Tree Options tab for Ancestral Collapsible Tree - Web Report - Addon - D3 Charts

• Center Person: the center person for the report, defaults to the current active person.
  • Select a different person button to change the center person it will opens the Select Person selector allowing you to change the center person, by selecting the [] Show all check box.
• Name Format: - Select the format to display the names. This choice in normally taken from the default setting in Edit > Data tab's Display Options section for Name format:. Or to override that setting for the report choose from:
  • Default - (in a new Family Tree this is normally Surname, Given Suffix )
  • Surname, Given Suffix
  • Given Surname Suffix
  • Given
  • Main Surnames, Given Patronymic Suffix
  • SURNAME, Given (Common)
• Include Generations: (10 default) The number of generations to include in the report.
• Male Background Color:
• Male Expandable Background Color:
• Female Background Color:
• Female Expandable Background Color:
• Destination:
  • Select a folder
• Filename:

This article's content is incomplete or a placeholder stub. Please update or expand this section.

Ancestral Fan Chart

Ancestral Fan Chart - example output

This report is available under the menu Reports > Web Pages > Ancestral Fan Chart...

The Ancestral Fan Chart report illustrates an individuals ancestry by means of a full circle fan chart.

The initial display shows the filtered individual at the center of the fan chart.

Selecting individuals on the fan chart will result in that individual becoming the center person and a new fan chart is drawn dynamically indicating that persons ancestry.

Continuous selection of the center of the fan chart will eventually return you to the original filter person, a page reload will also do this.

Custom colors can be provided for paternal and maternal sides of the filtered person.

Ancestral Fan Chart Options

Ancestral Fan Chart Options tab for Ancestral Fan Chart - Web Report - Addon - D3 Charts

• Center Person: the center person for the report, defaults to the current active person.
  • Select a different person button to change the center person it will opens the Select Person selector allowing you to change the center person, by selecting the [] Show all check box.
• Name Format: - Select the format to display the names. This choice in normally taken from the default setting in Edit > Data tab's Display Options section for Name format:. Or to override that setting for the report choose from:
  • Default - (in a new Family Tree this is normally Surname, Given Suffix )
  • Surname, Given Suffix
  • Given Surname Suffix
  • Given
  • Main Surnames, Given Patronymic Suffix
  • SURNAME, Given (Common)
• Include Generations: (10 default) The number of generations to include in the report.
• Paternal Background Color:
• Maternal Background:
• Destination:
  • Select a folder
• Filename:

This article's content is incomplete or a placeholder stub. Please update or expand this section.

Descendant Indented Tree

Descendant Indented Tree - example output

This report is available under the menu Reports > Web Pages > Descendant Indented Tree...

The Descendant Indented Tree report is a graphical representation of the text based Descendant Report.

When clicking on a person if that person has further descendants, then the tree will dynamically expand or collapse depending on its current state.

As with the other reports some customizable colors can be specified at generation time. In this report they pertain to whether there are more descendants to view or not.

Report Options

Report Options tab for Descendant Indented Tree - Web Report - Addon - D3 Charts

• Center Person: the center person for the report, defaults to the current active person.
  • Select a different person button to change the center person it will opens the Select Person selector allowing you to change the center person, by selecting the [] Show all check box.
• Name Format: - Select the format to display the names. This choice in normally taken from the default setting in Edit > Data tab's Display Options section for Name format:. Or to override that setting for the report choose from:
  • Default - (in a new Family Tree this is normally Surname, Given Suffix )
  • Surname, Given Suffix
  • Given Surname Suffix
  • Given
  • Main Surnames, Given Patronymic Suffix
  • SURNAME, Given (Common)
• Numbering system:

This article's content is incomplete or a placeholder stub. Please update or expand this section.

Content

Content tab for Descendant Indented Tree - Web Report - Addon - D3 Charts

This article's content is incomplete or a placeholder stub. Please update or expand this section.

Navigation

Navigation tab for Descendant Indented Tree - Web Report - Addon - D3 Charts

This article's content is incomplete or a placeholder stub. Please update or expand this section.

Biography Content

Biography Content tab for Descendant Indented Tree - Web Report - Addon - D3 Charts

This article's content is incomplete or a placeholder stub. Please update or expand this section.

Issues

• Help buttons URL's on report dialogs do not lead here. (Note Wiki button in addon manager entry works)
• ?????: Descendant Indented Tree - fails if, on the Biography Content tab, Include Photo/Images from Gallery is ticked.[1]
• 11800: D3 Chart update of d3.js and jquery libraries to newer versions [2]
  • Uses D3.js version 3.4.5 (and not the current release)
  • Uses jquery v1.10.2 and 2.0.3 which are no longer supported or patched
  • Uses jquery-ui v1.10.4 which is also outdated
  • Uses D3.tip which is no longer supported.
• Does not work with MS-IE 11?[3] If anyone is still facing the problem [with MS-IE 11] here the solution is to add these 2 lines to your html file:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

If not IE doesn't understand the property CSSStyleDeclaration in your d3.js file.

Charts appear without content when using local mode

Charts appear without content - related to a security vulnerability update to Browsers. (i.e. local HTML files ought not to be authorized to open files from different sub-directories) This shouldn't be a problem once the files are uploaded to a server. It is just local mode that is affected.

• 9602: [Upstream Browser Security Change]HTML & SVG generated report doesn't work for local file system with browser

Workarounds for local mode

available for:

Firefox

In Firefox type about:config in the URL bar ([4]) select Proceed with Caution and change the relevant setting for your version:

• Before Firefox 95 set:
  • privacy.file_unique_origin flag
  • to false
• Starting with Firefox 95 set:
  • security.fileuri.strict_origin_policy
  • to false

Google Chrome

Chrome launch flags: C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

Microsoft Edge

Reports are not displayed correctly, no workaround available.[5]

Apple Safari

Reports display correctly, no workaround required.[6]

See Also

• Web Solutions for Gramps
• Addon:JSON Export Import