Create a SVG genealogical fan chart from a GEDCOM file.
|
Download the repository and open it with your web browser, or go to the live version.
Drop a GEDCOM file onto the page.
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 :
- Being able to edit displayed informations by direct editing of content or templates.
- Being able to tweak every visual aspects of the chart.
- Being able to see the changes immediately.
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.
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.
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.
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.
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.
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...
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}
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).
- GEDCOM parser : https://github.com/tmcw/parse-gedcom
- SVG drawing : https://github.com/adobe-webplatform/Snap.svg
- SVG pan and zoom : https://github.com/huei90/snap.svg.zpd
- Colors generation : https://github.com/medialab/iwanthue
- Textarea resizing : https://github.com/jackmoore/autosize
- Searchable fields : https://github.com/jshjohnson/Choices
Tested with GEDCOM files exported from Gramps (https://gramps-project.org).
Tested on desktop with latest chrome, firefox & safari.