Roassal Visualization

Roassal is an agile visualization engine for Pharo: you describe shapes, layouts, lines, and interactions in a few lines of Smalltalk, and get an interactive, zoomable view — great for exploring data and software.

36.1 What is Roassal?

Roassal is an agile visualization engine for Pharo: you describe shapes, layouts, lines, and interactions in a few lines of Smalltalk, and get an interactive, zoomable view — great for exploring data and software. Roassal (formerly Roassal3) ships with recent Pharo images; otherwise load it with Metacello from github://pharo-graphics/Roassal.

36.2 Shapes, layouts, interactions

| canvas shapes |
canvas := RSCanvas new.
shapes := (1 to: 40) collect: [ :n |
    RSEllipse new
        size: n;
        color: (Color r: n / 40 g: 0.3 b: 1 - (n / 40));
        model: n;
        yourself ] as: RSGroup.
canvas addAll: shapes.
shapes @ RSPopup.                    "tooltip with the model on hover"
shapes @ RSDraggable.
RSFlowLayout on: shapes.             "also RSGridLayout, RSCircleLayout, RSTreeLayout, RSForceBasedLayout"
canvas @ RSCanvasController.         "zoom and pan"
canvas open.

36.3 Visualizing a class hierarchy

This "system complexity" view — width = instance variables, height = methods — instantly shows where code is concentrated.

| canvas shapes |
canvas := RSCanvas new.
shapes := Collection withAllSubclasses collect: [ :cls |
    RSBox new
        model: cls;
        width: (cls instVarNames size * 6 max: 6);
        height: (cls numberOfMethods max: 6);
        color: Color lightBlue;
        yourself ] as: RSGroup.
canvas addAll: shapes.
RSLineBuilder line
    canvas: canvas;
    withVerticalAttachPoint;
    connectFrom: #superclass.         "an edge from each class's superclass"
RSTreeLayout on: shapes.
shapes @ RSPopup.
canvas @ RSCanvasController.
canvas open.

36.4 Charts

Roassal includes a charting layer (line, bar, scatter, histogram, box plots) built from plots such as RSLinePlot and RSBarPlot added to a chart object; the chart class API has evolved between releases (RSChart, RSCompositeChart), so browse the chart examples package in your image for the current form.

36.5 Visualizations in the inspector

Add a custom inspector tab to any class so its instances display as a Roassal view:

This is *moldable development*: tools adapt to your domain objects.

BankAccount >> inspectorHistory
    <inspectorPresentationOrder: 90 title: 'History'>
    ^ self historyCanvas asPresenter      "historyCanvas: your method building an RSCanvas"