<p><strong>libCola</strong></p>

<p>cola.js (a.k.a. WebCola) is a JavaScript based rewrite of libcola which works well with D3.js</p>

<p><a href="http://marvl.infotech.monash.edu/webcola/" rel="nofollow">http://marvl.infotech.monash.edu/webcola/</a></p>

<p>Gridified Layout example:</p>

<p><a href="http://marvl.infotech.monash.edu/webcola/examples/dotpowergraph.html" rel="nofollow">http://marvl.infotech.monash.edu/webcola/examples/dotpowergraph.html</a></p>

<p><strong>OGDF</strong></p>

<p>Open Graph Drawing Framework</p>

<p>Have an orthogonal layout</p>

<blockquote>
  <p>Orthogonal: Ortholayout with modules for the steps of shape and
  compaction, ClusterOrthoLayout</p>
</blockquote>

<p><a href="http://www.ogdf.net/doku.php/ogdf:features" rel="nofollow">http://www.ogdf.net/doku.php/ogdf:features</a></p>

<p>Check projects that uses OGDF</p>

<p><a href="http://www.ogdf.net/doku.php/project:external" rel="nofollow">http://www.ogdf.net/doku.php/project:external</a></p>

<p><strong>HOLA</strong></p>

<p>Human-like Orthogonal Layout Algorithm</p>

<p><a href="https://vimeo.com/150509722" rel="nofollow">https://vimeo.com/150509722</a></p>

<p>Kieffer, Steve, Tim Dwyer, Kim Marriott, and Michael Wybrow. "Hola: Human-like orthogonal network layout." Visualization and Computer Graphics, IEEE Transactions on 22, no. 1 (2016): 349-358.</p>

CC BY-SA 3.0
2016-07-04T12:24:45.830Z
This sounds promising. Could you edit to add some detail of what this provides?
trichoplax is on Codidact now
CC BY-SA 3.0
2016-07-05T01:21:35.790Z
It would also be useful to have an overview of how each algorithm works, so that they can be compared without needing to leave the answer.
trichoplax is on Codidact now
CC BY-SA 3.0
2016-07-03T12:34:20.267Z
2016-07-04T17:26:56.427Z
2016-07-04T17:26:56.427Z
The Demz
<p>I am writing a software and I need to represent an graph in a orthogonal manner from topological data (vector of edges,vertices and their connectivity data)</p>

<p><strong>Graphs</strong> consist of a set of <strong>vertices</strong> and a set of <strong>edges</strong>, each connecting two vertices.A vertex may have any number of connected edges so it makes the problem a lot more complicated.</p>

<p>I have read some articles and its looks like that the <strong>Kandinsky model</strong> is the post popular one. However I just don't know the algorithm, any other solution (algorithm) that solve the problem is also very welcome.</p>

<hr>

<p><strong>Added after edit</strong></p>

<p>The following picture shows a real world example for an electricity network which should be considered as raw data, in order to create a graph from this network, some preliminary tasks must be done. </p>

<p>Input Data:</p>

<p><a href="https://i.sstatic.net/pJofq.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/pJofq.jpg" alt="Input Data"></a></p>

<p>The result I am looking for is something like below, 
there are some characteristics if you take a look much closer : </p>

<p>The Red Polygon in the middle of the above picture(input data) represents an electricity substation which is a node itself and can be connected to more than 4 edges.
There are more red polygons but only one can be fit into the above picture however as you may see, the following picture could cover much more than a red polygon that means it can map a bigger area, so the following picture is much more denser.</p>

<p>In Schematics diagrams, red polygons (Substations) usually maintain their position against each other relatively so if we manage to see beyond the extents of the above map by zooming out for example, we should almost see a triangle that is obviously can be seen at the below while having the left one at the left, the down one at the down ..... (this is not a rule, but I thought it could be a head start for desired algorithm)</p>

<p>Orthogonal Diagram:</p>

<p><a href="https://i.sstatic.net/5gffC.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/5gffC.png" alt="Orthogonal Schematic"></a></p>

CC BY-SA 3.0
2016-05-28T14:49:28.780Z
Does orthogonal in this context mean using only vertical and horizontal edges? Are you looking for a way to represent more than 4 edges meeting at a single vertex?
trichoplax is on Codidact now
CC BY-SA 3.0
2016-05-31T12:52:09.830Z
@trichoplax Exactly, and I do appreciate any help.
Iman Rosstin
CC BY-SA 3.0
2016-06-02T07:57:35.683Z
General graph layout algorithms are anoying to program and implement. Even just finding proper ones from literature is pain. You should describe a bit more what you expect, draw a picture.
joojaa
CC BY-SA 3.0
2016-06-02T09:01:18.467Z
@DanielMGessel It is an electricity network and I have the real world map(coordinates) in hand, The graph is planar and maybe the edges cross each other, so its not a problem if the orthogonal edges cross each other, because in some case I believe there is no way to draw the graph without overlapping edges.
Iman Rosstin
CC BY-SA 3.0
2016-06-02T09:10:01.800Z
@joojaa I have GIS data of an electricity network and just like any electricity computation software(cyme, digsilent, pti,...) I just need to draw an arc-node structure in an orthogonal manner. As I described above for Daniel. I have extracted the hypernodes and their connections so the ortho graph could be drawn from sketch using these data. I will attach some picture to the question to increase the clearity, thanks for suggesting.
Iman Rosstin
CC BY-SA 3.0
2016-06-04T21:41:29.730Z
@DanielMGessel I have added some pictures and explanation, hope it clear the ambiguities.
Iman Rosstin
CC BY-SA 3.0
2016-06-04T21:42:15.963Z
@joojaa Please take a look at the added picture.Thanks
Iman Rosstin
<algorithm><vector-graphics>
How to draw an orthogonal graph from its edges and vertices data?
Iman Rosstin
# How to draw an orthogonal graph from its edges and vertices data?

(Asked by: username_0 on 2016-05-28)

I am writing a software and I need to represent an graph in a orthogonal manner from topological data (vector of edges,vertices and their connectivity data)

**Graphs** consist of a set of **vertices** and a set of **edges**, each connecting two vertices.A vertex may have any number of connected edges so it makes the problem a lot more complicated.

I have read some articles and its looks like that the **Kandinsky model** is the post popular one. However I just don't know the algorithm, any other solution (algorithm) that solve the problem is also very welcome.

---

**Added after edit**

The following picture shows a real world example for an electricity network which should be considered as raw data, in order to create a graph from this network, some preliminary tasks must be done.

Input Data:

[![Input Data](https://i.sstatic.net/pJofq.jpg)](https://i.sstatic.net/pJofq.jpg)

The result I am looking for is something like below,
there are some characteristics if you take a look much closer :

The Red Polygon in the middle of the above picture(input data) represents an electricity substation which is a node itself and can be connected to more than 4 edges.
There are more red polygons but only one can be fit into the above picture however as you may see, the following picture could cover much more than a red polygon that means it can map a bigger area, so the following picture is much more denser.

In Schematics diagrams, red polygons (Substations) usually maintain their position against each other relatively so if we manage to see beyond the extents of the above map by zooming out for example, we should almost see a triangle that is obviously can be seen at the below while having the left one at the left, the down one at the down ..... (this is not a rule, but I thought it could be a head start for desired algorithm)

Orthogonal Diagram:

[![Orthogonal Schematic](https://i.sstatic.net/5gffC.png)](https://i.sstatic.net/5gffC.png)

**Tags:** algorithm, vector-graphics

> **Comments:**
> **username_1**: Does orthogonal in this context mean using only vertical and horizontal edges? Are you looking for a way to represent more than 4 edges meeting at a single vertex?  
> **username_0**: @username_1 Exactly, and I do appreciate any help.  
> **username_2**: General graph layout algorithms are anoying to program and implement. Even just finding proper ones from literature is pain. You should describe a bit more what you expect, draw a picture.  
> **username_0**: @DanielMGessel It is an electricity network and I have the real world map(coordinates) in hand, The graph is planar and maybe the edges cross each other, so its not a problem if the orthogonal edges cross each other, because in some case I believe there is no way to draw the graph without overlapping edges.  
> **username_0**: @username_2 I have GIS data of an electricity network and just like any electricity computation software(cyme, digsilent, pti,...) I just need to draw an arc-node structure in an orthogonal manner. As I described above for Daniel. I have extracted the hypernodes and their connections so the ortho graph could be drawn from sketch using these data. I will attach some picture to the question to increase the clearity, thanks for suggesting.  
> **username_0**: @DanielMGessel I have added some pictures and explanation, hope it clear the ambiguities.  
> **username_0**: @username_2 Please take a look at the added picture.Thanks  

---

## 1 answers

### Answer by username_3 on 2016-07-03. Score: 0

**libCola**

cola.js (a.k.a. WebCola) is a JavaScript based rewrite of libcola which works well with D3.js

<http://marvl.infotech.monash.edu/webcola/>

Gridified Layout example:

<http://marvl.infotech.monash.edu/webcola/examples/dotpowergraph.html>

**OGDF**

Open Graph Drawing Framework

Have an orthogonal layout

> Orthogonal: Ortholayout with modules for the steps of shape and
> compaction, ClusterOrthoLayout

<http://www.ogdf.net/doku.php/ogdf:features>

Check projects that uses OGDF

<http://www.ogdf.net/doku.php/project:external>

**HOLA**

Human-like Orthogonal Layout Algorithm

<https://vimeo.com/150509722>

Kieffer, Steve, Tim Dwyer, Kim Marriott, and Michael Wybrow. "Hola: Human-like orthogonal network layout." Visualization and Computer Graphics, IEEE Transactions on 22, no. 1 (2016): 349-358.

> **Comments:**
> **username_1**: This sounds promising. Could you edit to add some detail of what this provides?  
> **username_1**: It would also be useful to have an overview of how each algorithm works, so that they can be compared without needing to leave the answer.  

---

