A Graph Library Extension of SVG

Kurt Nørmark ©
Department of Computer Science, Aalborg University

Abstract

Index References Contents		This is the slides of my presentation of the paper A Graph Library Extension of SVG for SVG Open 2007 in Tokyo, Japan.

Introduction
Europe - Denmark - Aalborg
Slide Note Contents Index
References 

Figure. A map of Europe

Plan of this Talk
Slide Note Contents Index
References 

Writing SVG in the functional programming language Scheme

The SVG Graph abstractions

The SVG Graph animations

Conclusions

XML, SVG, and Scheme
XML Notatation vs. Scheme Notation (1)
Slide Note Contents Index
References 

Introduction of lines

Program: An SVG fragment. 
  <svg width="800" height="800">
   <g>
    <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3px"
            fill="none" />
    <polygon points="256.7,125,  300,50,  343.3,125" stroke="black"
             stroke-width="3px" fill="none" />
    <polygon points="50,300,  100,250,  150,300,  100,350" stroke="black"
             stroke-width="3px" fill="none" />
    <rect x="250" y="250" width="100" height="100" stroke="black" 
          stroke-width="3px" fill="none" />
    <line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="3px" />
    <line x1="300" y1="100" x2="300" y2="300" stroke="black" stroke-width="3px" />
    <line x1="300" y1="300" x2="100" y2="300" stroke="black" stroke-width="3px" />
    <line x1="100" y1="300" x2="100" y2="100" stroke="black" stroke-width="3px" />
   </g>
  </svg>

XML Notatation vs. Scheme Notation (2)
Slide Note Contents Index
References 

Introduction of lines

Program: An SVG fragment. 
  (svg 'width "800" 'height "800" 
   (g
     (circle 'cx 100 'cy 100 'r 50 'stroke "black" 'stroke-width "3px"
             'fill "none")
     (polygon 'points "256.7,125,  300,50,  343.3,125" 'stroke "black" 
              'stroke-width "3px" 'fill "none")
     (polygon 'points "50,300,  100,250,  150,300,  100,350"
              'stroke "black" 'stroke-width "3px" 'fill "none")
     (rect 'x 250 'y 250 'width 100 'height 100 'stroke "black"
              'stroke-width "3px" 'fill "none")
     (line 'x1 100 'y1 100  'x2 300 'y2 100 'stroke "black" 'stroke-width "3px")
     (line 'x1 300 'y1 100  'x2 300 'y2 300 'stroke "black" 'stroke-width "3px")
     (line 'x1 300 'y1 300 'x2 100 'y2 300 'stroke "black" 'stroke-width  "3px")
     (line 'x1 100 'y1 300 'x2 100 'y2 100 'stroke "black" 'stroke-width "3px"))
  )

The idea of Mirroring
Slide Note Contents Index
References 

The mirror of SVG brings this particular XML language into the programming language Scheme

XML and SVG concepts are given Scheme counterparts

Mirroring as precise as possible

The idea of bringing the XML language SVG into the programming language Scheme by mirroring.

Authoring Approaches
Slide Note Contents Index
References 

An SVG document can be authored in many ways

The approach related to other kinds of SVG authoring tools

SVG, Scheme, and LAML
Slide Note Contents Index
References 

  • Mirror functions of SVG elements

    • One-to-one correspondence between SVG elements and mirror functions in Scheme

    • Generated automatically from the SVG DTD by use of LAML tools

    • Contain detailed knowledge of the element contents and the attributes

    • Validates the SVG document when a Scheme expression is evaluated

  • Main advantage

    • It is possible to program abstractions on top of the native SVG elements

      • Custom tags

    • It is possible to embed arbitrary computations in an SVG document

      • Evaluated at SVG generation time

The road is clear for extensions of SVG in a variety of directions

One such direction is graph drawing

The Graph Abstractions
The Fundamental Graph Abstractions
Slide Note Contents Index
References 

The fundamental SVG graph abstractions closely match the natural concepts from elementary graph theory

  • The overall graph construction function

    • (svg-graph list-of-nodes list-of-edges)

  • The graph node construction function

    • (svg-node shape x y label attributes)

  • The graph edge construction function

    • (svg-edge from-node from-loc to-node to-loc label attributes)

The graph abstractions accept both positional and "XML parameters"

A simple Graph Example - version 1
Slide Note Contents Index
References 

Program: . 
   (let* ((node-1 (svg-node circular    300 100 "A" ))
          (node-2 (svg-node rectangular 100 200 "B"))
          (node-3 (svg-node rectangular 500 200 "C"))
          (edge-1 (svg-edge node-1 node-2)) 
          (edge-2 (svg-edge node-1 node-3 )) 
         )
     (svg-graph (list node-1 node-2 node-3) (list edge-1 edge-2)))

A very simple SVG graph

A simple Graph Example - version 2
Slide Note Contents Index
References 

Program: . 
   (let* ((node-1 (svg-node circular    300 100 "A" 'rx 5 'bg-color "yellow"))
          (node-2 (svg-node rectangular 100 200 "B" 'rx 5 'bg-color "yellow"))
          (node-3 (svg-node rectangular 500 200 "C" 'rx 5 'bg-color "yellow"))
          (edge-1 (svg-edge node-1 "lc" node-2 "ct" 'style "hv" 
                            'stroke-dasharray "3 3" 'arrow "yes")) 
          (edge-2 (svg-edge node-1 "rc" node-3 "ct" 'style "hv"
                            'stroke-dasharray "3 3" 'arrow "yes")) 
         )
     (svg-graph (list node-1 node-2 node-3) (list edge-1 edge-2)))

A very simple SVG graph

A simple Graph Example - version 3
Slide Note Contents Index
References 

Program: . 
   (let ((x1 100) (x2 300) (x3 500)
         (y1 100) (y2 200)
        )   
     (let* ((node-props (list 'bg-color "yellow" 'rx 5))
            (edge-props (list 'stroke-dasharray "3 3" 'arrow "yes"))

            (node-1 (svg-node circular    x2 y1 "A" node-props))
            (node-2 (svg-node rectangular x1 y2 "B" node-props))
            (node-3 (svg-node rectangular x3 y2 "C" node-props))

            (edge-1 (svg-edge node-1 "lc" node-2 "ct" 'style "hv" edge-props)) 
            (edge-2 (svg-edge node-1 "rc" node-3 "ct" 'style "hv" edge-props)) 
           )
       (svg-graph (list node-1 node-2 node-3) (list edge-1 edge-2))) )

A very simple SVG graph

A simple Graph Example - version 4
Slide Note Contents Index
References 

Program: . 
   (let ((x1 100) (x2 300) (x3 500)
         (y1 100) (y2 200)
        )   
     (let* ((node-props (list 'bg-color "yellow" 'rx 5))
            (edge-props (list 'stroke-dasharray "3 3" 'arrow "yes"))

            (node-1 (svg-node circular    x2 y1 "A" node-props))
            (node-2 (my-rectangular-node x1 y2 "B"))
            (node-3 (my-rectangular-node x3 y2 "C"))

            (edge-1 (svg-edge node-1 "lc" node-2 "ct" 'style "hv" edge-props)) 
            (edge-2 (svg-edge node-1 "rc" node-3 "ct" 'style "hv" edge-props)) 
           )
       (svg-graph (list node-1 node-2 node-3) (list edge-1 edge-2))) )

A very simple SVG graph

Program: The definition of my-rectangular-node. 
(define (my-rectangular-node x y label)
  (svg-node rectangular x y 
            'bg-color (rgb-color-encoding 117 255 117)
            label))

Other Graph Abstractions
Slide Note Contents Index
References 

In addition to the fundamental graph abstractions we support a few additional abstractions

  • Composite nodes

    • (svg-composite-node x y inner-graph attributes)

  • Empty nodes

    • (empty-svg-node x y attributes)

  • Broken edges via empty nodes

    • (svg-edge-broken from-node from-loc to-node to-loc node-break-list attributes)

An Example with Composite Nodes
Slide Note Contents Index
References 

Program: . 
   (let ((x1 100) (x2 200) (x3 300) 
         (y1 100) (y2 200) (y3 250) )
     (let* ((comp-props (list 'width 150 'rx 50 'padding 15 'bg-color grey))
            (vn-1 (svg-node rectangular x1 y1 "s1" 'font-size 20)) 
            (vn-2 (svg-node rectangular x1 y2 "s2" 'font-size 20))
            (set-1 (svg-composite-node x3 y1 (some-subgraph "Ca") comp-props))
            (set-2 (svg-composite-node x3 y3 (some-subgraph "Ba") comp-props))
            (edge-1 (svg-edge vn-1 "rc" set-1 "lc" 'arrow "yes"))
            (edge-2 (svg-edge vn-2 "rt" set-1 "lc" 'arrow "yes" 'dy 10))
           )
       (svg-graph (list vn-1 vn-2 set-1 set-2) (list edge-1 edge-2))) )

An SVG graph with composite nodes

Program: The some-subgraph function. 
(define (some-subgraph prefix)
  (let* ((x1 100) (x2 200) (x3 300) 
         (y1 100) (y2 200)
         (node-props (list 'bg-color "yellow" 'min-height 80 )))
    (let* ((n1 (svg-node circular  x1 y1 (string-append prefix "1") 
                         node-props))
           (n2 (svg-node circular  x3 y1 (string-append prefix "2")
                         node-props))
           (n3 (svg-node circular  x2 y2 (string-append prefix "3") 
                         node-props))
 
           (e1 (svg-edge n2 n1))
           (e2 (svg-edge n2 n3)))
    (svg-graph (list n1 n2 n3) (list e1 e2)))))

Graph Animations
Graph Animations
Slide Note Contents Index
References 

A fixed number of simple graph animations are supported

  • Gradual revelation of nodes and edges

    • step-buttons-reveal

  • Graph traversals

    • step-buttons-walk-through

    • step-buttons-walk-through-edge-motion

Program: A template of an animated graph. 
(with-animation kind-of-animation
   (let* ((a-node  (svg-node rectangular x y 'step "n" ))
          ...
          (an-edge (svg-edge a-node another-node 'step "m" ))
          ...
         )
     (svg-graph 'from-step "f" 'to-step "t" 
        (list a-node ...)
        (list an-edge ...)
        (explanations 'x 10 'y 430 'width 600 'height 100 
          (explanation 'step "i" "Explanation text")
          ...)
     ) ))

Examples of Graph Animations (1)
Slide Note Contents Index
References 

Insertion of an element in a linked list

Insertion of elements in list

Program: The expression behind the animation . 
 (let* ((x1 50) (x2 200) (x3 350) (x4 500) (x5 650) (x6 800)
        (y0 50) (y1 100) (y2 200) (y3 350)
        (step-new-node 1) (step-new-cons-cell 2)
        (step-node-cell-connect 3) (step-remember-tail 4)
        (step-connect-front 5) (step-connect-rear 6) 
       )
  (with-animation '(step-buttons-reveal)
   (let*
       ((c1 (cons-cell x1 y1 ""))
        (c2 (cons-cell x2 y1 ""))
        (c3 (cons-cell x3 y1 ""))
        (c4 (cons-cell x4 y1 ""))
        (c5 (cons-cell x5 y1 ""))
        (e1 (element-node x1 y2 "e1"))
        (e2 (element-node x2 y2 "e2"))
        (e3 (element-node x3 y2 "e3"))
        (e4 (element-node x4 y2 "e4"))
        (e5 (element-node x5 y2 "e5"))

        (e-new (element-node (+ x2 75)  y3 "e" 'step step-new-node 
                             'bg-color "red"))
        (c-new (cons-cell (+ x2 (- 75 20)) (- y3 75) "" 
                          'step step-new-cons-cell))
        (c-e-new (svg-edge c-new "cc" e-new "ct" 'stroke "black" 
                           'arrow "yes" 'step step-node-cell-connect))

        (link-to (svg-edge c2 "cc" c-new "ct" 'from-id "cdr-cell"
                           'stroke "black" 'arrow "yes" 'step step-connect-front))
        (link-back (svg-edge c-new "cc" c3 "lb" 'from-id "cdr-cell"
                           'stroke "black" 'arrow "yes" 'step step-connect-rear))
        (e1-edge (svg-edge c1 "cc" e1 "ct" 'stroke "black" 'arrow "yes"))
        (e2-edge (svg-edge c2 "cc" e2 "ct" 'stroke "black" 'arrow "yes"))
        (e3-edge (svg-edge c3 "cc" e3 "ct" 'stroke "black" 'arrow "yes"))
        (e4-edge (svg-edge c4 "cc" e4 "ct" 'stroke "black" 'arrow "yes"))
        (e5-edge (svg-edge c5 "cc" e5 "ct" 'stroke "black" 'arrow "yes"))
        (var-tail (svg-node rectangular (+ x2 70) y0  "" 'bg-color "yellow" 'stroke "black" 
                            'step-from step-remember-tail 'step-to step-connect-rear 
                            'min-width 40 'min-height 40 ))
        (link-from-var-tail (svg-edge var-tail "cc" c3 "lt" 'stroke "black" 'arrow "yes" 
                               'step-from step-remember-tail 'step-to step-connect-rear))
        (c-empty (svg-node rectangular x6 y1 "( )" 'stroke "none" ))
        (r1 (cons-ref c1 c2 "lc"))
        (r2 (cons-ref c2 c3 "lc" 'step-to step-connect-front))
        (r3 (cons-ref c3 c4 "lc"))
        (r4 (cons-ref c4 c5 "lc"))
        (r-ept (cons-ref c5 c-empty  "lc"))
        )
     (svg-graph 'from-step 1 'to-step 6
                (list c1 c2 c3 c4 c5 c-empty  e1 e2 e3 e4 e5 
                      e-new c-new var-tail)
                (list r1 r2 r3 r4 r-ept
                      e1-edge e2-edge e3-edge e4-edge e5-edge
                      c-e-new link-to link-back link-from-var-tail)
                (explanations 'x 10 'y 430 'width 600 'height 100 'font-size 25
                  (explanation 'step 0 "The start situation. We see a list with five elements e1 ... e5.")
                  (explanation 'step step-new-node "We want to insert element e after e2")
                  (explanation 'step step-new-cons-cell "A new cons cell is allocated")
                  (explanation 'step step-node-cell-connect "The new cons cell now references the element e")
                  (explanation 'step step-remember-tail "In order not to loose the tail, we remember a pointer to the third cons cell")
                  (explanation 'step step-connect-front "The new cons cell is linked into the existing link.")
                  (explanation 'step step-connect-rear "The new cons cell connects to the tail of the existing list")
                )         
     )
    )
   )
 )


(define (cons-cell x y car-txt . attributes)
 (let* ((wd 40)
        (default-svg-node-attributes (list 'font-size 22 'min-height wd 
                                           'min-width wd 'stroke-width 1))
        (effective-attributes (append attributes default-svg-node-attributes)))
  (let ((car-box (svg-node rectangular x y car-txt 'id "car-cell" 
                           'lc "cc" 'text-align "cc" effective-attributes))
        (cdr-box (svg-node rectangular (+ x wd) y "" 
                           'id "cdr-cell" 'lc "cc" effective-attributes)))
   (g car-box cdr-box ))))

(define (element-node x y label . attributes)
 (let* ((default-attributes (list 'min-width 50 'min-height 50 'font-size 22  'rx 25 'ry 25
                                  'step 0 'bg-color (rgb-color-encoding 157 198 140)))
        (effective-attributes (append attributes default-attributes)))
   (svg-node rectangular x y label effective-attributes)))

; A reference from the cdr part of cons cell-1 to cons cell-2. 
; to-locator determines the edge attachment in cell-2.
; attributes are fused into the svg-edge. 
(define (cons-ref cell-1 cell-2 to-locator . attributes)
 (let* ((default-attributes (list 'stroke "black" 'arrow "yes"))
        (effective-attributes (append attributes default-attributes)))
  (svg-edge cell-1 "cc" cell-2 to-locator 'from-id "cdr-cell"
            'to-id "car-cell" effective-attributes)))

Examples of Graph Animations (2)
Slide Note Contents Index
References 

Deletion of an element from a linked list

Insertion of elements in list

Program: The expression behind the animation . 
(let* ((x1 50) (x2 200) (x3 350) (x4 500) (x5 650) (x6 800)
       (y0 50) (y1 100) (y2 200) (y3 350)
      )
 (with-animation '(step-buttons-reveal)
  (let*
      ((light-purple (rgb-color-encoding 255 108 255))
       (cell3-e3-disappear-step 5)
       (c1 (cons-cell x1 y1 ""))
       (c2 (cons-cell x2 y1 ""))
       (c3 (cons-cell x3 y1 "" 'step-to cell3-e3-disappear-step))  
       (c4 (cons-cell x4 y1 ""))
       (c5 (cons-cell x5 y1 ""))
       (e1 (element-node x1 y2 "e1"))
       (e2 (element-node x2 y2 "e2"))
       (e3 (element-node x3 y2 "e3" 'step-to cell3-e3-disappear-step))
       (e3-empty (svg-node rectangular x3 (- y3 50) "" 'stroke "none"))
       (e4 (element-node x4 y2 "e4"))
       (e5 (element-node x5 y2 "e5"))
        
       (e2-holdings (list  'step-from 2 'step-to 5))
       (var-tail (svg-node rectangular (+ x1 70) y0  ""
                          'bg-color "yellow" 'stroke "black"
                           e2-holdings 'min-width 40 'min-height 40 ))
       (link-from-var-tail (svg-edge var-tail "cc" c2 "lt"
                                     'stroke "black" 'arrow "yes" e2-holdings))
       (e4-holdings (list  'step-from 3 'step-to 5))
       (var-tail-1 (svg-node rectangular (+ x4 130) y0  "" 'bg-color light-purple
                             'stroke "black" e4-holdings
                             'min-width 40 'min-height 40 ))
       (link-from-var-tail-1 
           (svg-edge var-tail-1 "cc" c4 "rt" 'to-id "cdr-cell"
                     'stroke "black" 'arrow "yes" e4-holdings))
       (e1-edge (svg-edge c1 "cc" e1 "ct" 'stroke "black" 'arrow "yes"))
       (e2-edge (svg-edge c2 "cc" e2 "ct" 'stroke "black" 'arrow "yes"))
       (e3-edge (svg-edge c3 "cc" e3 "ct" 'stroke "black" 'arrow "yes" 'step-to 5)) 
       (e4-edge (svg-edge c4 "cc" e4 "ct" 'stroke "black" 'arrow "yes"))
       (e5-edge (svg-edge c5 "cc" e5 "ct" 'stroke "black" 'arrow "yes"))
       (e3-pointer 
             (svg-edge e3-empty "cc" e3 "cb" 'step-from 1 
                       'step-to cell3-e3-disappear-step
                       'stroke "red" 'stroke-width 3 'arrow "true"))
       (c-empty (svg-node rectangular x6 y1 "( )" 'stroke "none" ))
       (r1 (cons-ref c1 c2 "lc"))
       (r2 (cons-ref c2 c3 "lc" 'step-to 4))
       (r2-4 (svg-edge c2 "cc" c4 "ct" 'break-path (rv-p -50 (rh-p 260 (e-p)))
                       'step-from 4 'from-id "cdr-cell" 
                       'to-id "car-cell" 'stroke "black" 'arrow "yes"))
       (r3 (cons-ref c3 c4 "lc" 'step-to 5))
       (r4 (cons-ref c4 c5 "lc"))
       (r-ept (cons-ref c5 c-empty  "lc"))
       )
    (svg-graph 'from-step 1 'to-step 5
               (list c1 c2 c3 c4 c5 c-empty  e1 e2 e3 e4 e5   e3-empty var-tail var-tail-1)
               (list r1 r2 r3 r4 r-ept   e1-edge e2-edge e3-edge e4-edge e5-edge
                     e3-pointer link-from-var-tail link-from-var-tail-1 r2-4
                     )
               (explanations 'x 10 'y 430 'width 600 'height 100
                 'font-size 25
                 (explanation 'step 0 "The start situation. We see a list with five elements e1 ... e5.")
                 (explanation 'step 1 "We want to delete element e3 from the list.")
                 (explanation 'step 2 "In order to do so, we need a reference to the second cons cell.")
                 (explanation 'step 3 "We hold on to the fourth cons cell too.")
                 (explanation 'step 4 "We now move the cdr pointer from the second cons cell to the fourth cons cell.")
                 (explanation 'step 5 "The third element, and its accompanying cons cell disappear.")
               )         
    )
   )
  )
)

Examples of Graph Animations (3)
Slide Note Contents Index
References 

A real-life flow graph with edge motion animation

Testing Process

Final Remarks
Conclusions
Slide Note Contents Index
References 

The main contribution is idea of authoring SVG in a functional programming language

  • SVG in Scheme:

    • Allows for easy definition of new application-oriented SVG(-like) elements

    • Adds extra power to the SVG source document

    • Helps the author to fight the complexity of SVG documents

  • SVG graphs

    • Natural formulation of graphs in terms of list of nodes and list of edges

    • A seamless extension of SVG

  • Animations of SVG graphs

    • Animations at a much higher level of abstraction than the native SVG abstractions

LAML and the SVG software is Open Source

 

A Graph Library Extension of SVG
Course home     Author home     About producing this web     Previous lecture (top)     Next lecture (top)     Previous lecture (bund)     Next lecture (bund)     
Generated: August 31, 2007, 13:22:05