How to draw directed network graphs?

I want to draw directed network graphs - networks of nodes connected with one-headed arrows to show the relationship between the nodes. You can see D3 examples of directed graphs at Interactive tool for creating directed graphs using d3.js. - bl.ocks.org and http://bl.ocks.org/rkirsling/5001347.

I’m totally new to Bokeh but from studying the examples under Visualizing network graphs — Bokeh 2.4.2 Documentation it’s not clear to me how I could add arrowheads to the edges between the nodes. It says “The edge glyph is currently limited to a MultiLine glyph.” So I guess I could create a MultiLine glyph in the shape of an arrowhead? Also, like in the D3 examples, I would prefer the arrowhead points to touch the edges of the nodes, not their centres.

Is there an easy way of drawing directed network graphs in Bokeh, or will support be added for that very soon? If not can anyone recommend any other Python packages for doing this? So far I’ve looked at Plotly and HoloViews but they don’t seem to provide easy ways of drawing arrows between nodes.

Hi,

Bokeh does not currently have any thing built in to support directed graphs. If you have a small number of directed edges, you could potentially use the Arrow annotation (or one of the ArrowHead annotations directly):

  https://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#arrows

However, these are not "vectorized" like glyphs, so they would have to be added individually. Having more than maybe a few dozen (or maybe hundreds) of them will probably become inefficient both from a python coding standpoint, as well as from a BokehJS rendering performance standpoint.

Other options:

If you could use something like a circle or small box at one end to denote the directedness, instead of an actual arrow, then you could render standard glyphs efficiently. (You would need to compute the locations where you want them). This is probably what I would recommend as easiest if it suits your need.

Otherwise, Bokeh is extensible, so a custom extension is always a possibility:

  https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html

Tho to be up front, I do think it would be non-trivial to add either an ArrowSet (to "vectorize" arrows) or to extend the current graph renderer to understand directedness.

Regarding other libraries, you might look at the venerable Matplotlib. In particular it looks like NetworkX can use MPL to draw directed graphs e.g.:

  Directed Graph — NetworkX 3.2.1 documentation

Holoviews is built on top of Bokeh, so it is not going to offer a directed graph option until Bokeh adds some support (unless possibly you use its MPL backend, like NetworkX does).

Thanks,

Bryan

···

On Apr 4, 2018, at 03:35, [email protected] wrote:

I want to draw directed network graphs - networks of nodes connected with one-headed arrows to show the relationship between the nodes. You can see D3 examples of directed graphs at Interactive tool for creating directed graphs using d3.js. · GitHub and http://bl.ocks.org/rkirsling/5001347\.

I'm totally new to Bokeh but from studying the examples under https://bokeh.pydata.org/en/latest/docs/user_guide/graph.html#visualizing-network-graphs it's not clear to me how I could add arrowheads to the edges between the nodes. It says "The edge glyph is currently limited to a MultiLine glyph." So I guess I could create a MultiLine glyph in the shape of an arrowhead? Also, like in the D3 examples, I would prefer the arrowhead points to touch the edges of the nodes, not their centres.

Is there an easy way of drawing directed network graphs in Bokeh, or will support be added for that very soon? If not can anyone recommend any other Python packages for doing this? So far I've looked at Plotly and HoloViews but they don't seem to provide easy ways of drawing arrows between nodes.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b60c81b0-39b6-4391-89e9-ad7876b1d4be%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Bryan,

Thanks very much for all those ideas. You’re right; I guess I don’t have to use arrow symbols, although I would prefer to. Thanks for the Matplotlib link; I hadn’t spotted that one amongst all the NetworkX drawing examples. I’ll check it out.

As for Bokeh it would be great if directed edges (i.e., arrows) could be supported in future so that it would be easy to draw directed networks. I started looking at the use of arrow annotations in Plotly but that workaround just seemed desperate to me!

Thanks again,

Lucas.

···

On Wednesday, 4 April 2018 20:24:12 UTC+1, Bryan Van de ven wrote:

Hi,

Bokeh does not currently have any thing built in to support directed graphs. If you have a small number of directed edges, you could potentially use the Arrow annotation (or one of the ArrowHead annotations directly):

    [https://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#arrows](https://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#arrows)

However, these are not “vectorized” like glyphs, so they would have to be added individually. Having more than maybe a few dozen (or maybe hundreds) of them will probably become inefficient both from a python coding standpoint, as well as from a BokehJS rendering performance standpoint.

Other options:

If you could use something like a circle or small box at one end to denote the directedness, instead of an actual arrow, then you could render standard glyphs efficiently. (You would need to compute the locations where you want them). This is probably what I would recommend as easiest if it suits your need.

Otherwise, Bokeh is extensible, so a custom extension is always a possibility:

    [https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html](https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html)

Tho to be up front, I do think it would be non-trivial to add either an ArrowSet (to “vectorize” arrows) or to extend the current graph renderer to understand directedness.

Regarding other libraries, you might look at the venerable Matplotlib. In particular it looks like NetworkX can use MPL to draw directed graphs e.g.:

    [https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_directed.html#sphx-glr-auto-examples-drawing-plot-directed-py](https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_directed.html#sphx-glr-auto-examples-drawing-plot-directed-py)

Holoviews is built on top of Bokeh, so it is not going to offer a directed graph option until Bokeh adds some support (unless possibly you use its MPL backend, like NetworkX does).

Thanks,

Bryan

On Apr 4, 2018, at 03:35, [email protected] wrote:

I want to draw directed network graphs - networks of nodes connected with one-headed arrows to show the relationship between the nodes. You can see D3 examples of directed graphs at https://bl.ocks.org/cjrd/6863459 and http://bl.ocks.org/rkirsling/5001347.

I’m totally new to Bokeh but from studying the examples under https://bokeh.pydata.org/en/latest/docs/user_guide/graph.html#visualizing-network-graphs it’s not clear to me how I could add arrowheads to the edges between the nodes. It says “The edge glyph is currently limited to a MultiLine glyph.” So I guess I could create a MultiLine glyph in the shape of an arrowhead? Also, like in the D3 examples, I would prefer the arrowhead points to touch the edges of the nodes, not their centres.

Is there an easy way of drawing directed network graphs in Bokeh, or will support be added for that very soon? If not can anyone recommend any other Python packages for doing this? So far I’ve looked at Plotly and HoloViews but they don’t seem to provide easy ways of drawing arrows between nodes.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b60c81b0-39b6-4391-89e9-ad7876b1d4be%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi,

I agree it would be great. As is common with OSS, the issue is there are more great things to do, than people to do them. I'd happy to help or mentor any new contributors that want to work on this or any other issue, though.

Thanks,

Bryan

···

On Apr 5, 2018, at 07:21, [email protected] wrote:

Hi Bryan,

Thanks very much for all those ideas. You're right; I guess I don't have to use arrow symbols, although I would prefer to. Thanks for the Matplotlib link; I hadn't spotted that one amongst all the NetworkX drawing examples. I'll check it out.

As for Bokeh it would be great if directed edges (i.e., arrows) could be supported in future so that it would be easy to draw directed networks. I started looking at the use of arrow annotations in Plotly but that workaround just seemed desperate to me!

Thanks again,
Lucas.

On Wednesday, 4 April 2018 20:24:12 UTC+1, Bryan Van de ven wrote:
Hi,

Bokeh does not currently have any thing built in to support directed graphs. If you have a small number of directed edges, you could potentially use the Arrow annotation (or one of the ArrowHead annotations directly):

        https://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#arrows

However, these are not "vectorized" like glyphs, so they would have to be added individually. Having more than maybe a few dozen (or maybe hundreds) of them will probably become inefficient both from a python coding standpoint, as well as from a BokehJS rendering performance standpoint.

Other options:

If you could use something like a circle or small box at one end to denote the directedness, instead of an actual arrow, then you could render standard glyphs efficiently. (You would need to compute the locations where you want them). This is probably what I would recommend as easiest if it suits your need.

Otherwise, Bokeh is extensible, so a custom extension is always a possibility:

        https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html

Tho to be up front, I do think it would be non-trivial to add either an ArrowSet (to "vectorize" arrows) or to extend the current graph renderer to understand directedness.

Regarding other libraries, you might look at the venerable Matplotlib. In particular it looks like NetworkX can use MPL to draw directed graphs e.g.:

        Directed Graph — NetworkX 3.2.1 documentation

Holoviews is built on top of Bokeh, so it is not going to offer a directed graph option until Bokeh adds some support (unless possibly you use its MPL backend, like NetworkX does).

Thanks,

Bryan

> On Apr 4, 2018, at 03:35, oak...@gmail.com wrote:
>
> I want to draw directed network graphs - networks of nodes connected with one-headed arrows to show the relationship between the nodes. You can see D3 examples of directed graphs at Interactive tool for creating directed graphs using d3.js. · GitHub and http://bl.ocks.org/rkirsling/5001347\.
>
> I'm totally new to Bokeh but from studying the examples under https://bokeh.pydata.org/en/latest/docs/user_guide/graph.html#visualizing-network-graphs it's not clear to me how I could add arrowheads to the edges between the nodes. It says "The edge glyph is currently limited to a MultiLine glyph." So I guess I could create a MultiLine glyph in the shape of an arrowhead? Also, like in the D3 examples, I would prefer the arrowhead points to touch the edges of the nodes, not their centres.
>
> Is there an easy way of drawing directed network graphs in Bokeh, or will support be added for that very soon? If not can anyone recommend any other Python packages for doing this? So far I've looked at Plotly and HoloViews but they don't seem to provide easy ways of drawing arrows between nodes.
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b60c81b0-39b6-4391-89e9-ad7876b1d4be%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/46b372a1-533f-45c7-9638-512c889eb14d%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Seem like hvplot gives some help in the right direction.I don’t know how it’s related to the discussion of the arrow (which do not look so nice) — but at least it works and node’s attributes are visible out of the box when hovering.