NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh}
Creative Commons License Last modified: Friday, 20-Nov-2020 08:23:21 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at Powered by firebellies.


The KPop team has encoded a collection of group profiles for ten Korean pop bands, with discogrqphy data that categorizes albums in five different ways. This is encoded in an <album> element with an @albumType attribute, with six possible values, according their project Relax NG Schema:

    album = element album {albumType?, xmlid?, text}
    albumType = attribute albumType {"mini" | "full" | "live" | "repackage" | "single" | "extended"}

Albums can be of the following types: mini, full, live, repackage, single, or extended. Our goal is to plot a stacked bar graph to show how the bands compare to each other in a selection of the album types they tend to release the most.

The KPop input collection on our digitProjectDesign-Hub

The KPop collection of group files is posted as a directory in our digitProjectDesign-Hub. Just like before when you accessed a collection of files, here is what you will need to do:

Please be careful to copy rather the move the directory out of GitHub! If you move it out of the directory, the next time you sync our digitProjectDesign-Hub, GitHub will prompt you to commit the change and push it, which will effectively eliminate the Dickinson folder. I can easily put it back if that happens, but please alert me ASAP if something goes awry!

Housekeeping: The XSLT Stylesheet and Output Statements to Produce SVG

Our xsl:stylesheet root element needs to indicate that we are outputting SVG in the SVG namespace (highlighted in purple 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="3.0"
    <xsl:output method="xml" indent="yes"/>

Guidance on the task

Open an XML file in the kpop-groups folder to work out the XPath you need to access the discography information. To plot an SVG stacked bar graph, we will be creating variables that hold information about the album types. In the graph we want to make, we want to create a set of stacked bars for each group representing its different album types. We can sort the output so that the bands are plotted from left to right ranging from the bands with the highest to lowest total count of albums. We will choose a different color for each of the album types we plot (and a color for the full count of albums). Our output should be labeled with a legend and a title, and the axes should be labeled, too.

For our sample solutions, we graphed the album releases in two ways:

You may plot all or any combination of album types you wish, and your output does not need to look exactly like ours, but it does need to represent the full count of albums for each band as well as at least two different album types.

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, here are some guidelines and suggestions:

What to Submit

Turn in your XSLT file as well as your output SVG file. 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.