Difference between revisions of "Addon:D3 Ancestral and Descendant Charts"

From Gramps
Jump to: navigation, search
m (Issues)
(38 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Third-party plugin}}
 
{{Third-party plugin}}
  
The "D3 Ancestral/Descendant Chart" plugin consists of 3 Web based report plugins, Ancestral Collapsible Tree,
+
The '''D3 Ancestral/Descendant Chart''' addon consists of three(3) Web based reports:
Ancestral Fan Chart and Descendant Indented Tree.
+
* {{man label|[[D3_Ancestral/Descendant_Charts#Ancestral_Collapsible_Tree|Ancestral Collapsible Tree]]}}
 +
* {{man label|[[D3_Ancestral/Descendant_Charts#Ancestral_Fan_Chart|Ancestral Fan Chart]]}}
 +
* {{man label|[[D3_Ancestral/Descendant_Charts#Descendant_Indented_Tree|Descendant Indented Tree]]}}.
  
Each chart used the D3.js library for it's layout which are SVG based and provide some really nice interactiveness and animation.
+
Each chart used the [[Output_formats#D3|D3.js library]] for its layout which are SVG based and provide some really nice inter-activeness and animation.
  
The filtering is based off the text based Ancestry and Descendant Reports.
+
Note the filtering is based off the text based Ancestry and Descendant Reports.
  
All of the reports generate JSON for ancestry/descendant's and could be easily customized for other usage.
+
All of the reports generate [https://en.wikipedia.org/wiki/JSON JSON] for ancestry/descendant's and could be easily customized for other usage.
  
==Installation==
+
== Usage ==
Download the appropriate file for your Gramps version:
 
*Gramps 3.4 Version : http://www.iflaf.com/mattman/familytree/gramps/D3Charts34-1.0.tar.gz
 
*Gramps 4.0+ Version : http://www.iflaf.com/mattman/familytree/gramps/D3Charts40-1.0.tar.gz
 
  
 +
=== Ancestral Collapsible Tree ===
 +
[[File:D3-AncestralCollapsibleTree-WebReport-Addon-example-50.png|thumb|right|450px|Ancestral Collapsible Tree - example output]]
 +
 +
This report is available under the menu {{Man menu|Reports > Web Pages > Ancestral Collapsible Tree...}}
  
== Ancestral Collapsible Tree ==
 
[[Image:D3Chart-AncestralCollapsibleTree.png|thumb|right|400px|Sample Ancestral Collapsible Tree]]
 
 
A graphical representation of ancestry for a given individual.
 
A graphical representation of ancestry for a given individual.
  
 
By default up to Great Grandparents are displayed.
 
By default up to Great Grandparents are displayed.
  
Clicking on an ancestor whom has further ancestors
+
Clicking on an ancestor whom has further ancestors will either collapse or expand all ancestors for that person.
will either collapse or expand all ancestors for that person.
 
 
 
Specific customizable colors indicate whether there are
 
futher ancestors for a given person, and can be
 
specified for maternal and paternal lines.
 
 
 
  
 +
Specific customizable colors indicate whether there are further ancestors for a given person, and can be specified for maternal and paternal lines.
  
 +
{{-}}
  
 +
=== Ancestral Fan Chart ===
  
 +
[[File:D3-AncestralFanChart-WebReport-Addon-example-50.png|thumb|right|450px|Ancestral Fan Chart - example output]]
  
 +
This report is available under the menu {{Man menu|Reports > Web Pages > Ancestral Fan Chart...}}
  
 
+
The Ancestral Fan Chart report illustrates an individuals ancestry by means of a full circle fan chart.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
== Ancestral Fan Chart ==
 
[[Image:D3Chart-AncestralFanChart.png|thumb|right|400px|Sample 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.
 
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  
+
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.
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
+
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.
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.  
 
Custom colors can be provided for paternal and maternal sides of the filtered person.  
  
 +
{{-}}
  
 +
=== Descendant Indented Tree ===
  
 +
[[File:D3-DescendantIndentedTree-WebReport-Addon-example-50.png|thumb|right|450px|Descendant Indented Tree - example output]]
  
 +
This report is available under the menu {{Man 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.
  
 +
{{-}}
  
 +
== Issues ==
 +
* 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.  Workarounds for local mode available for:
 +
** set [https://gramps.discourse.group/t/web-page-reports-have-no-content/411/8 Firefox] <tt>privacy.file_unique_origin flag</tt> to false in [http://kb.mozillazine.org/About:config about:config]
 +
** Chrome launch flags: <pre>C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt</pre>
 +
* Help buttons URL's on report dialogs do not lead here.
 +
* {{bug|9602}}: Descendant Indented Tree doesn't work with Chromium browser
 +
* {{bug|11800}}: D3 Chart update of d3.js and jquery libraries to newer versions
 +
** Uses D3.js version 3.4.5  (and not the [https://d3js.org/ current release])
 +
** Uses [https://jquery.com/ jquerry] also outdated
 +
* Does not work with MS-IE 11?[https://github.com/d3/d3/issues/599#issuecomment-32245110]
 +
If anyone is still facing the problem [with MS-IE 11] here is the solution:
  
 +
Add this 2 lines to your html file.
  
 +
<code><meta http-equiv="X-UA-Compatible" content="IE=edge" /></code>
  
 
+
If not IE doesn't understand the property CSSStyleDeclaration in your d3.js file.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
== Descendant Indented Tree ==
 
[[Image:D3Chart-DescendantIndentedTree.png|thumb|right|400px|Sample 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 it's 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.
 
 
 
  
  

Revision as of 20:08, 11 July 2020

Gramps-notes.png

Please use carefully on data that is backed up, and help make it better by reporting any comments or problems to the author, or 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.
This Addon/Plugin system is controlled by the Plugin Manager.


The D3 Ancestral/Descendant Chart addon consists of three(3) Web based reports:

Each chart used 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 JSON 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 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.


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.


Issues

  • 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. Workarounds for local mode available for:
    • set Firefox privacy.file_unique_origin flag to false in about:config
    • Chrome launch flags:
      C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
  • Help buttons URL's on report dialogs do not lead here.
  • 9602: Descendant Indented Tree doesn't work with Chromium browser
  • 11800: D3 Chart update of d3.js and jquery libraries to newer versions
  • Does not work with MS-IE 11?[1]

If anyone is still facing the problem [with MS-IE 11] here is the solution:

Add this 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.