INFOVIS 2003 - Multiple View and Multiform Visualization - Johnathan C. Roberts

Umsetzung

Container

Der Container enthält die definitionen der SVG-Primitiven, wie zum Beipspiel Linien und Kreise. Durch die Zusammenstzung dieser Primitive wird der Glyph definiert. Zusätzlich zur Defninition des Glyphen wird im Container auch festgelegt, wie sich der Glyph anhand der Daten verändern soll. Dies gschieht indem man im Container Variablen definiert welche bestimmte Eigenschaften der Daten, zum Beispiel die Menge aller Nachfolger eines Baumknotens, wiedergeben. Diese Variablen kann man dann bei der Defninition der Glyphen verwenden. Dadurch kann man das Aussehen der Glyphen von den Daten abhängig machen. Zum Beispiel kann man die Länge des Radius eines Kreises gleich der Anzahl der Nachfolger setzen. Je mehr Nachfolger ein Knoten hat, desto grösser ist also der Radius des Kreises der diesen Knoten darstellt.

Container To XSL

In der ersten Transformation wird der Container in einen Stylesheet umgewandelt. Es werden die im Container definierten Variablen erzeugt und die im Container defninierten Glyhen mit den Variablen verbunden. Der daraus entstandene Stylesheet wird in weiterer Folge dazu verwendet die Daten auf die Glyphen abzubilden.

XML To SVG

In diesem Schritt werden die Daten auf die Glyphen abgebildet. Hierzu wird das im vorigen Schritt generierte XSL-File verwendet. Die im Container definierten Variablen werden ausgewertet und das Ergebnis der Auswertung fliesst in der Gestalt er Glyphen ein, falls die Eigenschaften der Primive im Container in Abhängigkeit der Variablen definiert wurden.

Post-Processor

IN einem letzten Schritt kann man noch einen Post Processor über die Daten laufen lassen um weitere Verfeinerungen oder Darstellungen zu verwirklichen.

Beispiel

Container

Hier sieht man die Definition einiger Variablen und ihreVerknüpfung mit einem Glyphen-primitiv

	  
<svg_styles>
<variables>
<variable name="ebene">(count(./ancestor::*))</variable>
<variable name="alle">(count(//leaf) + count(//branch))</variable>
<variable name="gratio">(count(//leaf) div $alle)</variable>
<variable name="offsetX">(0)</variable>
<variable name="offsetY">(200*(($ebene)-1))</variable>
<variable name="kopfgroesse">(($gratio)*120)</variable>
</variables>
<svg_object primitive="circle">
<!-- kreis -->
<svg_attributes>
<svg_attribute name="stroke" value="black"/>
<svg_attribute name="fill" value="none"/>
</svg_attributes>
<svg_properties>
<svg_property name="r">$kopfgroesse</svg_property>
<svg_property name="cx">140+$offsetX</svg_property>
<svg_property name="cy">140+$offsetY</svg_property>
</svg_properties>
</svg_object>

Erste Tranformation

Nach der ersten Transformation wird ein Stylesheet erzeugt welches beispielsweise folgendes Aussehen hat. Dieses Stylesheer wird anschliessend zur Abbildung der Daten verwendet.

Es werden sowohl die notwendigen Variablen definiert, als auch die Glyphen und ihr Zusammenhang:

<xsl2:variable name="ebene" select="(count(./ancestor::*))"/>
<xsl2:variable name="alle" select="(count(//leaf) + count(//branch))"/>
<xsl2:variable name="gratio" select="(count(//leaf) div $alle)"/>
<xsl2:variable name="offsetX" select="(0)"/>
<xsl2:variable name="offsetY" select="(200*(($ebene)-1))"/>
<xsl2:variable name="kopfgroesse" select="(($gratio)*120)"/>

<xsl2:element name="circle">
<xsl2:attribute name="stroke">black</xsl2:attribute>
<xsl2:attribute name="fill">none</xsl2:attribute>
<xsl2:attribute name="r">
<xsl2:value-of select="$kopfgroesse"/> <!-- der radius ist von der variablen Kopfgrösse abhängig -->
</xsl2:attribute>
<xsl2:attribute name="cx">
<xsl2:value-of select="140+$offsetX"/>
</xsl2:attribute>
<xsl2:attribute name="cy">
<xsl2:value-of select="140+$offsetY"/>
</xsl2:attribute>
</xsl2:element>	  

Abbildung der Daten

Nach der Abbildung sieht das Ergebnis wie folgt aus:

Eine mögliche Ausprägung des Kreises:

<circle stroke="black" fill="none" r="61.03448275862068"cx="140" cy="140"/>

Ergebnisbilder

Hier einige Ergebnisse dieser Methode:

Chernoff-faces

Männchen