[elm-discuss] Force directed graph drawing in Elm

[Jan Hrček]

Hello all,

I was surprised that there's no elm package that would enable to render
force directed graph layout animation purely in elm (please let me know if
there's any existing package supporting this). So I tried implementing it
myself and here's my first prototype [1] (source code here [2]). I'm
playing with an idea of making this into reusable library.

Would some of you find such library useful? If so what functionality it
should provide?

My idea for the functionality provided by the library would be this:

What you provide:
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements for
rendering nodes and edges, given (x,y) coordinates of the nodes)

What library would do for you:
- it would enrich the graph by adding "node position" information and would
simulate how these positions change over time

I'd be grateful for any comments / questions / ideas for improving my
existing code.
regards,
Jan Hrček

[1] http://janhrcek.cz/elm-graph-layout.html
[2] https://github.com/jhrcek/force-layout

['Rupert Smith' via Elm Discuss]

Post by Jan Hrček
Would some of you find such library useful? If so what functionality it
should provide?
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements for
rendering nodes and edges, given (x,y) coordinates of the nodes)
- it would enrich the graph by adding "node position" information and
would simulate how these positions change over time

I think you pretty much captured how I would imagine it would work as a
library. The simulations of how positions change over time might work by
providing a subscription in a similar manner to how
'mdgriffith/elm-style-animation' works?

http://package.elm-lang.org/packages/mdgriffith/elm-style-animation/latest/

By chance, I am also working on graph layouts at the moment. A force
directed layout might be useful to me. Unfortunately it won't do exactly
what I need, but I might be able to make use of it to do an approximate
initial layout, or to optimize a layout that I have produced by other
methods. The approach I am taking to laying out my diagrams is going to be
based on searching for solutions based an heuristics like number of links
crossing, length of the links, number of corners in links and so on. The
diagrams I am working with are like entity-relationship diagrams - with
boxes and links between them.

[Chad Stearns]

Hey Jan,

I think I can help you with this. I am working on a force diagram for my
client. Right now I have some stuff going in D3, but integrating that into
an Elm app is pretty sketchy. Its forcing me to consider an all-Elm
solution. I don't really know anything about force graph mathematics, but I
could learn, and I have published a few Elm packages.

I agree with your itemization of the functionality. How can we collaborate?

Best,
-Chad

Post by Jan Hrček
Hello all,
I was surprised that there's no elm package that would enable to render
force directed graph layout animation purely in elm (please let me know if
there's any existing package supporting this). So I tried implementing it
myself and here's my first prototype [1] (source code here [2]). I'm
playing with an idea of making this into reusable library.
Would some of you find such library useful? If so what functionality it
should provide?
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements for
rendering nodes and edges, given (x,y) coordinates of the nodes)
- it would enrich the graph by adding "node position" information and
would simulate how these positions change over time
I'd be grateful for any comments / questions / ideas for improving my
existing code.
regards,
Jan Hrček
[1] http://janhrcek.cz/elm-graph-layout.html
[2] https://github.com/jhrcek/force-layout

[Jakub Hampl]

Actually there are two different libraries that do this:

- https://github.com/folkertdev/graph-layout
- https://github.com/gampleman/elm-visualization/pull/4

I would suggest taking a look at these (both use somewhat of a different
approach) and seeing how they fit your needs. Neither of them is published
yet, but I plan to ship that PR soon-ish.

Post by Chad Stearns
Hey Jan,
I think I can help you with this. I am working on a force diagram for my
client. Right now I have some stuff going in D3, but integrating that into
an Elm app is pretty sketchy. Its forcing me to consider an all-Elm
solution. I don't really know anything about force graph mathematics, but I
could learn, and I have published a few Elm packages.
I agree with your itemization of the functionality. How can we collaborate?
Best,
-Chad

Post by Jan Hrček
Hello all,
I was surprised that there's no elm package that would enable to render
force directed graph layout animation purely in elm (please let me know if
there's any existing package supporting this). So I tried implementing it
myself and here's my first prototype [1] (source code here [2]). I'm
playing with an idea of making this into reusable library.
Would some of you find such library useful? If so what functionality it
should provide?
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements for
rendering nodes and edges, given (x,y) coordinates of the nodes)
- it would enrich the graph by adding "node position" information and
would simulate how these positions change over time
I'd be grateful for any comments / questions / ideas for improving my
existing code.
regards,
Jan Hrček
[1] http://janhrcek.cz/elm-graph-layout.html
[2] https://github.com/jhrcek/force-layout

[Chad Stearns]

Awesome Jakub.

When you merge that PR, I will probably start using it immediately.

Post by Jakub Hampl
- https://github.com/folkertdev/graph-layout
- https://github.com/gampleman/elm-visualization/pull/4
I would suggest taking a look at these (both use somewhat of a different
approach) and seeing how they fit your needs. Neither of them is published
yet, but I plan to ship that PR soon-ish.

Post by Chad Stearns
Hey Jan,
I think I can help you with this. I am working on a force diagram for my
client. Right now I have some stuff going in D3, but integrating that into
an Elm app is pretty sketchy. Its forcing me to consider an all-Elm
solution. I don't really know anything about force graph mathematics, but I
could learn, and I have published a few Elm packages.
I agree with your itemization of the functionality. How can we collaborate?
Best,
-Chad

Post by Jan Hrček
Hello all,
I was surprised that there's no elm package that would enable to render
force directed graph layout animation purely in elm (please let me know if
there's any existing package supporting this). So I tried implementing it
myself and here's my first prototype [1] (source code here [2]). I'm
playing with an idea of making this into reusable library.
Would some of you find such library useful? If so what functionality it
should provide?
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements for
rendering nodes and edges, given (x,y) coordinates of the nodes)
- it would enrich the graph by adding "node position" information and
would simulate how these positions change over time
I'd be grateful for any comments / questions / ideas for improving my
existing code.
regards,
Jan Hrček
[1] http://janhrcek.cz/elm-graph-layout.html
[2] https://github.com/jhrcek/force-layout

[Erkal Selman]

I would be very interested in the pure elm implementations of
force-directed graph drawing.
For this project: https://erkal.github.io/kite/
Currently, I interact with D3 via ports.

I have a question: Is it possible to compete with D3-Force
<https://github.com/d3/d3-force> in performance?

Post by Chad Stearns
Awesome Jakub.
When you merge that PR, I will probably start using it immediately.

Post by Jakub Hampl
- https://github.com/folkertdev/graph-layout
- https://github.com/gampleman/elm-visualization/pull/4
I would suggest taking a look at these (both use somewhat of a different
approach) and seeing how they fit your needs. Neither of them is published
yet, but I plan to ship that PR soon-ish.

Post by Chad Stearns
Hey Jan,
I think I can help you with this. I am working on a force diagram for my
client. Right now I have some stuff going in D3, but integrating that into
an Elm app is pretty sketchy. Its forcing me to consider an all-Elm
solution. I don't really know anything about force graph mathematics, but I
could learn, and I have published a few Elm packages.
I agree with your itemization of the functionality. How can we collaborate?
Best,
-Chad

Post by Jan Hrček
Hello all,
I was surprised that there's no elm package that would enable to render
force directed graph layout animation purely in elm (please let me know if
there's any existing package supporting this). So I tried implementing it
myself and here's my first prototype [1] (source code here [2]). I'm
playing with an idea of making this into reusable library.
Would some of you find such library useful? If so what functionality it
should provide?
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements
for rendering nodes and edges, given (x,y) coordinates of the nodes)
- it would enrich the graph by adding "node position" information and
would simulate how these positions change over time
I'd be grateful for any comments / questions / ideas for improving my
existing code.
regards,
Jan Hrček
[1] http://janhrcek.cz/elm-graph-layout.html
[2] https://github.com/jhrcek/force-layout

[Jakub Hampl]

I've spent some time working on a QuadTree based approach, but haven't had
the time to benchmark it properly yet. I don't see why it would be
significantly slower than D3, as the algorithm underpinning it would be the
same.

Sent from my iPhone

Post by Erkal Selman
I would be very interested in the pure elm implementations of
force-directed graph drawing.
For this project: https://erkal.github.io/kite/
Currently, I interact with D3 via ports.
I have a question: Is it possible to compete with D3-Force
<https://github.com/d3/d3-force> in performance?

Post by Chad Stearns
Awesome Jakub.
When you merge that PR, I will probably start using it immediately.

Post by Jakub Hampl
- https://github.com/folkertdev/graph-layout
- https://github.com/gampleman/elm-visualization/pull/4
I would suggest taking a look at these (both use somewhat of a different
approach) and seeing how they fit your needs. Neither of them is published
yet, but I plan to ship that PR soon-ish.

Post by Chad Stearns
Hey Jan,
I think I can help you with this. I am working on a force diagram for
my client. Right now I have some stuff going in D3, but integrating that
into an Elm app is pretty sketchy. Its forcing me to consider an all-Elm
solution. I don't really know anything about force graph mathematics, but I
could learn, and I have published a few Elm packages.
I agree with your itemization of the functionality. How can we collaborate?
Best,
-Chad

Post by Jan Hrček
Hello all,
I was surprised that there's no elm package that would enable to
render force directed graph layout animation purely in elm (please let me
know if there's any existing package supporting this). So I tried
implementing it myself and here's my first prototype [1] (source code here
[2]). I'm playing with an idea of making this into reusable library.
Would some of you find such library useful? If so what functionality
it should provide?
- a graph with some data (probably based on elm-community/graph)
- parameters of the layout algorithms (similar to what you see in the
prototype)
- node and edge rendering function (something returning Svg elements
for rendering nodes and edges, given (x,y) coordinates of the nodes)
- it would enrich the graph by adding "node position" information and
would simulate how these positions change over time
I'd be grateful for any comments / questions / ideas for improving my
existing code.
regards,
Jan Hrček
[1] http://janhrcek.cz/elm-graph-layout.html
[2] https://github.com/jhrcek/force-layout

--

You received this message because you are subscribed to a topic in the
Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/
topic/elm-discuss/a4noPF9YIhg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
For more options, visit https://groups.google.com/d/optout.