Last modified: Sunday, 23-Aug-2020 02:02:34 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

SVG Exercise 5: Plot a Graph, or Your Choice

For this assignment, you will be working with pulling data from your project files, and you may choose to work with your own project or another team’s project as you wish. For your output, you have a choice: You may either:

Plot a graph with an X and a Y axis, labelled with a title and units, that represents data you pull from your project files using XQuery. Spend some time studying the code and structure of the files and experiment with something interesting to plot. Or...
Plot an SVG visualization of your choice that shows us something interesting in the project files. Your XQuery needs to be more complicated than one or two XPath expressions, and should involve some use of a for loop, but otherwise the form your plot takes is entirely up to you. Whatever you plot must involve some use of XQuery variables and calculations to pull information from the XML code and output it as SVG. Use SVG <text> elements to title and label your plot.

You may load your project files into our eXist database to work on for this assignment. We also have project files from the current and previous semesters loaded into the database so you may access them from the following locations:

Akira project:
```
doc("/db/akira/akira-tei.xml")
```

Graveyard project:

doc("/db/graveyard/graveyardInfo-TEI.xml")

Hamilton project:
```
collection('/db/hamilton/')
```

City Slave Girls project:

collection('/db/Nelson/ChicagoTimes_XML_grammar/')

Emily Dickinson project (fascicle 16 files):
```
collection('/db/dickinson/f16/')
```

NOTE: Each of these projects is using TEI code. To read from the TEI and to output in the SVG namespace, you will need to declare your namespaces and work with the tei: prefix for all TEI elements.

xquery version "3.1";
declare default element namespace "http://www.w3.org/2000/svg"; 
declare namespace tei="http://www.tei-c.org/ns/1.0"

Open one of the files in these projects in eXide (with File——>Open, and browse your way to it), and spend a few minutes studying the XML code. Look for something interesting to count and plot. Because the XML texts that we are using here are under development, they may be inconsistently or incompletely marked up. They are all well formed, however, which means that they can be explored with XML tools, including XQuery.

The dimensions and style of your plot are up to you, though we recommend a bar graph be used for most plots of counts. Save your SVG output in eXist, but paste a copy of your XQuery script in a text file, save it according to our usual homework file naming conventions, and upload it to Coursweb.

Plotting SVG from XQuery:

Draw your X and Y axes, and set up a Viewport

Work out your maximum values for X and Y and set a view port with a width and a height, and then a viewBox attribute to scale your output if you wish.

Look at examples of how we prepared SVG Viewports in class, and check out Sara Soueidan’s excellent detailed explanation. Here is a brief summary overview of how to set the Viewport attributes on the SVG root element:

width="{largest X value for the ENTIRE plot + something with some wiggle room}"
height="{largest Y for the ENTIRE plot + wiggle room}"

Now, if I want to define how the image behaves on a screen, I define the viewBox attribute. viewBox takes four values: viewBox="(x1,y1,x2,y2)" which define a new coordinate system to use in rendering our output image.

x1,y1 defines starting top-left part of the image, and x2,y2 defines the number that represents the bottom right of the user’s screen.
If x1,y1 does not start at 0,0 the viewBox will select the part of your image that starts where you say as the top left of the viewable SVG. (Notice what happens to the output SVG if you set x1,y1 to 200,200)
If x2,y2 is SMALLER than the total width and height you defined for your image, you’ll be zooming and cropping, because the viewBox defines what you can see on the visible screen. (Notice what happens if you set x2,y2 to the width div 2 and height div 2).
If the x2,y2 is LARGER than the total width and height, the result effectively zooms out, making the output image take up LESS space on the screen. Think of x2,y2 as defining a ratio with your width and height attribute values.

General Pointers

To plot your graph in SVG from XQuery, apply what you have been learning about SVG in the previous assignments. Keep in mind the following:

Don’t forget to use the tei: prefix when reaching into the TEI elements!
When you output multiple SVG elements in a return, you will want to bundle them together in a single group, or <g>.
Experiment with setting the viewport in the SVG root element using transform="translate(x, y)": to shift the x dimension over to the right and your y down the screen, so that you can plot your coordinates from x=0 and y=0 so that your plot is visible in the SVG coordinate space, , and follow our advice in the section above on setting a viewBox.
You know that you want to space the bars on a bar graph at regular intervals, and draw X and Y axes based on maximum values multiplied by spacer variables that you set.
Just as we did on the timeline, write a for-loop over a range of integers so that you plot and space hashmarks at regular intervals along a line.
You will want to review how to plot SVG rectangles and lines, and decide whether you want to make bars out of a line or a rectangle element. (We sometimes think drawing a wide line using a large-ish @stroke-width attribute is easier than working with the @height attribute on the rectangle, but this is up to you. If you work with @height, note that this is a positive absolute value, and the x and y coordinates are set at the top of the rectangle, not the bottom. You draw down the screen based on the positive value of the height you set. If you work with line elements, you set the start and end points of the lines.).