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 )))
where
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
where
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) .
Related Topics
Privacy Policy, Terms and Conditions, DMCA Policy and Compliant
Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.