Visualizing a code repository with Bubble Charts and Circle Packing

German Version - English Version

Vor einiger Zeit bin ich über die freie Javascript Library d3.js gestolpert, die zur Visualisierung und Animation von  Daten in Webseiten dient. Da Datenvisualisierung eines meiner Hobbies ist und ich mich beruflich auch etwas mit Javascript beschäftige, lag es nahe sich dieses d3 etwas näher anzuschauen. Und es sollte sich lohnen, d3 rockt! Wirklich! Mit sehr wenig Aufwand, etwas Svg und Javascript hatte ich in einigen Stunden eine beeindruckende Visualisierung der Struktur eines sehr großen Source Code Repositories. Das Layouting und Rendering erledigt ein moderner Browser (IE9, Chrome, Safari oder Firefox) in wenigen Millisekunden. Ähnliches mit z.B. Graphviz und WPF als Rendering Engine zu implementieren wäre sehr viel aufwendiger, langsamer und unansehnlicher gewesen. Und da d3 im Browser läuft, ist die Visualisierung gleich plattformübergreifend verfügbar. Begeistert von den ersten Ergebnissen habe ich ausgehend von der ersten Spielerei gleich einige reale Probleme visualisiert. So sieht's heute aus:

Mein Arbeitgeber betreibt eine Website auf Basis von .NET und C#, an deren Entwicklung und Wartung sieben Teams seit einigen Jahren beteiligt sind. Dementsprechend viele Projekte gibt es im Repository. Große Projekte, kleine Projekte, wiederverwendete Projekte, exotische Projekte, tote Projekte, Jobs, Services und Web Anwendungen. Im Laufe der Zeit ging irgendwann die Übersicht verloren, welche Projekte wo benutzt werden, welches Team für welches Projekt zuständig ist, gegen welches Framework ein Projekt kompiliert, was eine gemeinsam genutzte  Komponente ist und was eine eigenständige Applikation sein sollte.

Mein Ziel war es, eine stark komprimierte Übersicht über die Projektstruktur zu geben und dabei die erwähnten Attribute zu visualisieren. Ursprünglich wollte ich dazu Treemaps verwenden, doch bei der Durchsicht der d3 Beispiele stieß ich auf Bubble Charts und Circle Packing die ich visuell ansprechender fand und die nach eigener Beschreibung "can pack hundreds of values into a small space" and "circle packing is not as space-efficient as a treemap, but it better reveals the hierarchy".

In der von mir verwendeten Variante wird jedes Projekt als ein Kreis ("Bubble") dargestellt. Jeder Kreis hat einen Namen, eine Größe (Durchmesser) und eine Farbe. Die Position der Bubbles innerhalb der Grafik ist durch den Packing Algorithmus bestimmt und kann nur in engen Grenzen (Sortierung) beeinflusst werden. Dies ist jedoch nicht schlimm, weil die Projekte innerhalb einer hierarchischen Verzeichnisstruktur liegen. Verzeichnisse werden ebenfalls als Kreise dargestellt, wobei geschachtelte Verzeichnisse und Projekte im übergeordneten Kreis angeordnet werden (siehe Bild). Damit werden in der Hierarchie zusammengehörende Projekte auch räumlich nahe beieinander dargestellt. Im obigen Beispiel sind die Verzeichnisse blau gefärbt, je tiefer die Verschachtelung, desto tiefer der Farbton. Die Bubble Attribute Größe und Farbe können dynamisch zur Visualisierung jeweils zweier Projekteigenschaften verwendet werden. Die Größe des Kreises kann beispielsweise die Größe des Projekts (in Bytes), die Anzahl der Abhängigkeiten oder die Anzahl der Verwender visualisieren. Jedes numerische Attribut kann auf den Durchmesser gemappt werden. Diskrete Werte wie z.B. Team Zugehörigkeit, .NET Version oder Projekttyp können besser durch Farben visualisiert werden.

Nun gibt es noch die Abhängigkeitsbeziehungen zwischen den Projekten. Das Managen dieser Abhängigkeiten ist eine 'viel geliebte' Aufgabe aller Architekten und wird häufig als Dependency Graph oder Dependency Matrix visualisiert. Die Visualisierung der Abhängigkeiten war nicht mein Primärziel, aber oft ist diese Information sehr nützlich. Ich experimentierte daher mit Animationen um diese Beziehungen parallel darzustellen. Ein Klick auf ein Projekt lässt alle Projekte blinken, die von dem angeklickten Projekt verwendet werden. Hält man beim Klicken die Strg Taste gedrückt, blinken alle Projekte die das angeklickte Projekt verwenden. 

Warum eigentlich ...

mache ich mir die Mühe dieser Visualisierung? Nun, ich kann alle Projekte und mehrere Eigenschaften gleichzeitig sehen. Durch geschickte Farbgebung, z.B. rot für ungesunde Eigenschaften, stechen selbst kleine Probleme optisch heraus. So kann ich jeden Tag mit einem Blick Änderungen in der Projektstruktur feststellen. Ein anderer Anwendungsfall war die Umstellung auf .NET4: alte Projekte sind rot, umgestellte sind grün. So lässt sich der Fortschritt leicht beobachten, und wenn alle Projekte umgestellt gibt es nur noch grüne Kreise. Neue hinzugekommene Projekte, die mit einem alten Framework angelegte wurden, lassen sich so sofort erkennen. Insbesondere für die interaktive Erforschung der Projektstruktur und dem Finden von nicht offensichtlichen Abhängigkeiten ist die Verbildlichung für mich als visuell denkenden Menschen sehr hilfreich. Dazu müssen natürlich auch ad hoc neue Eigenschaften visualisiert werden können, und dafür ist Flexibilität von d3 im Zusammenspiel mit Web Standards außerordentlich hilfreich.

Die Technik

Ein kleines C# Programm analysiert die Projektdateien (*.csproj files) und erstellt ein json Datenobjekt, dass die Verzeichnisstruktur, den Abhängigkeitsgraph sowie die Projekteigenschaften enthält (Größe, Typ, Team, .NET Version). Einige redundante Informationen wie leere Verzeichnisse oder Namens Prefixe werden in diesem Schritt entfernt. Das Datenobjekt misst unkomprimiert ca 120KB, und wird in ca 3s aus den Sourcen extrahiert. Dieses Objekt wird einmal pro Tag erzeugt und in eine statische WebSite kopiert. Das Javascript bubble.js übernimmt die Visualisierung im Browser. Dazu werden mit d3.js die Daten gelayoutet (d3.layout.pack()) und in SVG Elemente transformiert. Dies geschieht in wenigen Milisekunden. SVG bietet den Vorteil des flüssigen Zoomens und die grafischen Objekte bleiben als DOM Elemente erhalten und könnem mit Standard Events, wie MouseOver oder Clicks gescriptet werden. Daher ist ein moderner Browser mit SVG Unterstützung notwendig, z.B. Chrome, Safari, Firefox oder IE9. Erstaunlicherweise hat aktuell der IE9 die beste SVG Unterstützung, Chrome und Safari haben gröbere Probleme mit dem Textzooming und dem Hittesting. Firefox funktioniert gut, hat aber die schlechteste Performance. Das Javascript ist nach dem AMD Standard modularisiert, als AMD Loader wird mmd.js verwendet. Da ich zu Beginn die Funktionsweise des Circle Packing noch nicht genau kannte und auch noch nicht exakt wusste, welche Eigenschaften sinnvoll  visualisiert werden konnten, existiert ein kleines User Interface (Standard Html) mit dem verschiedene Parameter geändert werden können. D3 animiert solche Änderungen automatisch mit eingebauten Transitionen. Z.B. könnte man damit die Veränderung des Repositories im Zeitverlauf animieren. Dies könnte ein weiteres Hobby Projekt von mir werden ... stay tuned ...