The Visual Display of Quantitative XML
by Fabio Arciniegas A.
|
Pages: 1, 2, 3, 4
Adding Textual Information using JavaScript
We now have a lot of information in a graphic form that we wouldn't have if we'd chosen to use text only. But the text information is still necessary when we want to know things like the name of "that popular place on F and 6th". By using SVG's JavaScript bindings we can nicely include this information and avoid visual clutter, too. We will show the place's details only on mouse-overs. The following XSLT templates generates the necessary data and includes the JavaScript code.
Listing 10: Point Template with Comment Support
<xsl:template name="point">
<!-- rest of the template as before in listing 8 -->
<xsl:param name="comment_title" />
<xsl:param name="comment_line1" />
<xsl:param name="comment_line2" />
<xsl:param name="comment_line3" />
<!-- comment box, initially hidden-->
<g id="{$gid}" style="visibility:hidden;z-index:10">
<rect stroke="black" fill="yellow" height="50" width="114"
x="{round($x * $x_proportion) + $x_skew + 16}"
y="{round($y * $y_proportion) + $y_skew}"
ry="2" rx="2"
style="fill-opacity:0.6"/>
<text style="font-family:Arial; font-size:9pt; font-weight:bold"
x="{round($x * $x_proportion) + $x_skew + 32}"
y="{round($y * $y_proportion) + $y_skew + 10}">
<tspan style="font-size:7pt; fill:#333333">
<xsl:value-of select="$comment_title"/>
</tspan>
</text>
<!-- same for comment lines -->
</g>
<!-- rest of the template as before -->
</xsl:template>
As you can see, the first thing we do is insert four new parameters
for the different comment lines we might want to pass to our
point. These lines are composed in a small, semi-transparent rectangle
with the text inside, grouped together with the g
element. Note that the initial state of the group is invisible (set
via the style attribute), Now we need a way to change
that state, which is done using the simple JavaScript functions
hideBox and showBox shown in Listing 11.
Listing 11: Javascript Functions showBox and hideBox
<xsl:template name="jscripts">
<script language="Javascript">
<![CDATA[
/** Show the textbox associated with targetID.
evt: The event triggered. Included to easily deduce
the owner document targetId: The Id of the g element
to show.
*/
function showBox(evt,targetId)
{
var target = evt.getTarget();
var svgdoc = target.getOwnerDocument();
var svgobj = svgdoc.getElementById (targetId);
if (svgobj)
{
var parnode = svgobj.getParentNode();
parnode.removeChild(svgobj);
parnode.appendChild(svgobj);
var svgstyle = svgobj.getStyle();
if (svgstyle)
svgstyle.setProperty ('visibility', 'visible');
}
}
/** hide box is just the same but the value of the property
* is 'hidden' */
]]>
</script>
</xsl:template>
Even if you don't know JavaScript, the meaning of these functions
is quite simple: set the style of an element (which we get by name) to
"visible". The only rather weird factor about these functions is the
fact that we reinsert the g node at the end of the
document because SVG viewers paint the elements in the order in which
they appear in the document. So we need to position it at the end to
make sure it is not going to be obstructed by any others (if you are a
CSS connoisseur thinking of z-index, that property is not
supported.)
The only thing left is to associate the functions and the mouse
over and mouse out events. This is really simple and involves only
including onmouseover and onmouseout
attributes on the image element. If you want to see the actual
element, see the
code here.
Two important additional lessons come from adding this text information. The first is XSLT-related: always bound your JavaScript code in CDATA blocks to avoid having to deal with special character (e.g. '<') escaping. The second is somewhat deeper: never guide your design by ease of programming. Your goal is to produce a valuable, efficient representation, so avoid solutions like modal messages and rely instead on less disruptive mechanisms like hovering information on-demand.
Now we finally have a complete representation of the city and its attractions (Figure 7) with all the advantages of text information plus the features, immediacy, and brevity only graphics provide.
From Specific to General: Factorizing into Reusable Templates
We now have a nice way of creating semi-transparent points (with icons and hovering tool-tips) with an XSLT template. This is something we will want to reuse as we develop other graphics. The trick to creating a reusable template from a particular portion of a stylesheet is to reorganize the code so that all the necessary information is passed as parameters. Since we have been somewhat careful in the creation of our template and have tried to minimize the coupling of our point template, this refactorng is quite easy. All we really do is extract the template into another file and comment it properly so it can be easily reused.
Using our point library in other projects is extremely easy:
include the library using xsl:call-template. Possible
uses of the commented semi-transparent circle with an icon are
endless. One such possible use that comes to mind is the tracking of
fumigation plans on a crop field. I mention this agrarian example just
to point out a use of the radius parameter to show information: the
intensity of the fumigation does indeed have a correlation with the
area covered, so we would not be lying by presenting area
representations.
Summary and Conclusions
The use of XSLT and SVG opens up exciting new ground for the presentation of XML data on the Web. The correct use of these tools may improve vastly the quality and quantity of information your users can consume, as well as your process to present and create it. The creation of good visual representations of XML data using XSLT is governed by principles and best practices both on the programming and technical graphic design sides. In this article we have examined a few of them while providing an illustration of their implementation. The principles studied can be summarized in the following list. Naturally, this article is not exhaustive, but I hope it whets your appetite for the creation of useful graphic data using XML technologies.
| Do | Technique/Heuristic |
| Maximize space/information ratio | The best graphics use fewer pixels to express more data |
| Create reusable graphic templates by induction | Start with a prototype of what you want to do in plain SVG, then create a basic XSLT template, possibly tightly coupled with the rest of the stylesheet, finally, and only if it is general enough, factorize into a reusable library |
| Be truthful about your input data | Provide representations that truthfully represent the nature and dimension of your input. Don't use n-dimensional representations for m-dimensional data (variations would be deceiving) |
| Use the possibilities of SVG to elegantly escape "flatland" | Transparencies, JavaScript tool tips, and dynamic insertion of elements are great tools to allow several layers of information to coexist without cluttering. Using these tools is harder than overloading your graph or using disruptive mechanisms like alert boxes, but the extra effort on your part will be reflected on the quality and usefulness of your graphic and surely appreciated by your clients: elegance and effectiveness may sometimes be appreciated only subconsciously, but their absence is always noticed |
| Don't | Technique/Heuristic |
| Don't decorate for the sake of decoration | Your graph is a tool to convey condensed meaning. Anything other than truthful representation of your input data (unnecessary colors, distracting animations, background images of your favorite model) is garbage -- Tufte calls it "chart junk". A simple heuristic is to see the number of parameters of your XSLT template and the number of SVG shapes you generate. If you are generating gratuitous shapes, is time to consider a review. |
| Don't graph trivialities | If your data set is small and/or acquiring and comparing the data is easier for the user on a text form, simply don't create a graphic. A simple table will do better. A useful technique is to enrich your XSLT stylesheets with xsl:if select="count(data) > X" elements to dynamically decide whether table or graphic would be better based on the number of data points. |
| Don't invent or suggest inexistent correlations | Showing a correlation based on sound theory (like the relationship between the amount of fluid used and the area covered in crop spraying) may improve a graphic dramatically, but inventing a correlation based on a guess is a sure source of errors. Avoid it. |
References
[1] The Visual Display of Quantitative Information Edward R. Tufte Graphics Press; 2nd Edition 07/2001
[2] Planet Orbit's representation from the Exoflight simulator, courtesy of Steven Hugg
[3] The Elements of Graphing Data By William S. Cleveland CRC Press, LLC; 03/1994;
[4] Envisioning Information Edward R. Tufte; Graphics Press; 10/1990
[5] Design, Form, and Chaos Pauld Rand; Yale University Press; 04 1993
[6] Design Dialogs Steven Heller, Elinor Pettit; 09 1998
[7] What is XLink? Fabio Arciniegas, xml.com 11 2000
[8] SVG 1.0 W3C Recommendation W3C 09 2001
[9] XPath 1.0 W3C Recommendation W3C 11 1999
For comments and questions, use the forum below or write to the author at FabioArciniegas@Postgraphy.com
- scalability
2002-03-03 07:04:04 stephen harlow - scalability (it is!)
2002-03-03 08:29:58 Fabio Arciniegas
