search

nliautaud / gedcom-svg-fanchart

Create a SVG genealogical fan chart from a GEDCOM file.
https://nliautaud.github.io/gedcom-svg-fanchart/
MIT License
16 stars 2 forks source link
chart fan fan-chart gedcom genealogical-trees genealogy javascript

readme

gedcom-svg-fanchart

Create a SVG genealogical fan chart from a GEDCOM file.

Capture|

Usage

Download the repository and open it with your web browser, or go to the live version.

Drop a GEDCOM file onto the page.

Objectives

As i never found a genealogical charting tool fulfilling the three following ideas, I made a rough one :

Charts should be able to be colored according to any genealogical data. Genealogical charts, without even reading their content, can be a powerful vizualisation tool. In the case of a fan chart, coloring slices create a sort of genealogical pie chart, where the distribution of the data is instinctively visualizable as an ancestrial percentage.

Editing charts should be simple and immediate :

Charts should adapt to the content and user wishes, not the contrary. The charts should be drawn dynamically in the most lisible way considering the given requirements.

Settings

Dynamic text templates

The chart title and individual labels use text templates, where keywords in uppercase are dynamicaly replaced by corresponding values. See Data keywords.

The chart is automatically updated when the individuals text field is out of focus, and drawn in the best way possible according to the texts contents and the aspect settings.

Navigation

The origin is the individual at the center of the chart. Write names to fuzzy-search in the list. You can also double-click on the chart.

By checking auto resize, the chart will be fit and centered into the page when updated. You may want to uncheck it to maintain a specific zoom and position.

You can move and zoom onto the chart at any time by dragging/scrolling/pinching.

Aspect

The chart and labels are sized and drawn in the smallest and most readable way according to the following aspect settings.

The first generations circles are written "horizontally" and the slices are sized to contain all the lines of text. For the next generations, as the slices width are smaller and smaller, the content is written "verticaly" (pointing outside). The slices are sized to contain the texts line length, and displays only the number of lines who fits in.

The texts are drawn in the best direction depending on the slice orientation and the chart rotation.

The padding add space around labels, and the generation spacing add some space between each generation circles.

Colors

The chart can be dynamically colored according to each data, corresponding to the data keywords, by using the color palette drop-down. Gradients are generated for numerical values (ex. dates, sources qualities...), and distinct colors for others (ex. names, places...).

The palette selection drop-down is also as a fuzzy-search filter.

Highlights
Specific informations can be highlighted by limiting the coloring to certain selected values. All the values are colored by default.

Global coloring
By default palettes are generated once, with a distinct color for each existing data variant, even for the ones not currently on the chart. Palettes are thus not recomputed when navigating, and same values will have the same color accross charts. But the more variants there are, the more chances there will be of similar colors, as the colors are not optimized for the current chart. By disabling the global coloring option, color palettes are specifically generated for the values of the current chart.

Legend
The chart legend is a list of the colors and their corresponding values, sorted by occurences. The maximum legend number can be changed in the settings. The legend title and labels are directly editables, and will retain their new value accross charts.

Data keywords

Any GEDCOM tag is associated to its data field.

SEX         M
OCCU        Astronaut
...         ...

Custom keywords :

LAST        Doe
SURN        John Joseph-Alexander (complete surnames)
SURS        John / Joseph / Alexander (individual surnames)
GID         @00157@
GENS        8 (number of generations, used in title)

Each one of the following can be prefixed by B and D for birth and death data (ex. birth place, death sources, etc.). Not prefixed, they'll return every value known for the individual (ex. several countries, multiple sources, etc.) :

DATE       ABT 24 JUN 1936
YEAR       1936
MON        6
DAY        24
PRE        abt.
DEC        1930
CEN        1900
PLAC       Lorentz Crater, Northwest limb, Bright side, Moon
CNTR       Moon
STAT       Bright side
DSTR       Northwest limb
TOWN       Lorentz Crater
AREA       Lorentz Crater (smallest known place)
SOUR       NASA Bigest book
SGID       @00037@
SQUA       7 (sources quality)

Each event tag can be prefixed by AG to get the age at the event date (if there is one) :

AGDEAT      75 (age at death)
AGIMMI      28 (age at immigration)
...

Values can be truncated by using numbers and dots :

SURN        John Alexander
SURN1       John
SURN.1      John A.
SURN..1     John...
SURN...1    J...

Editing

The chart style is extensively editable with CSS, as every slice is populated with useful CSS classes of form .TAGNAME_tagvalue. Each line of text is displayed as a separate <text> element, with the different pieces of information surrounded by <tspan>.

<g class="slice GEN_5 SEX_f OCCU_astronaut SOUR_s0019 SOUR_s0032 NOTE_n0132 LAST_doe SURN_john SURN_alexander">
    <path></path>
    <text><tspan>John A.</tspan><tspan> </tspan><tspan>Doe</tspan></text>
    <text><tspan>Asronaut</tspan></text>
</g>

The dynamic coloring for example is done by attributing a distinct fill color to every class of a tag type, preceded by a trigger class :

.show_SURN .SURN_john path {fill: red}
.show_SURN .SURN_paul path {fill: green}
.show_OCCU .OCCU_astronaut path {fill: skyblue}

Saving & printing

The Save button will download a working version of the software in a single .html file that include the GEDCOM data.

Print / export the document to PDF by using Print / Export PDF or the shortcut Cmd + P. You'll be able to customize the document (portrait or landscape, document size...) trough the Print menu of your web browser.

Export the raw chart (without the legends or title) to SVG by using Export SVG.

Note that the original software is remotely querying some external libraries. By using Save page as of your browser (or Cmd + S), you may save a local version with libraries stored in a data folder next to the file (the data folder name is browser-specific).

External libraries

Tests

Tested with GEDCOM files exported from Gramps (https://gramps-project.org).

Tested on desktop with latest chrome, firefox & safari.