We Keep Coding

Detect Graph Edges Overlapping

The problem: Looking for quite some time for a js graph library to create a directed graph (e.g. using dagre layout), with the constrain of non-overlapping edges.
Steps until now
Started with cytoscape.js but as it seems, such a feature doesn't exist.
Continued on with an svg based solution (considering that all elements are in the DOM), d3.js using the dagre-d3, but still the information in the DOM is the path route.
Objective
Find a way to detect edge overlapping, either canvas or svg based.
Create a custom layout to respect this constrain. Will use this as a metric for my convergence algorithm.
Graphical Representation
Below a graphical representation of the objective.
I want to detect that edges 0>1 and 2>3 are overlapping.
Any ideas, thoughts are welcome.
If there is something wrong with my logic, corrections/suggestions are more than welcome.

Finding edge crossings (line intersections) is a fairly simple bit of geometry which is explained here --> https://stackoverflow.com/a/18234609/368214
But then minimising such edge crossings in a graph (zero edge crossings are only possible in planar graphs) is one of the great research challenges of graph layout - https://cs.stackexchange.com/questions/14901/how-to-reduce-the-number-of-crossing-edges-in-a-diagram
Some graph layouts for specific graph types like DAGS such as Sugiyama aim to reduce crossings and similar cytoscape layouts are available at yfiles if that helps (i.e. the hierarchic layout) --> http://apps.cytoscape.org/apps/yfileslayoutalgorithms

Circle-Packing chart with direction links

I'am trying to create circle-packing chart like that
https://bl.ocks.org/mbostock/4063530
But I also want to create some relation between data, to show how data binds to each other, so I need to add some code to change example above to make it like on this image: Circle chart with relational links
So the question is: is it possible to add relational between children in array to reach desired behavior and change Circle-chart layout to Linked Circle chart layout?
P.S. I'm new in d3.js so I don't have deep knowledge in this field, so It would be great if you provide me some examples how to reach that

I've solved my problem my problem by myself, The solution is that to draw arrows by hands without d3 layout tools, I hope it could be useful for someone:
Circle pack with relation arrows

d3js Tree square

I would like to use d3.js to build a pedigree tree.
All exemples that I found are showcasing organic trees.
Are there any exemples out there with a pedigree like style ?

You could accomplish this using either the cluster or tree layouts. And using a custom path generator to draw orthogonal lines connecting nodes, as in this elbow dendrogram. I guess I was feeling inspired so I gave it a shot:
http://bl.ocks.org/2966094

I recently created some examples of using D3 to draw pedigrees in the style that most software does. There are examples for showing how to make it expand and collapse, transitions, and showing descendants as well as ancestors.

Draw line charts. Moving from JpGraph to Raphael JS

I've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example

Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)

There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.

Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico

how to display graphs using canvas element

While learning graph algorithms and canvas HTML element it stuck me that i should have a small graph library of my own in javascript which shows the graphs using canvas element can you point me in right direction so as i can read some code[js/python] as on how to display the graphs and write my own little lib.
PS : i mean edges and Node grapth not the bars and pie charts.

There are quite a few ways to display graphs using various layout algorithms. Two of the primary ones are a Force-Directed layout algorithm, which can be a continuous layout algorithm using a push-pull principle. Next is the GEM layout algorithm which uses a rudimentary physics approach to determine the best "fit".
Here are some examples:
http://vis.stanford.edu/protovis/ex/force.html
bitbucket.org/bwalenz/algorithms/src/
Protovis has probably the most functional. The bitbucket link is an implementation of the GEM algorithm but with no visualization. It just lays out the nodes/edges.

Not really using canvas, but quite a good JS solution for graphs: Raphael Charting plugin
The good thing about Raphael is that it works in all browsers, IE included.

Great lib, for graphics in canvas: processing.js:
http://processingjs.org/
this is a graphic library, that allows you to write build amazing visualization using simple javascript code. have a look.