Pie Charts! Calculation Questions

[jonhoranic]

@ebeshero @RJP43 When working with a XML file that does not have TEI involved (or has yet to be converted to TEI like our graveyardInfo.mxl in theGraveyard repository) what do I do to get proper output with my XSL? From what I am understanding, it seems to deal with the xpath-default-namespace. I could be horribly wrong though, so any advice you can give would be great!

[ebeshero]

@jonhoranic If you're transforming an XML file that is not in TEI, you definitely don't want to set TEI as the xpath-default-namespace. You can use the default XSLT to HTML transformation scenario in oXygen... Want to post your code if you're having trouble?

[jonhoranic]

@ebeshero Aye, here is the everything I have currently. I usually model new code from the "shell" of the previous attempt/assignment I work on then build up from there. I think the problem is that the "lot" element doesn't exist within the TEI, so when I go to call on it doesn't fire. Lauren's current code is not 100% TEI elements, we intend on converting it fully once every thing is fully marked up.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xpath-default-namespace="http://www.tei-c.org/ns/1.0"
    exclude-result-prefixes="xs"
    xmlns="http://www.w3.org/2000/svg">

    <xsl:output method="xml" indent="yes"/> 

    <!--SPACIAL VARIABLES-->
    <xsl:variable name="lotTotal" select="count(//lot)"/>

    <!--SPACIAL COMMENTS-->

    <xsl:template match="/">
        <xsl:comment>The total number of lots is: <xsl:value-of select="$lotTotal"/>.</xsl:comment>

        <!--SVG OUTPUT VIEW WINDOW-->
        <svg width="100%" height="100%">
            <g transform="translate(50 750)" >

            </g>
        </svg>
    </xsl:template>

</xsl:stylesheet>

[jonhoranic]

@ebeshero For some reason, posting code properly always seems to be difficult! Even when I put everything inside the the "tick" marks it just decides to format itself how it wants and not how I want!

[ebeshero]

@jonhoranic Use four tic marks in a row above and below your code. I just did that now to read your code properly!

[ebeshero]

@jonhoranic I think you can just remove the xpath-default-namespace line. When you do that, and run the transformation, do you see any output?

When you actually have TEI files, you can then put back the xpath-default-namespace line.

[jonhoranic]

@ebeshero Ok, removing that line worked! It now fires on the "lot" element like I wanted. Now I'm going to continue working on getting that pie chart prepared with this code and A LOT of variable names.

[jonhoranic]

@ebeshero @RJP43 Getting close now to fleshing out the pie chart but math is not something I am good at. I've read up on the [http://presidential.obdurodon.org/methodology.xhtml] tutorials info and I am having some difficulty figuring out what numbers go where and how to calculate this. I think what I need is a good model, or a formula to plug numbers into, but I have yet to find one as of now. I will tackle this again tomorrow after I sleep on it!

[RJP43]

@jonhoranic since I'm coming into this cold what are you making a pie chart of and which document are you using as your XML source?

[ebeshero]

@jonhoranic Right--We need to create the model with lots of explanation. Let's break this into stages.

1. First work on just drawing an SVG pie with say, one wedge of 25%.
2. Once we have that, see if we can plot a second wedge on the circle representing, say, another 15%, to see how to move around the circle.

@RJP43 for right now, don't worry about the input. We just need to learn how to draw the pie first. Jacob Jenkov's tutorial on the SVG path element and drawing arcs with it is what we need. See https://github.com/jonhoranic/theGraveyard/issues/18 for details.

[jonhoranic]

@ebeshero @RJP43 Glad I got up when I did! I just pushed the files I am working with into the ClassHub troubleshoot folder, please make sure to pull the changes so we can avoid any merge conflicts. Just to elaborate what numbers I am working with:

• My slices are meant to show how many lots contain a certain number of occupants.
• Currently in this file there is 9 lots and 40 total occupants.
• Example: There are two lots that have 2 occupants.
• Normally, a pie chart slice is filled by percentage using this formula (instance / total of all instances) x 360. But I believe we are working with radians? So some other calculation(s) will be needed.

[ebeshero]

@jonhoranic @RJP43 looks like we need to calculate sine and cosine, with a set radius, to determine x and y locations around a circle. Here's a bundle of resources on the subject, including the XPath functions for sin and cos. Let's try some experimental drawing to see how to make our model:

Calculate sin and cosine values for x and y coordinates plotted from an angle, to draw the lines. See http://www.mathsisfun.com/geometry/unit-circle.html and http://www.codestore.net/store.nsf/unid/EPSD-5DTT4L

Once we have an angle in radians, the XPath functions we need for sin and cos are here, in the math: namespace: https://www.w3.org/TR/xpath-functions-30/#func-math-sin

More on SVG arcs: Example of pie charts used in an Obdurodon project: view-source:http://presidential.obdurodon.org/analysis.xhtml and http://presidential.obdurodon.org/methodology.xhtml Scroll down past the topic modeling to the explanation of the pi chart.

Jacob Jenkov tutorial: read about Paths, and work them over a Circle element: http://tutorials.jenkov.com/svg/path-element.html

[jonhoranic]

@ebeshero I have a basic circle and self closing path output now, I just have to figure out the calculation of the darn arches with the (trigonometry? I think its trigonometry) calculations you just posted and these should line up one after the other!

[ebeshero]

@jonhoranic Yay! I've just been researching this--Yes, in our XPath and SVG universe, we calculate based on radians rather than degrees. In addition to what I just posted, we need a way of calculating with pi. It's in the same math: namespace. See https://www.w3.org/TR/xpath-functions-30/#func-math-pi

Ratio to radians calculation: looks like you divide your piece by the total, then multiply by 2pi

[jonhoranic]

@ebeshero After testing the function in different ways I cannot seem to get math:pi() to work without a syntax error. Here is the line of code I am working on. <xsl:variable name="occ2slice" select="(2 div $lotTotal) * (2 * math:pi())"/>

Edit: Here is the error message System ID: C:\Users\Jonathan\Desktop\horanic_11-19_pieChartTest_xml.xsl Severity: fatal Description: XPST0081 XPath syntax error at char 25 on line 34 near {...iv $lotTotal) * (2 * math:p...}: Undeclared namespace prefix {math} Start location: 34:86 URL: http://www.w3.org/TR/xpath20/#ERRXPST0081

[ebeshero]

@jonhoranic This is how the wedges stack in the Presidential project: Yi writes:. "Determine the percentage of pie. Note that in this method, progressively smaller pieces are laid on top of each other. So percentage is the sum of all categories minus 1 category, then minus 2, etc. For example, if creating a pie chart with 5 categories of 20% each, there should be 1 and 4 elements. The first path takes 80% of pie, next takes 60% etc."

So basically she plots all the chunks together first (whole circle), then draws a giant wedge containing all but one. Then each new wedge is smaller and smaller, and since they sit on top of each other, the smallest wedge, the last one drawn, sits on top of the others. She draws them all sitting in the same place, with the first line drawn across the circle at 3 o'clock.

That's different and maybe easier than what we were thinking the other day in my office--which was to pick up and move around the circle with a new wedge drawn at the line where the last left off. But we could try that approach too or instead. That would just be the opposite of Yi's approach: we'd need to draw a new arc from the last point we drew on the previous wedge at the angle representing the next category.

[ebeshero]

@jonhoranic Oops--missed your post as I was thinking! What is the syntax error?

Oh! I think you need the math: namespace in your XSLT!

Angle calculation in radians for a "wedge" of pie, however we slice it: (portion div total) * 2 * math:pi()

[jonhoranic]

Whoops wrong button!

[ebeshero]

@jonhoranic I'm looking up the math namespace, and I've found a couple of things: Let's try adding this to the top of your XSLT, so you have the math: namespace and its prefix:

xmlns:math ="http://www.w3.org/2005/xpath-functions/math"

Does that help?

[jonhoranic]

@ebeshero Oddly no, it is still displaying a syntax error.

System ID: C:\Users\Jonathan\Desktop\horanic_11-19_pieChartTest_xml.xsl Severity: fatal Description: XPST0003 XPath syntax error at char 34 on line 38 near {...iv $lotTotal) * (2 * math:p...}: expected ")", found "" Start location: 38:85 URL: http://www.w3.org/TR/xpath20/#ERRXPST0003

[ebeshero]

@jonhoranic That looks like an XPath issue. Can you post the XSLT code that's generating the error?

I do see on my own computer that we absolutely need the math: namespace line. Here's the super simple tester XSLT I just ran. If I remove the xmlns:math line, XSLT won't understand the math: prefix.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:math ="http://www.w3.org/2005/xpath-functions/math"
    exclude-result-prefixes="xs"
    version="2.0">
   <xsl:output method="text"/>
 <xsl:template match="/"> 
  <xsl:value-of select="math:pi()"/>
 </xsl:template>

  </xsl:stylesheet>

The output is an abbreviation of pi: 3.14159etc...

[jonhoranic]

@ebeshero Reading the error I noticed my mistake! I did not close a parenthetical properly. <xsl:variable name="occ2slice" select="(2 div $lotTotal) * (2 * math:pi())"/> Can now produce output when I call for it in a comment to read the value. "1. Radian of 1.3962634015954636"

[jonhoranic]

@ebeshero Now I just need to run the sin and cos calculations then multiply those by my circle's radius (which I set to 250) and that should do it, key word being should!

[ebeshero]

@jonhoranic Yep! Note the stuff on stacking the wedges I posted above.

[ebeshero]

@jonhoranic Eh. I'll just repost it here so it's present: This is how the wedges stack in the Presidential project: Yi writes:. "Determine the percentage of pie. Note that in this method, progressively smaller pieces are laid on top of each other. So percentage is the sum of all categories minus 1 category, then minus 2, etc. For example, if creating a pie chart with 5 categories of 20% each, there should be 1 and 4 elements. The first path takes 80% of pie, next takes 60% etc."

So basically she plots all the chunks together first (whole circle), then draws a giant wedge containing all but one. Then each new wedge is smaller and smaller, and since they sit on top of each other, the smallest wedge, the last one drawn, sits on top of the others. She draws them all sitting in the same place, with the first line drawn across the circle at 3 o'clock.

That's different and maybe easier than what we were thinking the other day in my office--which was to pick up and move around the circle with a new wedge drawn at the line where the last left off. But we could try that approach too or instead. That would just be the opposite of Yi's approach: we'd need to draw a new arc from the last point we drew on the previous wedge at the angle representing the next category.

[ebeshero]

@jonhoranic Looking at the code you've pushed to Troubleshooting--that's old now, right? You were working on plotting in degrees, but we learned we have to work with radians and units of pi.

[jonhoranic]

@ebeshero Yes that is "dinosaur bones" at this point, I can push my current changes so we are up to date. I have yet to do the last calculation (multiply by the radius of 250) but that shouldn't be a problem if you just want the "evolved stage" of the code.

Edit: Everything pushed successfully.

[ebeshero]

@jonhoranic Great! I'm tinkering a bit here. If we define the math: namespace, we somehow replace the svg namespace with the math namespace in the output, and it then won't display in the browser! So we need to suppress that, adding "math" to the value of exclude-result-prefixes up in the xsl:stylesheet element. Here's how to set that up at the top of your XSLT:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:math ="http://www.w3.org/2005/xpath-functions/math"
    xmlns="http://www.w3.org/2000/svg"
    exclude-result-prefixes="xs math"
    version="2.0">

    <xsl:output method="xml" indent="yes"/> 

[ebeshero]

@jonhoranic I've got a plot working, and I did it the way we talked about in my office the other day, NOT the way Yi did it in the Presidential project. I'm basically plotting a new wedge following the line where the previous wedge left off. I'm not sure if my way is any easier or harder, but I think it's more literal! You don't have to add or subtract values from a total, but instead plot from the previous point.

Shall I post my code?

[ebeshero]

My code is in the Troubleshooting directory. You can pull it in. I'm not running it on any XPath from your source document, but just on literal values for the angles. I've plotted two wedges here.

My XSLT file is https://github.com/ebeshero/DHClass-Hub/blob/master/Troubleshooting/PieChartTesting/ebbTester.xsl

My output is viewable here: http://htmlpreview.github.io/?https://github.com/ebeshero/DHClass-Hub/blob/master/Troubleshooting/PieChartTesting/testerOutput.svg

(And it's in the same Troubleshooting directory): https://github.com/ebeshero/DHClass-Hub/blob/master/Troubleshooting/PieChartTesting/testerOutput.svg

@jonhoranic

[jonhoranic]

@ebeshero I seem to be having trouble getting the slices after the first slice to sit properly, and looking over your tester code I cannot seem to figure out the issue? There is a note I made for myself in there about using positive and negative values per quadrant, which was what I was doing until I got to the third slice and it was not proportional. The code I pushed is the last save I made to try to step back and see where I went wrong.

[ebeshero]

@jonhoranic Sorry for the delay--I'm pulling it in and taking a look now!

[ebeshero]

@jonhoranic Ahh! The problem is in the code I set up (not in your calculations or anything). When I plug in 1 div 9 and 2 div 9 I get the same problem in my output that you do. I'm tinkering with it now. It may be that we've discovered why Yi on the Presidential team had to calculate as she did, by subtraction. I think the problem is in having to calculate around the circle and figuring out the sweep around from one point to the next.

[ebeshero]

@jonhoranic I figured it out, and our method still works! Here's what we have to do to get from wedge 1 to wedge 2. We have to add each new angle to the previous wedge's angle, because we're pivoting around the point 0,0.

On my code:

   <xsl:variable name="angle_wedge2" select="$angle_wedge1 + (2 * math:pi() * (1 div 50))"/>

[ebeshero]

@jonhoranic So, we're faced with a procedural question of what's less work to calculate. Yi Ding on the Presidential project built her pie wedges by plotting each one of them from the same starting line, drawn at 3 o'clock. She filled her circle with a certain color, and then she made one giant wedge be everything except the very last slice. So then she subtracted just one category from her total, to get the first wedge that would sit underneath all the other wedges. Then she'd plot smaller wedges by subtracting out each category.
That way she only had to change the second set of values on the SVG path, not the first.

Our way works, too, but with her way we'd need to plug in fewer variables. So it's more concise, if a little more complicated to explain. What would you like to do?

[jonhoranic]

@ebeshero I am committed to working out the more difficult solution, I just need to keep troubleshooting to get it to work and then I will be satisfied with finally being able to complete this crazy task I started. So from that code you gave me there, what I understand is that back up in my "RADIANS" variables I just need to boot them over by adding the previous figure into the formula. Just to be clear?

[ebeshero]

@jonhoranic Yes, you'd need to add the value of each previous angle to each new angle. So, (to keep this simple), if angle1 = 30, and ratio_2= 25, then angle2= 30 + 25

And if ratio_3 = 15, then angle3 = angle2 + 15

Something like that, only with our radian calculations factored in!

[jonhoranic]

@ebeshero Alright! I will tinker with this and see what happens!

[ebeshero]

@jonhoranic There's one more complication (and it's a complication for the Presidential project, too that Yi mentions in her write-up). It's something that happens when you have a portion of pie that would take up more than half of your circle, or an angle calculated from a ratio greater than 1 div 2 (or .5). In this case, it's to do with the pair of "flags" in the Arc sweep, where we have:

A{$radius},{$radius} 0 0,1 {$x_wedge1},{$y_wedge1}

The very first number in that pair, 0,1: we've been setting that to zero to take the short way around. but if we have an arc that will sweep over more than half the circle, we need to take the long way around, and set that to 1.

That means we should calculate the sweep flag as a variable that results in 0 or 1, and base it on a calculated value. I'll write that into my sample code!

[jonhoranic]

@ebeshero I messed with that a bit and depending on the values we work with it juts out a sort of "bubble" outside of the graph connected to the pie slice, its very odd but at the same time an amusing little hiccup. Luckily none of the values on this have that specific issue. Plus! I just pushed the files, WE HAVE A FULL PROPER OUTPUT!!! insert champagne cork pop sound effect here

It needs prettied up a bit, but I am happy to say that we have done it! We made a SVG pie chart in just about the hardest way possible!

[ebeshero]

@jonhoranic Stay tuned: I'm making a handy variable to account for that situation for the sweep flags...we can incorporate it into your code to make this even harder! ;-)

[jonhoranic]

@ebeshero Wonderful! The more the merrier at this rate!

I am planing on also doing my JavaScript 2 assignment on this as a proof of concept, I am still developing Javascript 1 in between to make tables for a HEL assignment that I thought would be fun to mark up. I think Professor Greenfield will get a kick out of it.

[ebeshero]

Huzzah! Yes, he certainly will! :-D

[ebeshero]

@jonhoranic I've just pushed my sample code into the Troubleshooting folder. Go ahead and pull it in to read it.

I've plotted two wedges, one on a ratio of 1 div 4 and the next at 2 div 3. The output of ebbTester.xsl looks like this now: http://htmlpreview.github.io/?https://github.com/ebeshero/DHClass-Hub/blob/master/Troubleshooting/PieChartTesting/testerOutput.svg