Prepping CDV JavaScript Ex 3 with SVG

[ebeshero]

@jonhoranic @RJP43 Here's an issue ticket for us working on prepping the very last JavaScript + SVG assignment with the Mitford Letters Timeline.

We'll divide it into parts: 1) to output separate lines for each of the letter recipients (changing the original XQuery, with instructions + reminders) 2) try plotting this HORIZONTALLY, and smaller so it fits easily on a screen without scrolling using <g transform="translate()"> 3) Get JavaScript functions to run to show/hide lines, based on clicking events on HTML form elements, which list the distinct-values() of the letter recipients.

We'll start this over the weekend, and we can finish it by Wednesday if need be. (@jonhoranic suggests that timing is better if we do it this way.)

[jonhoranic]

@ebeshero For some reason I cannot subtract one xs:string() from another. This sort of complicated my plan to do the basic math with $max - $intMaxDate. So I must be forgetting something simple, I am trying a work around and we shall see what happens. Please let me know if I am forgetting something REALLY simple.

[jonhoranic]

@ebeshero After thinking about it, I am now these calculations have to occur down in the svg! I will test a bit before calling it a night.

[ebeshero]

@jonhoranic Have you tried xs:integer() on the string() value giving you trouble? You should be able to do subtraction in the context of defining a variable in XQuery... I'm turning in early but will work on this in the AM...Keep me posted!

[ebeshero]

@jonhoranic @RJP43 Here's my sample output for the new assignment. I haven't activated the JavaScript just yet... http://newtfire.org/dh/Timeline_CDV_JSEx3.html

[ebeshero]

@jonhoranic @RJP43 Update: I've got the JavaScript partially working...still debugging it. Will post enough to launch the assignment by this evening!

[ebeshero]

@jonhoranic @RJP43 And now it's totally working! Huzzah! (This was easier than I thought, and also a little easier than the fall SVG + JS assignment, though it works on similar principles...) See http://newtfire.org/dh/Timeline_CDV_JSEx3.html

[jonhoranic]

@ebeshero I am trying to do something different by using svg rectangles as "main timeline" overlays that my svg would toggle on off. However, I have the "left" (the min/start date) side of the rectangle matching the positions of your example, but I cannot for the life of me figure out how to plot the "right" side now and I assume it is possibly a calculation I will need to do. I have it saved in the same place as I keep testing the code.

[ebeshero]

@jonhoranic I'm hammering out the assignment as we speak, and pushing it to this repo...Let me give you link so you can read what I've got so far... Hold on a second...

[ebeshero]

@jonhoranic Here it is so far: http://htmlpreview.github.io/?https://github.com/ebeshero/newtFire-webDev/blob/master/cdv-course/JavaScript_Exercise3_CDV.html

The JavaScript section is...wrong right now. Ignore it for the moment. (Also, the JavaScript we'll need is a little simpler than what we used last semester around this time for the stacked bar graph + table.)

If you're concentrating on the XQuery to output the SVG, one thing that tripped me up for a bit was calculating the position of the minimum and maximum year for each correspondent. The minimum year for a correspondent is something we calculate in relation to the minimum (or maximum) year of the whole collection, but then you ALSO need to multiply that value by 365 so it's properly spaced. (You need to do the same thing with the maximum year value.) Once you've done that, you add the day value to the year value.

Does that help?

[jonhoranic]

@ebeshero I believe I have already done that, if I am reading that correctly, here is the block for those calculations:

for $r at $pos in $distLetterRecips
let $letter := $letFiles[descendant::tei:titleStmt/tei:title/tei:persName/@ref/string() = $r]
let $letterDate := $letter//tei:teiHeader//tei:msDesc//tei:head/tei:date/@when/string()
(: Min Variables :)
let $minDate := min($letterDate)
let $minDateString := substring-before($minDate,'-')
let $intMinDate := xs:integer(format-date($minDate, '[d1]'))
let $mathMinDate := (xs:integer($minDateString) - $min) * 365
let $minPosition := $mathMinDate + $intMinDate
(: Max Variables :)
let $maxDate := max($letterDate)
let $maxDateString := substring-before($maxDate,'-')
let $intMaxDate :=  xs:integer(format-date($maxDate, '[d1]'))
let $mathMaxDate := (xs:integer($maxDateString) - $min) * 365
let $maxPosition := $mathMaxDate + $intMaxDate

This is the current model I have going at the moment: http://dxcvm05.psc.edu:8080/exist/rest/db/jonhoranic/TimelineForJS.svg

[ebeshero]

@jonhoranic These variables look similar to mine... You're not multiplying by 365 again in another place, like down in your SVG, are you?

[jonhoranic]

@ebeshero No, I have only been trying mainly addition and subtraction to get the values I need below since the end of the rectangle is way far off. I was going off the info in your comment tag you left in the window while trying to match the values generated from your example by going under the hood with the "view page source" on right click of the page. I tested this with lines before hand and wanted to go with the rectangles instead and that is perhaps where the problem comes from.

[ebeshero]

@jonhoranic Well, if you're using rectangles, make sure your @width is set to your $maxPosition. Want to post the SVG code?

[ebeshero]

@jonhoranic WAIT a second...you're right! That is going to cause a problem for plotting rectangles as opposed to lines. Your $maxPosition variable is a specific point on the timeline. It is not equivalent to the width of the rectangle. For the width of the rectangle, you want to subtract the $maxDateString from the $minPosition (the minimum value for a correspondent)...

[jonhoranic]

@ebeshero Oddly enough I think I just figured it out in a different way! I remembered the doodles I had the other day and how I visualized the max and min POSITIONS needing to "meet in the middle" to present the data in the proper space. So with that in mind I tested this:

<g>
        <rect x="{$minPosition}" y="0" width="{$maxPosition - $minPosition}" height="50" style="fill:none;stroke:green;stroke-width:5;opacity:0.5"/>
    </g>

This looks like about right, though I think it would need a side by side to be sure. I am curious about the block at the far end on yours, why is that going past 1825 like that? Is that just an increase to the "main part" of the timeline?

[ebeshero]

@jonhoranic Good--that looks right to me, too. As for the extension beyond 1825 on my main rectangle, I just added 365 to the end of my last year, because the Thomas Talfourd correspondence ends late in the year 1825 in our collection.

[jonhoranic]

@ebeshero Ok so that little bit at the end was not a mistake then, I will extend that out now.

[jonhoranic]

@ebeshero I think I have the structure down, now I just want to mess with some of the other things we learned from the previous assignments to try to finish this overlay style I am attempting. I will bet that I can assign colors to these, then I will generate the html check boxes for javascript inputs.

Could we consider this style difference I am testing as my turn in of the assignment? We have already proved that the assignment is doable, but I am just experimenting now. I think I might be able to produce something interesting for turn in with a bit of tinkering.

I think it will not be too hard to get everyone started with this assignment. I think the main hurdle is to get the calculations build up in the brain FIRST to make sure they can be used for plotting the graph. Once that part is complete, it then becomes a "building the visualization" situation.

[ebeshero]

@jonhoranic Yes, of course, this is your pre-doing of the assignment--and you'll want to make sure you get the JavaScript working, too.
Also, the assignment sheet is up and posted on the syllabus now! Please let me know, both of you as you spot errors, but I think this is ready for prime time, and students should get to work on it: http://newtfire.org/dh/JavaScript_Exercise3_CDV.html

@RJP43

[RJP43]

@ebeshero I see a couple of minor typos on the assignment sheet.

I've edited the assignment sheet and create a pull request detailing those changes.

[ebeshero]

@RJP43 @jonhoranic After pulling in your corrections, Becca, I've just added one more bullet point in the XQuery section:

<li>How will you space the lines for each correspondent in relation to one another? 
This is up to you! One approach may be to
try to plot these all on or near the timeline for the entire collection so that 
they superimpose on one another (realizing that you will use CSS to hide all the lines at first, 
and expose them with JavaScript when a visitor selects particular correspondents 
from the HTML input options. A different approach (the one we took in the version 
we showed above) is to plot each correspondent line running down the screen. 
To achieve that, we used the <code>$pos</code> variable in 
our XQuery <code>for loop</code>: <code>for $i at $pos in $variableWeAreLoopingThrough</code>.</li>

I was thinking about the differences between Jon's and my approaches to plotting this, and I think this might encourage people to try spacing things differently than I did. Thanks, both of you, for helping me to launch this last new assignment!

[jonhoranic]

@ebeshero In the midst of troubleshooting the color array issue I have had successes with the buttons (yay!) but below on the rectangles I am having considerable and constant issues (boo...). I have it saved in the same place as before, and I have exhausted all possibilities I could think of. If you can look that over I think it will be helpful for me to understand what little bit I am missing. No rush however, since I am juggling newsAnalysis project code at the same time.