An Interactive Visualization Tool for Graph Theory

Kite is an interactive visualization tool for graph theory.

Here is a short video showing the basic usage.

The app is not new, but after watching the talks of Evan and Richard, especially The life of a file, I’ve completely rewritten it.

I would be very happy if some experienced developers take a look at the source code and tell me the things that I am doing wrong. Before extending the app with new features (see the Roadmap), it would be great to get an expert opinion.

PS: I am looking for elm-jobs!

20 Likes

This is super cool! The animations made me smile. :smile:

2 Likes

This might be slightly off topic, but the I found the choice of the icon controlling force-based layout hilarious. :slight_smile:

2 Likes

Great work!

As I understand it, you did not implement your own graph layout algorithm but you reused the one provided by d3-force, but the canvas is implemented in elm ?

(BTW is it common in Elm to have 1200 LOC update functions?)

you did not implement your own graph layout algorithm but you reused the one provided by d3-force, but the canvas is implemented in elm ?

Yes, I currently use d3-force. But a few days ago, I realised that there is an implementation of the same force layout in elm. And it works good.
So I am going to stop using D3.js and use elm-visualization instead.
This will make everything nicer.

(BTW is it common in Elm to have 1200 LOC update functions?)

I don’t know, whether it is common, but I know that it is not discouraged: The life of a file.

1 Like

This is awesome! I personally was looking for a way to add labels to vertices and edges so that I could quickly mock up a graph database idea, like Balsamiq for graph databases…

1 Like

The polish is awesome - well done!

A short update about important changes. Kite now

  • uses gampleman/elm-visualization instead of D3.js. Thanks to this pacakage all the javascript code is removed. That means that Kite is now entirely written in elm.
  • uses elm-community/graph instead of own graph type.
  • uses ianmackenzie/elm-geometry. This removes all the code written for geometrical calculations. It also uses ianmackenzie/elm-geometry-svg.
  • allows zooming and panning:
    • Zooming is done with mousewheel,
    • Panning is done with the hand tool,
    • There is a new button for resetting zoom and pan.
9 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.