Creating an Interactive Graphical Visualization
This section shows you how SVG goes beyond being just another vector graphics lan-guage in that it provides a powerful tool to automatically visualize any XML data. This tool provides a powerful new “window” that may be used to reveal the meaning of the data. Given the structure and meaning of an XML data source, this section shows how XML tools may be used to automatically generate SVG visualizations that are dynamic, interactive, and may be embedded in Web pages or formatted as documents for printing. To illustrate the concepts presented here, we use a loan calculation example. The mean-ing of this example is most concisely presented in the formula
m = p * ( i / ( 1 – ( 1 + i )^( -t )))
m is the monthly payment dollar amount on the loan.
p is the principal dollar amount of the loan.
i is the monthly interest rate on the loan, which is the same as the annual interest
rate divided by 12.
• t is the term of the loan in months, which is the same as the term of the loan in years multiplied by 12.
Given p, i and t, we can calculate m and the monthly payments over the term of the loan. For each monthly payment over the term of the loan, we can compute first the interest and then the principal components of the payment using the formulas
mi = b * i mp = m - mi
mi is the interest component of the current monthly payment on the loan.
b is the previous month’s principal outstanding balance of the loan.
i is the monthly interest rate, as defined previously.
mp is the principal component of the current monthly payment on the loan.
Given an XML data set that defines a loan, our task in this example will be to create an SVG visualization that enables users to easily see the principal balance of the loan at any point over the loan’s duration. Later in this chapter, you’ll see how interactive behavior may be added to the SVG visualization that enables the user to determine for any monthly payment the outstanding principal as well as the interest and principal compo-nents of the monthly payment. You’ll also see how the SVG visualization may be further enhanced to give the user the power to experiment with different “what-if” scenarios to compare loan performances for different loan interest rates.
This example was chosen because it is meaningful and minimal, yet sufficient to illus-trate the presented concepts. The same principles may be easily applied to generate either alternative SVG visualizations of the same data or visualizations of completely different data. Note also that the presentation capabilities of SVG in terms of visual effects go way beyond what is feasible to cover in this chapter. Near the end of this chapter, some excel-lent URL references are given that you are encouraged to use as starting points to further investigate some of the more advanced capabilities of SVG.
After a brief definition of the XML loan data structure, an XML document is presented for a sample loan. We then prototype an SVG visualization of this data manually and present the resulting SVG. The style information in this visualization is then abstracted out into a separate document using CSS. The source XML data and corresponding sim-plified SVG visualization are then used to define the source and target, respectively, in order to develop an XSL transformation that may be used subsequently to automatically visualize any XML loan. You’ll see how to embed the SVG visualization in Web pages and enhance it with interactive behavior. Finally, you’ll learn how to embed a visualiza-tion in a XSL-FO document (for example, for printing) .