lucid.graph simple graph visualisations

Author: Chris Zheng  (z@caudate.me)
Date: 29 June 2017
Repository: https://www.github.com/zcaudate/lucidity
Version: 1.3.13

1    Introduction

lucid.graph builds on graphstream to allow for easy to use visualisations of data.

1.1    Installation

Add to project.clj dependencies:

[im.chit/lucid.graph "1.3.13"]

All functionality is in the lucid.graph namespace:

(require '[lucid.graph :as graph])

2    Quickstart

2.1    Simple Graph

Lets go ahead and draw the most simple graph we possibly could:

(def browser
  (graph/browse {:title "Simple"
                 :dom {:nodes {:a {:label "a"}
                               :b {:label "b"}}
                       :edges {[:a :b] {:label "a->b"}}}}))

We should see a window popping up as follows:

2.2    Styling

The window shows a label for the edge a->b but the labels a and b are hidden. We can expose it by adjusting the style of the browser:

(browser :style [[:node {:text-alignment :under}]])

We can change the look of our graph some more by specifying more styles:

(browser :style [[:node {:fill-color :green
                         :size "20px"
                         :text-size "15px"
                         :text-alignment :under}]
                 [:edge {:text-size "15px"
                         :stroke-mode "dashes"}]])

2.3    Properties

We can see what properties are accessible by calling browser with no arguments:

(browser)
=> {:getters (:title :style :attributes :dom)
    :setters (:title :style :attributes :dom)}

It can be seen that there are four properties that we can apply getters and setters to. For instance, we can access the :title like this:

(browser :title)
=> "Simple"

And we can change the title as follows:

(browser :title "Hello There")

Which will update the title of our graph

(browser :title)
=> "Hello There"

2.4    DOM access

Similarily, we can access the dom by calling browser with the :dom key:

(browser :dom)
=> {:nodes {:a {:label "a"}
            :b {:label "b"}},
    :edges {[:a :b] {:label "a->b"}}}

We can also set dom elements as follows:

(browser :dom
         {:nodes {:a {:label "a"}
                  :b {:label "b"}
                  :c {:label "c"}},
          :edges {[:a :b] {:label "a->b"}
                  [:b :c] {:label "b->c"}
                  [:c :a] {:label "c->a"}}})

2.5    More Customisations

We can do more customisations on our graph by adding edges as well as changing shapes:

(browser :dom
         {:nodes {:a {:label "a"
                      :ui.class ["red" "large"]}
                  :b {:label "b"
                      :ui.class ["green"]}
                  :c {:label "c"
                      :ui.class ["large" "blue"]}}
          :edges {[:a :b] {:label "a->b"
                           :ui.class ["above"]}
                  [:b :a] {:label "b->a"
                           :ui.class ["under"]}
                  [:b :c] {:label "b->c"
                           :ui.class ["above"]}
                  [:c :b] {:label "c->b"
                           :ui.class ["under"]}
                  [:c :a] {:label "c->a"
                           :ui.class ["above"]}
                  [:a :c] {:label "a->c"
                           :ui.class ["under"]}}})
  
(browser :style [[:node {:text-size "15px"
                         :text-alignment :under
                         :size "15px"}]
                 [:node.large {:size "30px"}]
                 [:node#a {:shape "cross"}]
                 [:node#b {:shape "diamond"}]
                 [:node#c {:shape "box"}]
                 [:node.green {:fill-color "green"}]
                 [:node.red   {:fill-color "red"}]
                 [:node.blue  {:fill-color "blue"}]
                 [:edge {:shape "cubic-curve"}]
                 [:edge.under {:text-alignment "under"
                               :fill-color "red"}]
                 [:edge.above {:text-alignment "above"
                               :fill-color "green"}]])