gulfstream

rapid graph visualizations

1    Introduction

1.1    Overview

gulfstream leverages graphstream to allow for easy to use visualisations of data.

1.2    Installation

In your project.clj, add gulfstream to the [:dependencies] entry:

(defproject ...
    ...
    :dependencies [...
                   [helpshift/gulfstream "0.2.1"]
                   ...]}}
    ...)

All functionality is the gulfstream.core namespace:

(require '[gulfstream.core :as gs])

2    Quickstart

2.1    Simple Graph

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

(def browser (gs/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"}]])

3    Examples

More examples to come.