Visualizing Data Structures with Vip

Visualizing Data Structures with Vip


4 min read

Today we will talk about a nice add-on which allows to draw data structures and basic ASCII forms with Vip. This function serves basically for didactic purposes, i. e. highlighting the PicoLisp equivalence of code and data and internal representation of data, but can also be handy to draw simple overview charts.

Drawing data structures with Vip

As you might remember, all PicoLisp data strctures are made from cells (read here if that's new for you). However it can be difficult to imagine what this actually looks like. Vip has a handy little feature that converts a given list into a cell structure.

First of all, we need to add the following line to the top of our file (let's call it Symbols:

# VIP @lib/vip/draw.l

This loads the draw.l library. Now reload the Vip with :e, and you will see that the REPL has loaded the view> method which is inside the draw.l library:


Now if you press v, a new temporay file will open up. You can see it's a new one because the bottom line changes from "1/1" to "2/2 ~/.pil/tmp/". You can toggle between the original and the new window with F5 and F6, however it is recommended to split the screen instead:

In order to split the screen horizontally, press qs in the editing mode.


Now you have the same file open in the upper and lower half. You can jump between them with qj and qk, and adjust the relative sizes with + and -.

Press F5 in the upper window so that you get the original Symbols file in the upper part and the temporary file in the lower part.


The cells / cell function

Now we can play with it. cells function take three arguments: start position in x and y (upper left corner is 1, 1) and the symbol to be drawn. Let's draw a list by adding this to our Symbols file:

(cells 1 1 (1 2 3))

As soon as we save it, the drawing is visible. Now we can play with it, add nested lists or change the numbers - the lower drawing will update as soon as we save the upper one.


Of course we can also draw single cell. The function expects again two positioning arguments, followed by the CAR and CDR value:


Visualizing Lisp-functions

But we can even do more: Every Lisp-function is a symbol, which means that they are internally represented in cells. For example, the curry function with (cells 1 1 curry):


*Note that this only works for the functions defined in PicoLisp (not machine code) - i. e. all functions defined on the Lisp level as list expressions.

Visualizing classes and objects

Just as functions are symbols, so are classes and objects. To highlight this, we can import the shape.l file from the Object-Oriented Programming tutorial to the REPL.

So, open the REPL first and load the file:

$ pil +
: (load "shape.l")
-> move>
: (vi "Symbols")

It is recommended to not to loadshape.l inside the Symbols file, in order to avoid name conflicts with the Vip namespace.

We can visualize the +Rectangle class with (cells 1 1 +Rectangle):


And of course we can also show a rectangle object, or rather its properties as list with (getl <objname>):


Further shapes

If you check draw.l, you will see that there are some further shapes available, like boxes and arrows. These can be used to draw simple graphs.

Below you can find the quite self-explanatory code for the PicoLisp system graphic below:

# VIP @lib/vip/draw.l

(box 4 2 75 37 '("base")
   (label 2 1 "Base System")
   (box 32 2 11 4 "Cell")
   (box 15 11 11 4 "Number")
   (box 49 11 11 4 "Pair")
   (box 32 21 11 4 "Symbol")
   (box 54 21 11 4 "List")
   (box 2 21 11 4 "Short")
   (box 15 21 11 4 "Bignum")
   (box 18 31 11 4 "Intern")
   (box 32 31 12 4 "Transient")
   (box 47 31 11 4 "Extern") )

(arrow "Number" "Cell")
(arrow "Pair" "Cell")
(arrow "Symbol" "Cell")
(arrow "List" "Pair")

(arrow "Short" "Number")
(arrow "Bignum" "Number")

(arrow "Transient" "Symbol")
(arrow "Intern" "Symbol")
(arrow "Extern" "Symbol")

(box 6 41 15 3 '("http")
   (label 2 1 "HTTP")

(box 24 41 15 3 '("form")
   (label 2 1 "Form GUI")


The source code can be downloaded here.

In the next post, we will see how Vip can support the development and debugging process.