Graph visualization playground with Cytoscape.

February 16, 2021 visualization clojure graph

Playground for visualizing graphs using Cytoscape.js in Clojure.

We define the default graph options:

xxxxxxxxxx

(def ^:dynamic *default-graph-options*

  {:style [{:selector "node"

            :style {:background-color "#666"

                    :label "data(label)"}}

           {:selector "edge"

            :style {"width" 2

                    :line-color "#ccc"

                    :target-arrow-color "#ccc"

                    :curve-style "bezier"

                    :target-arrow-shape "triangle"

                    :label "data(label)"}}]

   :layout {:name "circle"}

   :userZoomingEnabled false

   :userPanningEnabled false

   :boxSelectionEnabled false})

the evaluation will appear here (soon)...

A function that renders the graph specified by elements on the container whose id is container-id:

xxxxxxxxxx

(defn cytoscape-clj [elements container-id]

  (js/cytoscape

   (clj->js (merge *default-graph-options*

                   {:container (js/document.getElementById container-id)

                    :elements elements})))

  nil)

xxxxxxxxxx

the evaluation will appear here (soon)...

Let’s render a graph with some nodes and edges:

xxxxxxxxxx

(def elements [{:data {:id "a"}}

               {:data {:id "b"}}

               {:data {:id "c"}}

               {:data {:id "d"}}

               {:data {:id "e"}}

               {:data {:id "ab" :source "a" :target "b"}}

               {:data {:id "ad" :source "a" :target "d"}}

               {:data {:id "be" :source "b" :target "e"}}

               {:data {:id "cb" :source "c" :target "b"}}

               {:data {:id "de" :source "d" :target "e"}}])

(cytoscape-clj elements "graph-2")

xxxxxxxxxx

the evaluation will appear here (soon)...

Now we write functions that create edges and nodes for a fully-connected graph:

xxxxxxxxxx

(defn edge [a b] {:data {:source a :target b}})

(defn connect-all [ids]

  (for [a ids

        b ids

        :when (< a b)]

    (edge a b)))

(defn nodes [ids]

  (for [id ids]

    {:data {:id id}}))

(defn elements [ids]

  (concat (nodes ids)

          (connect-all ids)))

xxxxxxxxxx

the evaluation will appear here (soon)...

We render a fully-connected directed graph with 6 nodes:

xxxxxxxxxx

(cytoscape-clj (elements (range 6)) "graph-3")

xxxxxxxxxx

the evaluation will appear here (soon)...

We render a fully-connected undirected graph with 6 nodes:

xxxxxxxxxx

(binding [*default-graph-options* (assoc-in *default-graph-options*

                                            [:style 1 :style :target-arrow-shape] nil)]

  (cytoscape-clj (elements (range 6)) "graph-4"))

xxxxxxxxxx

the evaluation will appear here (soon)...

Recommend