How to show marriages in the "family tree" on d3.js?

Question

I am an HTML / CSS developer, exploring javascript solutions to create a "family tree" that should demonstrate marriages (outside the family, of course) in a meaningful way.

Essentially, I watch how it relies on a dendrogram based on d3.js, for example. http://bl.ocks.org/4063570 , but I struggled to find something there that expresses “marriages”.

Below is an image of the data on which I will describe the following:

Any help / suggestions / links would be much appreciated! I just don’t know if this is possible, but I would like to use d3.js, as it looks so well made and, apparently, universal.

Answer 1

There are several options, but I believe that each of them will require a little work. This would help if there was one standard for representing a family tree in JSON. I recently noticed that geni.com has a fairly in-depth API for this. Perhaps encoding against their API would be a good idea for reuse ...

- Family tree -

A family tree may be sufficient for your needs. You would make a legal connection where, if you click on your name, the schedule will be redrawn so you can see their pedigree.

- Bracket layout tree -

Like a family tree, but bidirectional, this Bracket Layout Tree allows you to process a view like "my parents, grandparents, children, grandchildren." Like the Pedigree Tree, you can bind individuals to rearrange the brackets on the node.

- Power based layout -

There are some interesting power layouts that seem promising. Take a look at this example of a smart layout power layout . Adjusting the algorithm for determining "strength" can make it a very beautiful tree with older generations above or below new ones.

- Cluster dendrogram (why it does not work) -

The d3.js layouts that I saw that are best suited for family trees suggest that one node is a parent, whereas you need to present the parent as a combination (visually “T” between them) nodes: one node, which is a member of your tree, and one floating node that represents the son-in-law. Setting up the cluster dendrogram for this should be feasible, but not without significant changes.

If you - or anyone else - decide, let me know. I would like to see (and capitalize on) the work and possibly contribute to it, if possible.

Answer 2

I also needed to draw pedigrees with D3, so I figured out how to do this. I have created examples that show the main functions, and then add additional functions, such as expanding and showing descendants.

I do not know how you want to display marriages. Marriages are inherent in the pedigree of the pedigree, but not in the descending diagram. The code can be adapted to display spouses in descendant nodes.

This is what it looks like. Style can be customized as desired.

Answer 3

This requires some work, but it seems that the idea I am proposing is a power layout with a special kind of node called a relation that does not draw a circle. It is a binding between two entities and can be the parent of a larger number of nodes.

In d3, you can expand all data structures according to what you want, then there is more data binding work, but it is all customizable. Here is an example of data structures that I would use in a force layout.

{ "nodes": [ { "type": "root", "x": 300, "y": 300, "fixed": true }, { "type": "male", "name": "grandpa" }, { "type": "female", "name": "grandma" }, { "type": "relationship" }, { "type": "male", "name": "dad" }, { "type": "female", "name": "mum" }, { "type": "relationship" }, { "type": "male", "name": "I" } ], "links": [ { "source": 0, "target": 2 }, { "source": 1, "target": 2 }, { "source": 0, "target": 3 }, { "source": 3, "target": 4 }, { "source": 4, "target": 6 }, { "source": 5, "target": 6 }, { "source": 6, "target": 7 } ] } 

I hope I clarified something about the possibilities of d3.

Answer 4

Vashikaran is a very inspiring art to mesmerize any person and thing, mainly a person who uses this act to solve any problem in life, they get rid of any problem at any time, this is a very powerful mantra and helps a person who provides services as a specialist-wasikaran. call now: - (+ 91-9876706621) http://www.famousvashikaranspecialist.com/

enter image description here