NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh|ds}
Maintained by: Elisa E. Beshero-Bondar (ebb8 at Creative Commons License Last modified: Wednesday, 11-Nov-2015 03:59:31 EST. Powered by firebellies.


In XSLT Exercise 3, you constructed an HTML table from survey data originally printed in a nineteenth-century table of interest to the Nell Nelson Project:

The Nelson team has encoded a version of this table in TEI markup called feature structures designed for binding related data together, and from which we extracted the HTML table data in our XSLT assignment. We now return to this file to plot the data again, writing XSLT to generate SVG in the form of a stacked bar graph. You may find it helpful to review your work and our solution to XSLT Exercise 3 as you begin this assignment.

The text

The source text can be found here: WSGATableCh1.xml if you misplaced the copy you worked with in XSLT Exercise 3. You should right-click on this link, download the file, and open it in <oXygen/>. (We will plan to use this file at least one more time on a JavaScript exercise, so once again, you may wish to keep this file handy.) (As usual, if you are downloading, please do not just click to open it in a browser and copy, which can add some browser rendering characters that will mess up your code; instead, you need to right click and download the file to save it to your machine.)

Reviewing the contents of the TEI XML file, notice how the survey data is bound together in elements and attributes. Each <fs> element holds a series of <f> elements which contain a survey question and a series of responses including data in @n attributes on the number of people who responded. Here is a sample of our TEI source coding:

            <fs type="QandA">
               <f name="question">
                  <string>Are there facilities for washing?</string>
              <f name="note">Fourteen answered yes, but if caught washing are fined.</f>
               <f name="response" select="Yes" n="460"/>
               <f name="response" select="No" n="124"/>
               <f name="response" select="Blank" n="226"/>
               <f name="response" select="Yes_but_fined" n="14"/>

Housekeeping: The XSLT Stylesheet and Output Statements

Because you are reading from a TEI file, we need to identify the TEI as our xpath-default-namespace (highlighted in purple below), and we need to indicate that we are outputting SVG in the SVG namespace (highlighted in green below. The output method is set to XML. So you should set your xsl:stylesheet and xsl:output statements thus:

       <xsl:stylesheet xmlns:xsl="" version="2.0"
    <xsl:output method="xml" indent="yes"/>

The task

Your goal is to present an effective visual summary of one portion of these survey responses: only the questions that could be answered with a Yes or a No (which includes the one distinctive question that could be answered Yes but fined). You will ultimately produce a stacked bar chart that represents the percentages of people who responded in each way to the twelve questions that involved Yes or No answers, which means that you will need to do some calculations in the XSLT you write. Here is a sample view of output we would like to produce, though your graph does not have to look exactly like ours. We chose to sort our questions by the quantities of people who answered Yes, to present the questions and the survey data in order from those most frequently to least frequently answered with Yes. You may choose to sort your data a different way, such as by the quantity of Blank (missing) or No responses. You may, of course, also decide to scale and color your graph and bars differently than we did, and you will want to decide whether you prefer to use the SVG <rect> element or the SVG <line> element (which is what we used in our solution). While we leave it up to you to decide how you want to scale and color your graph or the fonts you want to use for your text, you will need to do the following:

What to Submit

Turn in your XSLT file. We will generate your SVG output ourselves by running your XSLT. Remember to save and open your SVG output in oXygen and in a web browser to be sure it is valid and that it is rendering as you think it should be.