newtFire {dh}

Last modified: Monday, 08-Nov-2021 15:23:55 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

SVG Exercise 3: Plot a Bubble Chart, or a Graph from Your Project Data using XQuery

For this assignment, choose one of the following options:

1. Follow Obdurodon’s tutorial to try your hand at making a Bubble Plot.
   • We have stored the sample XML code for this assignment in our newtfire eXist-dB so that you can call on it like this:

     declare variable $dataColl := doc('/db/Assignments/electionData/popElectoralData.xml');

     . We have saved a starter XQuery file in the database at

     /db/2021-Dig400-Examples/bubblePlotSVGstarter.xql

     .
   • Or you may adapt this tutorial to your project files if you have data you can see visualizing as a bubble plot.
2. Or, plot a bar 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...
3. 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.

Preparation

It may help you to watch my recorded video on how to plot hash marks along X and Y axes on an SVG plot working with XQuery:

You should update your project files into our eXist database to work on for this assignment.

Before you start coding the XQuery, spend a few minutes studying your 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:

• 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:

  for $i in (0 to 10)

  Here, $i is a range variable that we can use to loop over the numbers 0 to 10 in sequence. You can set an XQuery variable that subtracts your min() from your max() value in place of the number 10 in our model sequence above.
• You will want to review how to plot SVG rectangles, lines, circles, ellipses etc. (How might you work with ellipses, which give you two different radii? We haven't tried this but are curious.) If making a bar graph, 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.).