I'm currently working on a small genealogy experiment and would like to implement a simple family tree like in the picture below.
The best search results so far for this only yielded examples where a child can only have a parent node. But what I need is the ability to create links between entities (from father to mother) and links between nodes and other links (from child to the father-mother link).
Currently I don't have a fixed data schema for this.
I've chosen d3.js for this because it looks like would be capable of doing the job. I just don't know how or even where to start. Tutorials about d3.js only cover standard charts like bar charts.
I hope someone can help me with this.
My approach is as under:
Lets take the example you have illustrated in the attached figure:
Jenny Of Oldstones is also a the child of Aegon V but the difference between this child and other children of Aegon V is that in this case I am not drawing the link between it.
This is done by setting the node as no_parent: true in the node JSON
example:
//Here Q will not have a parent
{
name: "Q",
id: 16,
no_parent: true
}
In the code check the _elbow function_ this does the job of not drawing the line between it and its parent:
if (d.target.no_parent) {
return "M0,0L0,0";
}
Next scenario is the link going between Node Aerys II and Rahella this node has its set of children.
I have created a node between them which is marked as hidden: true,
I make the display:none for such node. It appears that the children are coming from the line between node Aerys II and Rahella
JSON Example:
//this node will not be displayed
{ name: "",
id: 2,
no_parent: true,
hidden: true,
children: [....]
}
In the code check the place where I make the rectangles, the code below hides the node:
.attr("display", function (d) {
if (d.hidden) {
return "none"
} else {
return ""
};
})
Full code is in here:
http://jsfiddle.net/cyril123/0vbtvoon/22/
In the example above, I have made the use of node names A/B/C... but you can change it as per you requirements. You will need to center the text.
I have added comments to the code to help you understand the flow.
Just in case you are not clear on any point please comment I ll be happy to clarify.
dTree is an open source library built on-top of D3 that creates family trees (or similar hierarchical graphs).
It handles the bothersome parts of generating the D3 graph manually and uses a simple json data format:
[{
name: "Father",
marriages: [{
spouse: {
name: "Mother",
},
children: [{
name: "Child",
}]
}]
}]
If you are interested in modifying it supports callback for node rendering and event handler. Finally the library is as of 2016 under development and pull requests are welcomed.
DISCLAIMER: I'm the author of dTree. I created the library after searching the web just like you did and not finding anything to my liking.
The not-as-good news: The research I have done shows that there is no out-of-the-box d3 library that directly accomplishes this without some customization.
The good news: There have been some other people who have looked into this and have found some great starting points! I realize that this is not a complete solution to the entire task at hand, but it seems from your question that a large portion of your difficulty so far has been simply figuring out where to start (e.g. "Tutorials about d3.js only cover standard charts like bar charts."). In the absence of anything better, I will at least respond to that portion here.
First, in the response to this related stackoverflow post from a few years back, inanutshellus provides some great d3 tools that are available and could be of use here. With some light customization/extension, they should be able to get you where you're going relatively quickly. For posterity, inanutshellus's answer is reproduced here:
There are some options, but I believe each would require a bit of
work. It would help if there were one single standard for representing
a family tree in JSON. I've recently noticed that geni.com has a quite
in-depth API for this. Perhaps coding against their API would be a
good idea for reusability...
-- Pedigree tree --
The Pedigree Tree
might be sufficient for your needs. You'd make in-law's linkable,
where if you clicked on their name the graph would redraw so you could
see their lineage.
-- Bracket Layout Tree --
Similar to the Pedigree Tree, but bidirectional, this Bracket Layout Tree
lets you handle a "here are my parents, grandparents, children,
grandchildren" type view. Like the Pedigree Tree, you'd make
individuals linkable to re-center the bracket on that node.
-- Force-Based Layout --
There are some interesting force-based layouts that seem promising.
Take a look at this example of a
force-based layout with smart labels. An adjustment to the
algorithm for how the "force" is determined could make this into a
very lovely tree, with older generations above or below newer ones.
-- Cluster Dendogram (why it fails) --
The d3.js layouts I've seen that would lend themselves best to family
trees assume a single node is the parent, whereas you need to
represent the parent as the combination of (visually a "T" between)
two nodes: one node that is a member of your tree, and one floating
node that represents the in-law. Adjusting a cluster dendogram to do
this should be feasible but not without significant modification.
If you--or anyone else for that matter--tackle this, let me know. I'd
like to see (and benefit from) the work and may be able to contribute
to it if feasible.
In terms of concrete implementation, mj8591 asked this question regarding a similar family tree with a different problem. However, luckily for you that question includes a fiddle (all the js code) that has most or all the components that you need, and the response from mdml includes another fiddle that adds some more granular "clickability" to each node.
Again, it's nothing automagic but hopefully these resources are enough to get you a great start!
I tried dtree and liked it. However, when you add several generations, the horizontal display can make the overall display very large and unwieldy. Instead, I used the Reingold–Tilford Tree. One disadvantage of this tree is each node can have only one parent: spouses cannot be displayed alongside each other: To get past this limitation, I tweaked the JSON to combine spouses into one entity (ex: "husband - wife" ) just before sending it to the tree.
Answering 3 years after the question.
There is now a Pedigree Tree graph from Mike
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
Then there is this d3.tree - A Family Tree
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
You can also try the D3 Tidy Tree again from Mike
https://beta.observablehq.com/#mbostock/d3-tidy-tree
You can use dTree (Based on D3) to achieve your requirement.
Demo: https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7
Reference Link: https://github.com/ErikGartner/dTree
I don't know if this is of any help to you, because you said that you were going to use d3.js but there is another tool that you might want to look into using called jsplumb. It seems perfect for this kind of project: home page. They also have some decent tutorials. There is one more like docs, and another more interactive.
Like I said, if it's not too late to switch technologies, this might be worth trying. It's all html, css, and javascript, so it shouldn't be a harsh transition.
Related
My research has found me powerful libraries like paper.js which are quick to show all the next-level awesome stuff they can do, but I'm not sure how (or if) I can accomplish a basic task:
I want to present a simple Stick Figure to my user:
o
\|/
/ \
Then let them grab the ends of the lines ("hands and feet"), and drag them into different positions, leaving the connecting nodes ("shoulders and hips") intact.
Simple.
In short, what is the simplest way to draw something with lines and nodes that users can manipulate.
Requirements:
Some line lengths are fixed, others can be lengthened.
Some nodes are fixed, others can be moved.
I need to at least display the angles of the lines, but ideally can modify those angles (via text input).
I feel like this shouldn't be this hard, but as I said, most libraries skip the basics and go straight to their coolest features, while any search for "edit vector nodes" and the like brings up lots of irrelevant results about node.js...
Probably you must have found the solution, but since it is unanswered, I thought of posting about a fantastic library I know.
The library is konva.js. You can find demo application references on site itself.
It features powerful set of functions to create custom shapes and layering support(In fact there is lot more). You can easily modify the properties of any shape, add animation and more.
You can find documentation here.
I am looking for a JavaScript method or a framework to achieve this:
So in concrete words I like to have a tree structure same like the one in the Windows Explorer (where you can expand and collapse nodes) and on the right side you should be able to relate nodes to each others.
Building the tree structure is pretty simple, but displaying the relation for the nodes is quite tricky and honestly I don't know how to start.
I tried with various frameworks, but none that I know of has this build in functionallity. Unfortunately I cannot copy any code to JSFiddle...
try https://www.jstree.com/ it will help ;), or look in here http://www.jqueryrain.com/demo/jquery-treeview/
So I have a simple tree graph that is broken down into categories which may change later.
This will be strictly for ipad/chrome, so dont worry about legacy.
I would like the branches(lines) to kind of grow from each category(Voice/video Chat) to following nodes(hangouts, skype etc). I'm pretty sure that canvas is the best way to implement this. The data for the nodes and categories will be fetched from a javascript/json factory/model in angularJS. Can anyone at stack help me with a solution that could scale for changes and make clicks and animations simplistic for rapid changes.
If possible, extra comments in the realm of canvas (where I know almost nothing).
This is a preemptive strike for me; so If, I'm asking for too much sorry.
D3 would probably be the way to go. It often comes with a steep learning curve though (at least for me, not having worked with SVGs before).
Mike Bostock has a similar example: http://bl.ocks.org/mbostock/4339083
The nodes are interactive and have several layers of nesting. It's done as a left-right tree, rather than top - down like you're wanting. So it'll require modification to get it how you want.
Another example from Mike Bostock is: http://bl.ocks.org/mbostock/999346. This is a top-down.
I need to develop a functionality wherein a user can add/edit/delete child nodes and the change is displayed as a tree structure in a different panel.
To display the tree structure I am planning to use the D3js tree layout.
But I am completely new to these technologies: d3.js, json, svg, canvas...
Can anyone tell me:
How can I manipulate the tree?
How can I get the click event when a node is clicked?
How can I dynamically show the new node add/edit/delete?
Any tutorial for beginners is also appreciated.
Thanks.
The d3.JS site has a great deal of pretty good tutorials which you can find by navigating the site. There are also a great deal of example visualizations there too.
Here's a good place to start though. Scott Murray has both a deep understanding of the subject as well as an innate ability to communicate this understanding to others.
http://alignedleft.com/tutorials/
Try reading through his tutorial as it will explain SVG, .data() and JSON.
Here's a non-interactive tree map code: http://msug.vn.ua/content/d3js/examples/tree/ You'll find it under tree.js.
If you have any questions about that code or the tutorial, comment below and I'll try to answer it.
So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...
I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...
Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.
Feel free to ask any questions to clarify my rambling.
You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.
Implementing it in Javascript/PHP is left as an exercise for the reader.
An alternative is to use a graph layout program such as GraphViz.
I look forward to seeing the results of your project. I agree with scompt about using graphviz.