Voronyj Diagram in Roassal

Quick introduction

Voronyj (Voronoi) diagrams have been used for more than 300 years in epidemiology, architecture, mining and machine learning. Now we not only provide the support for it in Roassal 2, but also suggest an approach to visualize a software with Voronyj diagrams.

How to Download

To download this just choose one method from the next options:

1. download the image from the link above CI server

2. run this code in Pharo 3 image

   Gofer new
     smalltalkhubUser: 'NataliaTymchuk'
     project: 'RTVoronyjDiagram';
     configuration;
     load.
   #ConfigurationOfRTVoronyjDiagram asClass loadDevelopment
   

3. download thought Monticello using the repository:

   MCSmalltalkhubRepository
     owner: 'NataliaTymchuk'
   project: 'RTVoronyjDiagram'
   

How to Use

A simple diagram needs the objects and block, which gives the position of the objects. For example you can do:

| builder |
builder := RTVoronyjBuilder new .
builder objects: {
   10 @ 40 .  40 @ 10 .  10 @ -20 . -20 @ 10.
  -20 @ 60 . -30 @ 40 . 160 @ 90  . 100 @ -30 }.
builder positionBlock: #yourself.
builder open.

You will get this image

Customizing Diagram

When we are looking on the previous image the question the question can turned up whether you can make the diagram more informative and interesting? Actually - yes. This builder provides a lot of properties to customize the diagram.

Builder properties

First of all you can work with the cells:

Cell Color

builder color: Color blue.

The builder allows you to do even more with the color. As usual in Roassal you can use normalization of the color, for example

cn := RTNColorLinearNormalizer
  inContext: objects
  withCommand: #x
  lowColor: (Color r:0 g:0 b:1)
  highColor: (Color r:1 g:1 b:0).
builder color: cn.

Frame

The builder uses the frame, which is bounding the cells. You can set the frame. For example

frameBlock: [ 0 @ 0 corner: 500 @ 500 ]

or

frameBlock: [view elements encompassingRectangle expandBy: 10 ]

Don't worry if it happens than your frame does not contain all the points or object, it will be merged with minFrame.

Site properties

The sites are built by RTSiteBuilder and can be accessed by the message sites. It uses ShapeBuilder, that's why you can use all the features of the ShapeBuilder. So you can add:

Color

builder sites shape
  color: Color yellow.

Shape

builder sites shape rectangle.

Size

builder sites shape
  size: 30.

Interaction

1. Popup text:

   builder sites interaction
     popupText: [ :obj | 'I am', obj asString ].

2. Highlight color

   builder sites interaction
     highlightColored: Color red.

Now let's see what we can get with using previous properties. Here is the code

| builder cn objects |

objects := { 10 @ 40 . 40 @ 10 . 10 @ -20 . -20 @ 10.
            -20 @ 60 . -30 @ 40 . 160 @ 90 . 100 @ -30 }.

cn := RTNColorLinearNormalizer
  inContext: objects
  withCommand: #x
  lowColor: (Color r:0 g:0 b:1)
  highColor: (Color r:1 g:1 b:0).

builder := RTVoronyjBuilder new
  objects: objects;
  positionBlock: #yourself;
  color: cn.
builder sites shape rectangle;
  color: Color green;
  size: 10.
builder sites interaction
  popupText: [ :obj | 'I am', obj asString ];
  highlightColored: Color red.
builder build.
builder view
 @ RTZoomableView;
 open

which will give you this result

Intergation with Other Builders

You can use it for building the diagram with some point, as previous or you can use it with the other project.

Diagram on Map

You may know about great project on Roassal called MapBuiler. You can build your map and then use RTVoronyjBuilder to draw Voronyj diagrams. This way you can see for example which city is closest to you or if you want to find small city which is the closest for job. You just need to add a few lines of code:

| builder view |
builder := RTMapBuilder new.
builder countries: RTMapBuilder southAmerica.
builder cities: #('Santiago' 'Bogota' 'Buenos Aires'
                  'Brasilia' 'Montevideo' 'Lima' 'La Paz'
                  'Quito' 'Sao Paulo' 'Caracas').

builder
  color: Color veryVeryLightGray;
  scale: 3;
  withPopup.

"next code is used to add Voronyj Diagram"

view := RTView new.
builder renderIn: view.

RTVoronyjBuilder new
  objects: (view elements select:[:e
                    | e shape class = RTEllipse ]);
  positionBlock: #position;
  doNotRenderSites;
  color: (Color black alpha: 0.05);
  renderIn: view.
view

It looks

Diagram on Google Map

Let's take a look on GMaps by Sergio Maass. This project is still being developed, but you can get a lot of interesting information. For example you can find which metro station is the closest to you in Santiago, Chile.

| v map stations metroName builder |

metroName := [ :s | 'Metro ', s, ', Santiago Chile' ].

stations := #( 'Baquedano' 'Universidad Catolica' 'Santa Lucia'
	 'Universidad de Chile' 'La Moneda' 'Los Heroes' 'Republica'
	 'Union Latino Americana' 'Patronato' 'Puente Cal y Canto'
	 'Santa Ana' 'Los Heroes' 'Toesca' 'Parque O Higgins')
  collect: [ :s | GoogleMaps geocode: (metroName value: s) ].

v := RTView new.
map := (GoogleMaps mapForCoordinates: stations fifth coordinates)
  satellite;
  zoom: 14;
  size: 600@600;
  getMap.
v add: map.

builder := RTVoronyjBuilder new
  objects: stations;
  positionBlock: [ :model |
    map positionOfGeoPoint: model location ];
  color: Color transparent;
  frameBlock: [ map encompassingRectangle ]
  yourself.

builder sites shape
  color: Color red;
  size: 20.
builder sites interaction popupText: [ :model |
  model addressComponents first ].

builder renderIn: v.
v

Future Work

I'm researching if it possible to analyze the software using Voronyj diagram. Like a lot of other things software artifacts don't have physical coordinates, however until now I already get such prototype: