# Recommend better way to show data graphically

**URL:** <https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785>\
**Category:** Help\
**Created:** [September 12, 2023, 8:03pm UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785 "2023-09-12T20:03:47Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![us12](https://avatars.discourse-cdn.com/v4/letter/u/90ced4/32.png) [@us12](https://forum.graphviz.org/u/us12)\
**Post date:** [September 12, 2023, 8:03pm UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/1 "2023-09-12T20:03:47Z")

</div>

I want to show data from a database graphically.  
I need **directed graph** (I mean graph with arrows).  
I want **to trace each relationsip** from one node to another.  
I also want to make it **compact** (it tends to be huge, this sample it not full).  
I don’t care about nested levels or indentation of each level.

Here is a simple result of what I’ve done (see attachments).  
I don’t like how it is shown now because I can’t trace each arrow (they are stick together).  
What can I do to make it better?  
A small code sample would be also desirable.

I create it this way:  
“C:\Program Files\Graphviz\bin\dot.exe” -Tsvg -O -Kdot “C:\graph\input.graphviz”

Here is a code sample:

> **[digraph G {rankdir=LR;"2099048" -\> "1106102981";"9103123" -\>...](https://pastebin.com/iBvPQdCg)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Here is a result.  
I failed to load it to your forum so uploaded its content here (just rename extension to svg or generate the code itself):  
[https://pastebin.com/skWAX8vT](https://pastebin.com/skWAX8vT)

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [September 13, 2023, 2:16am UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/2 "2023-09-13T02:16:44Z")

</div>

First note that there 16 nodes with more that 10 edges, one has 45 edges. Perfectly _legal_, of course, but it starts to get messy.

_Better_ is in the eye of the beholder, but here are

- changes to your input
- a longer set of commands
- and an output that compares results from four of the layout engines (dot, neato, fdp, and twopi)

The changes, all go at the beginning of your input file

```auto
strict // no multi-edges
digraph G {
rankdir=LR; // try both ways, only used by dot
ranksep=2.4 // spread out ranks, only used by dot & twopi
overlap=false // only used by neato and fdp
node [shape=rect] // somewhat smaller footprint than ellipse

```

Note that **strict** only seems to be described in this document: [https://www.graphviz.org/pdf/dotguide.pdf](https://www.graphviz.org/pdf/dotguide.pdf) (see p28)

The command set:

```auto
unflatten -f -l4 myfile.gv | dot | edgepaint | neato -n2 -Tsvg >myfile.svg

```

**unflatten** will try to break-up long rows/columns and is described here: [https://www.graphviz.org/pdf/unflatten.1.pdf](https://www.graphviz.org/pdf/unflatten.1.pdf)  
**edgepaint** changes the colors of edges to make them easier to follow and is described here: [https://www.graphviz.org/pdf/edgepaint.1.pdf](https://www.graphviz.org/pdf/edgepaint.1.pdf)  
**neato -n2** take the result of the earlier programs & generate the final image file and is described here: [FAQ | Graphviz](https://www.graphviz.org/faq/#FaqDotWithCoords)

Output of the four layout engines smooshed into one file (sorry, save it to disk & the display/zoom/magnify):

 ![helpview1.montage](https://global.discourse-cdn.com/graphviz/original/2X/9/9718a32e1075158e04b597455f0c956df8fd1b7c.jpeg)

---

<div class="post-metadata">

**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\
**Post date:** [September 13, 2023, 11:43am UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/3 "2023-09-13T11:43:17Z")

</div>

Yes, if the network is very dense, maybe use a heat map (matrix) or other representation, instead of a graph layout.

---

<div class="post-metadata">

**Author:** ![smattr](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/smattr/32/85_2.png) [@smattr](https://forum.graphviz.org/u/smattr)\
**Post date:** [September 15, 2023, 8:57am UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/4 "2023-09-15T08:57:18Z")

</div>

> [@steveroush](#):
>
> Note that **strict** only seems to be described in this document

It’s covered in the online documentation, [DOT Language | Graphviz](https://graphviz.org/doc/info/lang.html#lexical-and-semantic-notes)

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [September 15, 2023, 2:23pm UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/5 "2023-09-15T14:23:24Z")

</div>

Note that the **neato** and **fdp** graphs were not “tuned”. I expect that both could be made “better” (eye of the beholder).  
**Neato** in particular has lots of potential attributes to adjust.

---

<div class="post-metadata">

**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\
**Post date:** [September 16, 2023, 11:02pm UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/6 "2023-09-16T23:02:37Z")

</div>

It’s one of those frou frou language features that we made because it seemed cool, and it does get rid of multi edges but it’s a little strange. I think that when attributes are set on repeated instances of the same edge in a strict graph, the last setting wins, but maybe it would make more sense to sum or concatenate values somehow (we don’t have have types so that’s a further complication).

---

<div class="post-metadata">

**Author:** ![us12](https://avatars.discourse-cdn.com/v4/letter/u/90ced4/32.png) [@us12](https://forum.graphviz.org/u/us12)\
**Post date:** [September 23, 2023, 10:24am UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/7 "2023-09-23T10:24:27Z")

</div>

Thanks for your replies!

1. Is there any way to prevent edges to overlap nodes?  
Better let the edges intersect other edges, but not nodes.  
I don’t like this:  
 ![0000000728](https://global.discourse-cdn.com/graphviz/original/2X/a/a1b1063f822dee86204ae14eadf77ca4da7d317e.png)

2. Is there a way to make the edge not a straight line, but with a 90-degree bend (sorry, I don’t know how to explain), the second example in this image.  
It might help with my previous question.  
 ![0000000730](https://global.discourse-cdn.com/graphviz/original/2X/b/b136ec3b9e54d639ed989dd5982ef6bca31d47ba.png)

3. Is there any way to create an edge between clusters itself instead its nodes ?  
I want to group many nodes to one cluster and create an edge between the cluster itself with another nodes or another clusters to replace many edges leading to one node to one edge.  
I would like to write this and get this:

![0000000731](https://global.discourse-cdn.com/graphviz/original/2X/5/5e1acfe4e4ed43abb712e695024e505336045f63.png)

I tried this way but failed:

```auto
digraph {

  subgraph cluster01 {
    a1 -> b1
  }
  
  subgraph cluster02 {
    c1 -> d1
  }
  
  "cluster01" -> "cluster02"
}

```

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [September 23, 2023, 2:20pm UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/8 "2023-09-23T14:20:23Z")

</div>

[comment - these are great questions - not only are they clearly stated, they address common problems. My answers will be “best I can do”, but no guarantees, especially to Q1.]

Q1. In general, there is no way to _guarantee_ that edges don’t overlap nodes. But there are many ways to reduce the probability of this problem

- Layout engine choice - The **dot** engine attempts to minimize this problem and it provides attributes like **nodesep** and **ranksep** that further help. **Neato** is the engine with second-most attributes that _might_ help. Each engine approaches layout differently and is capable of producing a “best” result or a “worst” result, depending on the underlying graph, the attributes assigned in the input, and the “eye of the beholder”.

- graph-level

- node attributes -

Q2. Try

- **splines=ortho** (buggy but can produce some fine results),
- _do-it-yourself_ - many users use invisible nodes to create their own orthogonal edges
- I just announced a program that can create “simple” orthogonal edges ([A program to "fix" simple edges - #3 by steveroush](https://forum.graphviz.org/t/a-program-to-fix-simple-edges/1792/3)), but it is not capable of producing edges for a complex graph

Q3. You can produce edges between clusters and/or edges (for **dot** only, as I remember). You need add **compound=true** and then use the **lhead** and/or **ltail** attributes (see [https://www.graphviz.org/pdf/dotguide.pdf](https://www.graphviz.org/pdf/dotguide.pdf))  
Here is an example, and **whoops** there seems to be a new bug - I will report the bug later today,

```auto
digraph G {
  compound=true

  subgraph clusterA {
    a1 -> a2 -> a3
  }
  subgraph clusterB {
    b1 -> b2
    b1 -> b3
    b1 -> c2
  }
  a1 -> b2 [lhead=clusterB]
  c2 -> a3 [ltail=clusterB]
  b3 -> a3 [ltail=clusterB, lhead=clusterA]
}

```

Correct result:  
 ![compoundOK](https://global.discourse-cdn.com/graphviz/original/2X/f/f7b12e596f2db0b76799ead684d0bd04a46f8103.png)

Actual result:  
 ![compoundOKbug](https://global.discourse-cdn.com/graphviz/original/2X/8/8d0016af1136e15eeb0c5591d9af1fc22c760adf.png)

---

<div class="post-metadata">

**Author:** ![BartB](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@BartB](https://forum.graphviz.org/u/BartB)\
**Post date:** [October 3, 2023, 9:20am UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/9 "2023-10-03T09:20:10Z")

</div>

I would like to propose the svg export approach. This produces an svg that becomes interactive.

I added the javascript that is added by this tool: [Excel to Graphviz](https://exceltographviz.com/) to your original svg and when clicking on nodes you toggle highlighting all the edges that are connecting to them. Even for lines that are untracable in the clutter of lines, you can follow them after they are highlighted. Given the interactivity no need to rebuild the graph for each item separately, just click on the nodes for which you want the edges to be highlighted.

Result :

 ![Annotation 2023-10-03 111757](https://global.discourse-cdn.com/graphviz/original/2X/4/4558edc4da2a88848a1ee1a22918b79a7a7c5633.png)

---

<div class="post-metadata">

**Author:** ![us12](https://avatars.discourse-cdn.com/v4/letter/u/90ced4/32.png) [@us12](https://forum.graphviz.org/u/us12)\
**Post date:** [October 3, 2023, 6:47pm UTC](https://forum.graphviz.org/t/recommend-better-way-to-show-data-graphically/1785/10 "2023-10-03T18:47:01Z")

</div>

Wow, looks much better!  
I didn’t know about this tool.  
Need some time to explore it.