SVG Exercise 3: KPop Discography

Overview

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:

• Use git pull to update your local clone of the digitProjectDesign-Hub.
• Open the digitProjectDesign-Hub locally on your computer, and find the KPop group profiles directory by looking in the filepath: Class-Examples > SVG > KPop > kpop-groups. The kpop-groups folder contains ten XML files that we are working with as a collection in this assignment.
• Copy this kpop-groups directory to some other location on your computer outside of your GitHub directories. (We do not want you to push your homework to the whole class over our digitProjectDesign-Hub, so we just need you to make your own private copy of this directory to work with in the same folder in which you do your homework.)
• Do not rename the file folder or the files inside, because we need to refer to them as a coherent collection.

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="http://www.w3.org/1999/XSL/Transform" version="3.0"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    xmlns="http://www.w3.org/2000/svg">
    <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:

• to stack all six different kinds of albums,
• to stack the singles and minis against the total albums produced by each band.

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:

• Plot your graph working with global and local variables, as you did on the previous SVG assignment. In addition to variables holding counts and/or other numbers for plotting, you also need a global variable to address the KPop collection of files. Save your XSLT in a directory above the XML collection (as you did the last time you wrote XSLT over a collection), to make it easy to reach the files with the collection() function. Here is what we used:

   <xsl:variable name="kpopGroupColl" select="collection('kpop-groups/?select=*.xml')"/> 

• We find it easiest to plot the entire graph inside a <g> (group) element in the upper right quadrant, to set our X axis and Y axis to meet at x=0 and y=0, and to plot all our y values to start from a zero base point at the X axis and move up the screen into negative numbers. We then use the <g> element to shift this a little to the right and down into visible and workable coordinate space on the display monitor, by simply setting the @transform attribute with the translate() function. To do this:
  • Make sure all the Y values come out negative, perhaps multiplying them all by a variable set to a negative number, or simply sticking a minus sign in front of all Y values. This will cause them to be plotted above the X axis, with larger negative values above smaller ones.
  • Configuring the <g> start tag as <g transform="translate(80, 500)"> will shift it to the right 80 pixels and down by 500 pixels (the first number is the amount to shift on the X axis and the second is the amount on the Y axis). You can hard-code the number of pixels to shift down, but a more elegant approach is to use XPath to calculate the height of the tallest bar and employ that calculation in setting the value for the shift so your full plot will be visible in a browser window.
  Alternatively, you can plot everything directly in the lower right quadrant, but we find that harder to manage. For this assignment you cannot have your bars grow downward! That would be easier to code, but, unfortunately, it isn’t the way humans expect a chart like this to look.
• When you create a stacked bar chart, each kind of response is plotted just on top of the other kinds. If you are plotting all six kinds of albums, each stack sits on top of the one before it and reaches up to the band's total count of albums. We recommend first plotting the total count of albums (and perhaps shifting that over to the right or the left a bit so you can always see it as you are plotting your other bars: for example, see the green line for the plot of total albums just to the right of each bar in this sample output). Seeing the total count can serve as a guide for stacking your bars if you are plotting all the album types. Alternatively, you can simply plot the total count as a backdrop for comparison with just two or three album types, like we did in our alternative sample output. Save your output SVG file and open it in oXygen not only to check for validity but also to check your arithmetic, to be sure you are outputting the right kinds of values: nothing over 100 or less than zero (that is, before you convert the percentage to a negative value in plotting along the Y-axis).
• Knowing that you are plotting stacked bars that represent 10 different groups, plot an X and a Y axis that is appropriate to hold all your bar plots, and label your Y axis in some way that reflects numerical range of values you are plotting. (You may wish to draw faint lines to sit in the background (like in this clickable, interactive example from an Obdurodon project: http://pavlova.obdurodon.org/character_chart.xhtml). Use global variables to help you space your bars evenly across the X axis and stretch out your Y values for visibility.
• As we mentioned before, you must ultimately create a stacked bar chart. Begin this by plotting just one album type, perhaps the count of tjust the singles (album albumType="single") that you want to sit at the bottom of your stack, plotting upwards from the X axis and check to see that you are getting good results in a web browser. To plot the other rectangles (or thick lines) on top of this, you will need to start drawing those from the top of a bar you have just drawn, which you do by adding the Y value for the top of the low bar to the height of the next bar that is to sit on top of it.
• Output the text of the KPop band name with its associated set of stacked bars, beneath the X axis. To plot this as we did in our sample output, it will help to study SVG text element formatting, and what attributes are used to control it. (There are a number that you might experiment with to rotate text and change its orientation, but we used the @style="writing-mode: tb;" attribute to make the text run vertically down the page.) Take a look at Jakob Jenkov's SVG tutorial for a good resource for learning about the range of attributes you can apply to SVG text and other SVG elements, and the various things they do. We find the @text-anchor attribute especially helpful to anchor the text’s X and Y coordinates either in the start, end, or exact center of the text string.
• Try to label your bars with their count value when the count is above, say, 1 or 2 and you have room to set a number inside the bar.
• We want you to sort your output using <xsl:sort> so that the bands are plotted in sequence based on their counts of albums. (Our sample plot goes from highest-releasing bands to lowest-releasing bands.)
• You’ll have to decide how to space the bars along the X axis, and whether or how to use color or some other kind of fill to visually distinguish your stacked bars from each other. Whatever you decide, you need to plot an explanatory legend with your graph, like we did in our sample output.
• As an optional challenge, try flipping the graph so that you are plotting your bars horizontally across the X-axis instead of up the Y-axis. Is this a more intuitive way to present the text of each question in relation to the stacked bar of survey results?

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.