ebeshero / Amadis-in-Translation

a project to apply TEI markup to investigate early modern Spanish editions of Amadis de Gaula and their translations into English and French from the 1500s to the early nineteenth century.
http://amadis.newtfire.org
GNU Affero General Public License v3.0
4 stars 6 forks source link

table of contents #30

Closed HelenaSabel closed 7 years ago

HelenaSabel commented 8 years ago

@ebeshero Can you open toc.xhtml to see if you had in mind something like that? I added a list at the bottom explaining the percentages of each graph. I need you to tell me if it makes sense to calculate the percentages like that and I hope you can find a way for the graphs to be self-explanatory (so we can delete that explanation).

ebeshero commented 8 years ago

@HelenaSabel Yes, that's about right! We can play with the positioning of the Capítulos and the Chapters on the page--perhaps with a decorative flourish in between each just to space them out, and have the bars sitting beneath each one, relatively in between.

Let's ask @setriplette (who may not have internet for a little while as she's been locked in an archive--seriously! with nothing allowed except pencil and paper) if the percentages make sense: I think they do. We could have a legend appear on the TOC page to explain what each bar reveals.

I seriously need to mock up the website and generate some CSS for us with some basic colors. I'll get there! I'm first working on an SVG for the other TEI conference presentation I'm co-delivering out of the Digital Mitford project--and making it top priority for the moment because we're actually kind of safe even with what we have to present on Amadis (though I want to have a website ready for the presentation). But I mention this because, I'm thinking about variably coloring the bars on these plots. Tell me what you think of these ideas:

1) We use something like a spectrum on each plot, so that low percentages are a "cool" color and high percentages go to a "warm" color. That would help extreme chapters visually to stand out, right?

2) We give each bar a distinct color / color range and intensity. So the one on the left might be green, the one in the middle red, and the one on the right blue (for example)...and we plot them in varying degrees of color intensity to make the most vivid bars stand out. Color can be quickly associated visually with the legend we plot: Green for omissions, red for additions, etc?

ebeshero commented 8 years ago

PS Thanks to @setriplette we do have a color scheme! I'll plot it as soon as I can! @HelenaSabel

ebeshero commented 8 years ago

PPS @HelenaSabel Thank you a Thousand Times for creating this TOC. You have saved me Much Much time! :-)

HelenaSabel commented 8 years ago

It was my pleasure :-D It made sense for me to calculate how much of Montalvo's text Southey omitted and how much of Southey's text was not present in Montalvo. However, if you get the two graphs side by side it might be confusing because the percentages are calculated having a different text as a reference, and that worries me. Do you think it would make more sense to have only one bar that would have Montalvo on the right, Southey on the left, and the part that overlaps is the text in common? (kind of like a venn diagram but with a bar).

Variably coloring the bars is a great idea. I think the second proposal might be easier to plot and, most important, easier to read. Well, it obviously depends on the color scheme of the site, I was just thinking that warm and cool colors might not match at the same time or that it might be harder to create the visual effect we want.

ebeshero commented 8 years ago

@HelenaSabel Ahh, good point--these are based on different percentages. Yes, I think that makes sense, to put the bars based on a total in Southey on one side (I think in this case on the right), and vice versa for the bars based on a total in Montalvo. And to put the word count comparison in the middle.

Here's a challenging consideration: Scale. Omissions are quite dramatic since we can see that Southey cut more than he added, so it makes sense to plot these on a scale of 100. But that scaling doesn't show us so much when we look at Additions: should we plot Additions on a scale of 50 instead? I am not sure how we've plotted the word counts. (Okay, I would/will be sure of that when I sit down and look at your code! But you will know this faster than I will!)

I know I said we probably didn't need axis marks, but maybe we need something for the legend--something of a footnote on the page to explain the scale of our plots (along with colors, etc. etc). Or maybe there's a way we can add a tiny number along the x-axis of each bar to indicate the total / scale.

HelenaSabel commented 8 years ago

I was thinking about doing something like this (see attached image) Em 19/10/2015 01:49, "Elisa Beshero-Bondar" notifications@github.com escreveu:

@HelenaSabel https://github.com/HelenaSabel Ahh, good point--these are based on different percentages. Yes, I think that makes sense, to put the bars based on a total in Southey on one side (I think in this case on the right), and vice versa for the bars based on a total in Montalvo. And to put the word count comparison in the middle.

Here's a challenging consideration: Scale. Omissions are quite dramatic since we can see that Southey cut more than he added, so it makes sense to plot these on a scale of 100. But that scaling doesn't show us so much when we look at Additions: should we plot that on a scale of 50 instead? I am not sure how we've plotted the word counts.

I know I said we probably didn't need an axis, but maybe we need something for the legend--something of a footnote on the page to explain the scale of our plots (along with colors, etc. etc).

— Reply to this email directly or view it on GitHub https://github.com/ebeshero/Amadis-in-Translation/issues/30#issuecomment-149065086 .

ebeshero commented 8 years ago

I'm not seeing the attachment?

HelenaSabel commented 8 years ago

Hopefully it works now:

img_20151019_104737

HelenaSabel commented 8 years ago

Well, picture that horizontally...

ebeshero commented 8 years ago

Yay--got it!

ebeshero commented 8 years ago

Hmmm. All on the same bar? But differently scaled? Or...using the same scale somehow? Numbers are dangerous of course...

HelenaSabel commented 8 years ago

I would use the same scale, but if you don't see it, let's keep the different graphs.

ebeshero commented 8 years ago

Ah: is the scale the total words of BOTH texts together, and the bars are the portions shared, or distinct to each? That could work...

ebeshero commented 8 years ago

Sorry--long night of course prep here, so I am probably foggy. I think I get it, though I am curious about the calculations. The compression effect of Southey might not be a total elimination of Montalvo. Can the two be measured together?

HelenaSabel commented 8 years ago

I imagine it like a venn diagram but with bars instead of circles. We have one bar with Montalvo's text and one with Southey's. The idea is to overlap both according to the amount of text they share. That would mean that the portion of Montalvo's bar that is not overlapped by Southey is equivalent to Southey's omissions. On the other hand, the part of Southey's bar not overlapped is equal to his additions. However, I would use the matching clauses/anchors which means that the compression effect wouldn't be measured (that is, it doesn't matter if a clause 10 words long in Montalvo becomes a 5 word anchor in Southey, because it would be considered a match, that is, text in common). It might not be a very good idea...

ebeshero commented 8 years ago

@HelenaSabel I think it's worth trying, and perhaps we can plot it alongside another kind of bar-plot that holds information about Southey's compression. Now I'm adding on the bars...but I like the idea of trying to plot the extent of overlap and deviation. Perhaps it's too soon to tell since we don't have many chapters ready yet, but the only reason not to run with it is if all the bars really look the same. What we want for the TOC page are visualizations that help the reader quickly to survey and locate the chapters with the most alterations of some kind.

HelenaSabel commented 8 years ago

@ebeshero and @setriplette I did an alternative table of contents (toc2.html) with the overlapping graphs. I'm not crazy about the colors but that's easy to change; I'm more concerned about being easy to understand... What do you think? Which one do you prefer?

ebeshero commented 8 years ago

@HelenaSabel toc2.html! Definitely. And I like the colors! Okay--I know what you're doing here because you and I discussed it. @setriplette: you may need a briefing!

ebeshero commented 8 years ago

@HelenaSabel A thought on the colors: What about yellow -- orange -- red for the bars on the left because they show us a little more of interest than the word counts? And on the right, choose a blue/green cool color for the word count comparisons?

HelenaSabel commented 8 years ago

Do you like the new colors better?

ebeshero commented 8 years ago

Yes--but do you think the urgent looking red should go on the right, for Southey's additions? Or which is the more interesting index, the omissions from Montalvo, or the additions to him? My preference, I think, is for the red to go with the additions!

Otherwise, yes, I like the new colors very much.

HelenaSabel commented 8 years ago

Changed the colors and I agree with you: additions should be more striking. I'm glad about oXygen finally validating flexboxes properties. The -webkit- prefix was only necessary for Safari, so I'll download it today to be sure that it supports flexboxes without the prefix and I'd consider the issue finally close. Thank you!

HelenaSabel commented 8 years ago

Ok, Safari is a pain to install in Ubuntu, because I would have to run it through other programs: do you mind checking yourself, @ebeshero?

ebeshero commented 8 years ago

Sorry for the long delay in responding--somehow I lost track of this. I have Safari only on my iPad and iPhone, and I think the toc.html page looks okay there. On my narrow phone, the light-blue Word Count Comparisons bars tuck themselves underneath the long yellow-orange-red Omissions-and-Additions bars, but the two svg's sit side-by-side in the iPad Safari window. I think that's what we want to see, right?

Since I don't have a MacOS computer handy, but Stacey does, she's the one to ask about how our TOC page at http://amadis.newtfire.org/toc.html looks on her computer. As I understand it (from removing the property and then applying it again) the CSS display:flex property is basically making it possible for the two SVGs to sit next to each other, and if it's not working in Safari's browser on an actual computer, We'll see the yellow-orange-red bars sitting on top of the blue Word Count bars, instead of side-by-side, right?

There are other ways to control the positioning of these SVGs if display:flex is behaving unpredictably. I think it's probably working right, but if you'd like to try something different, have a look at Amelia Bellamy-Royds' tutorial here: https://css-tricks.com/scale-svg/

I've discovered that SVG often does not respond the same way to CSS as HTML elements do, so I went searching for information on how others apply flex properties to SVG elements. From what little information I've found on the web (blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html ) and (http://codepen.io/chriscoyier/pen/FAbpm), people seem to be writing flexboxes for SVG with CSS and JavaScript.

Anyway, if all the display:flex is doing is just setting our chapter-by-chapter graphs side-by-side, I think it's probably working just fine and it's an elegantly simple solution. (Stacey, is it doing that on your Safari browser?) But I have some more questions about our SVG which I'll post in my next. @HelenaSabel @setriplette

ebeshero commented 8 years ago

@HelenaSabel @setriplette Here's a different kind of question about those SVG bars: They are of different lengths which makes it a little odd for comparing chapter-by-chapter values. Should we regularize these as reflecting percentages rather than counts? If we did so, we'd have to think about what makes a total count (of what?) for each chapter, so we can say that Southey's additions account for $SA percent of the $Whole, Southey-Montalvo matches are $SMatch percent of the $Whole, and Montalvo-omissions are $MO percent of the $Whole. But what makes the $Whole? Do we combine the wordcounts of Southey and Montalvo and call that 100%? It's something I've been thinking about now and again since we first output these bars: What does it mean to put them together as we are? And would it make more sense for them to reflect a percentage proportion of something?

ebeshero commented 8 years ago

@setriplette @HelenaSabel Sorry for the suddenness of this: I was actually fishing for an example of something from our Amadis files and started reviewing and correcting some little issues I'd neglected in the past month, and one thing led to another! Anyway, hi again Team Helistacea! Respond whenever you can.

HelenaSabel commented 8 years ago

About Safari, I had made that question before I could access that useful link you sent me about flexboxes and browser compatibility, so as you said, it should be working.

You made a very good point about the bars length. I think we could consider Montalvo as the $Whole so we can give it a fixed length. The percentage of Montalvo that Southey doesn't include are the omissions by Southey, and that would give us the position of the beginning of Southey's bar (that is, the beginning of the overlapping, because everything before it would the proportion of text that it's only present in Montalvo). Now, the problem would be to calculate the additions by Southey so we can draw the length of his bar... I think the solution goes by calculating the relation between the actual length of Montalvo's text and the fixed length we gave it, so we can apply the same parameters to Southey. That way, even if the additions are calculated using Southey's text, the proportion would be the correct one. I haven't explained myself very clearly, but I could write a new piece of well-documented code and, if you go through it, @ebeshero, you might be able to point out more easily if what I do makes sense. One the other hand, if we keep the bars as they are, we are giving information about the actual length of the chapters that would be lost otherwise.

ebeshero commented 8 years ago

@HelenaSabel I think I am following you...And I was just thinking about the converse problem: I was thinking that we need to look at the total word count of Southey's text, to determine the percent proportion of it that matches Montalvo or adds to it, and of course that doesn't help with determining what proportion is cut from Montalvo! (Just as we have a problem of calculating Southey's additions as a proportion of the Montalvo text, we have a problem of calculating his omissions as a proportion of the Southey text.)

You are, I think, suggesting that we set a figure (like, say 100) as the Whole, and determining the factor by which Southey's whole text length and Montalvo's whole text length can be output in terms of that figure, so the bars can be adjusted for comparison purposes. I think it would be interesting to look at that, AND, as you say, keep the original bar lengths as word counts. But what worries me about the Venn diagram unification of the bars is that it projects an illusion that Southey's additions and matches to Montalvo are part of the same whole quantity as his omissions--and I guess really that we are comparing Spanish word counts to English word counts.

I wonder if we might address some of these proportional issues by outputting two bars:

HelenaSabel commented 8 years ago

@ebeshero and @setriplette : I made a few table of contents proposals so you can decide which one translates better Southey and Montalvo’s relations: (There are a few lines of explanatory text above the graphs that would be deleted later on; their purpose was to display the difference between the proposals. If you have any doubts about the calculations, please let me know)

http://htmlpreview.github.io/?https://github.com/HelenaSabel/Amadis-in-Translation/blob/master/html/toc-1.html

http://htmlpreview.github.io/?https://github.com/HelenaSabel/Amadis-in-Translation/blob/master/html/toc-2.html

http://htmlpreview.github.io/?https://github.com/HelenaSabel/Amadis-in-Translation/blob/master/html/toc-3.html

http://htmlpreview.github.io/?https://github.com/HelenaSabel/Amadis-in-Translation/blob/master/html/toc-4.html

http://htmlpreview.github.io/?https://github.com/HelenaSabel/Amadis-in-Translation/blob/master/html/toc-5.html