General
-We are impressed with the highly professional project site you have developed inside of fifteen weeks, and how much the team has learned of the issues of textual scholarship in facing the distinctive challenges of editing Emily Dickinson’s poems for the web!
Research questions
-You set out to re-purpose two old sites and to create a user interface that would find a new and better way to organize and investigate some very complicated textual information: a reading view that could show viewers Emily Dickinson’s poems in this collection as she wrote them with her variants included that would not prioritize one variant over the others. Along the way you developed a research question to study how drastically these poems were altered by later publishers, which you were able to explore using the coding methods from our class. Presenting Dickinson’s poems with all their variants is not exactly an easy thing and poses some steep challenges and methodological questions. We were delighted to see you all coordinate as a team to meet, quite brilliantly, to the challenges of scholarly textual editing for a digital medium, and to explore an important research question that track the publication history and the alterations posed by early editors to reduce the complexity of Dickinson’s poems. You present a study of 2 Dickinson’s poems as texts that transformed in print, and you offer a dynamic view to study how these texts changed over time. You also make a bold move to present a born-digital view of the poems that honors Dickinson’s poems as she wrote them. We think this is a very important contribution to scholarship on Dickinson that compares favorably to the reading interface of the standard electronic archive of Dickinson’s works located at http://www.edickinson.org/. Even if you as a small team of students cannot humanly take on the entirety of Dickinson’s corpus, what you present here is a brilliant proof-of-concept —an alternative way to read and study Dickinson’s manuscripts. We are pleased that you honored the original founder of the site with links out to her original and ongoing work, together with a clear narrative of your repurposing project. Having been in contact with the original project designer, we know that she is very pleased that you have so successfully relit the torch of her project, to keep Dickinson’s own work foremost in view for studying her work.
Use of Technology
-Your site reflects impressively the sophisticated coding skills you have learned in the course, as well as some you learned and applied on your own (such as image-mapping and editing). You have successfully implemented the following technologies:
-Use of TEI scholarly apparatus markup in a complicated way: not just to work with Dickinson’s variants in manuscript, but to plot the changes to her texts in multiple published editions, and in one case (Poem 11) to compare against a second manuscript with completely altered pronouns!
-Use of an extremely complex XSLT (Alex) with lots of conditionals over the collection of poems to generate a dynamic interface— the same buttons don’t appear by default on every page, but you’ve ensured with your XSLT that the buttons you output are those that represent the particular editions associated with this poem.
-Very careful, precise work with CSS, HTML5, and JavaScript to balance elements on the page and present an impressive reading interface (about which, see our comments in the “UX” section below).
-Especially impressive JavaScript (with CSS) work for the poem interface, in which you present a series of 12(!) functions that fire in response to users clicking on buttons—responding with highlighting as well as images appearing in set positions in relation to each other on the page. We are blown away by your dynamic positioning of the images, to overlay them in relation to each other when multiple editions are toggled to be shown together. You’ve worked hard to optimize a comparative view and your efforts will help teach us and other students! Thank you for this!
-Image editing and image mapping to make the images be part of the marked-up page design.
-Use of XSLT to produce SVG that counts and compares the alteration of Dickinson’s dashes from edition to edition, using <xsl:analyze-string> to explore text that you had not marked up.
-Very effective team use of GitHub throughout to organize project tasks, seek counsel, and update each other. Strong team communication enhanced by this technology.
-Everything checks out with w3c validator
“UX”: User Experience and Site Interface
-You faced a formidable challenge to create a site interface that answers a research need to help visitors to learn about and compare the multiple forms that Dickinson's poems took—in the way she wrote them and in the way publishers altered them. You succeeded quite brilliantly in an unexpected way: Where you might be tempted to make a distinct division or space in the window for each way of viewing a text, so the reader sees them side by side, as with the views generated by the Versioning Machine (http://v-machine.org/) or Juxta Commons (http://juxtacommons.org/), you took a bold step that made sense, to put visual emphasis on the key points of each poem in which alterations were made, and gave the viewer the power to compare using your buttons. Comparison is a complicated thing, and you've given the reader to power to make this as simple or complicated as they need it to be. The colors are well chosen to vividly distinguish the variant texts, and beautifully integrated with the colors on your mapped page-images. Your interface does something quite wonderful here: in taking time with the image-mapping, you've made it possible for readers new to manuscripts and text scholarship effectively to read the manuscript and readily to spot the zones of greatest alteration across the texts. That makes your site a very wonderful educational tool, and I (Elisa) am planning to invite my senior English Literature capstone students to study your work as a gateway to learning about textual scholarship and manuscript studies. The dash analysis is a clean and lovely design that, a little like the reading interface, challenges the viewer a little to figure out what he or she is looking at! It might help for us to see just a short paragraph of text above the gorgeous graph, just so the visitor comprehends what this is really about (since the phrase “dash reduction” won't immediately have meaning until we scroll down to read your discussion). It might help to add some JavaScript or simply @title attributes that might work as mouseover “tooltips” on the large circles of your legend, so that readers see what each abbreviation means. Perhaps the short paragraph that might appear above your graph is already mostly written in the separate page, analysis.html.
-We are very impressed with the care your whole team took with the detailed write-up on your About, Methodology, Dash Usage, and Conclusion pages. We particularly like what you've done with your Conclusion page to offer different ways of viewing the poem versions (as when you set a stanza from Dickinson's fascicle of Poem 2 next to its Atlantic Monthly version). That's appropriate here to make a point, and we suddenly read the whole lines to see how different their effect is. You couldn't afford to take up side-by-side space like that on other pages, but what your site visitors learn further along on this page is that your comparisons are based on your complex TEI encoding. You could, if you chose, keep building this site so that you produce alternative reading views of single editions of each poem intact, for example, to reproduce the full Bolts of Melody version of these poems on its own, and we can see how that would be possible to build all from the XML of a single file that holds all these variants together.
-This is beyond the scope of your fifteen-week project, but on the reading interface of the poems, I wonder if it might be possible to create different views of your pages optimized for narrow vs. wide screens. I say this because in reading the poems on a wide-screened monitor, I might want to make use of the space on each side of the margin to look at the print editions that are now tucked beneath the manuscript views as long as I have Fascicle 16 highlighted in comparison with one or more printed texts. It's a small matter and more of a JavaScript challenge that might be interesting—to use the layout you've designed when the browser window is narrow and to adjust to a different layout in a different context.
Closing Comments
-Overall we are hugely impressed with your project. We invited our colleague, David Birnbaum, of the Pittsburgh campus Digital Humanities course to review your site interface, and as you will see from his report, which I'll attach separately, he was as impressed as we were. We instructors worked hard to find things to critique, knowing, actually, that your team would appreciate feedback! We are very honored to have supported your teamwork on this project, and you should be very proud of this brilliant gem of a site you have produced. We hope (and expect) it will find some interest among scholars and students far beyond Pitt who want to learn about Dickinson.
# David:
This is a lovely site, with a clean, professional appearance; good functionality; and, from a general DH perspective, terrific “H” to go along with the terrific “D”. I’ll concentrate here on the visualizations and UX, but the project as a whole is of very high quality, and would have earned an A+ in my course. Perhaps what’s most impressive because it’s the sort of thing that frequently distinguishes professional-quality design is the attention to subtle details, such as the use of contrastive background and foreground colors (the only slip-up here in-volves the text on the circles above the SVG dash report, where the black text is hard to read against the darker background colors).
On the reading page for the poems, it looks as if the color of the button changes when it is selected, but it doesn’t look depressed to me (I checked in both Chrome and Firefox on Mac OS), although the texts says that “The button will show as depressed”. That appearance doesn’t project depression certainly isn’t a problem; since the color of the button matches the color of the text, it would tell the user what is and is not being displayed even without any change in the button’s appearance, but I found the mismatch between the documenta-tion and what I saw on the screen distracting. You might be able to get a more persuasive depressed effect by using a CSS drop shadow, or perhaps you might just say that the but-tons darken or lighten depending on whether they are selected. Alternatively, you might use a light-switch toggle widget, something like http://www.shutterstock.com/pic-260067197/stock-vector.html, which augments the color cue with a positional one.
Some verse lines are blank when none of the versions is selected, which makes obvious sense (at least in retrospect) in the case of lines that have no common content across all of the versions, but it nonetheless looked odd at first to see not only blank lines, but also some lines with just one or two words. If it doesn’t make sense for the visitor to view the poem with no version selected anyway, what should the default be? Perhaps an instruction to se-lect one or more versions?
Displaying variants in line works well with two readings, but as the number of variants in-creases (and especially when the number increases to the point that the line wraps), the legibility suffers. I wonder whether an interlinear display that highlighted the variants might not be more legible, e.g., instead of the following (which wraps onto a second line in my browser window):
how about:
You could toggle the individual lines on or off, similarly to the way you toggle readings on and off now, taking up the space when a line disappears.
I like the display of the page images with colored highlighting of the moments of variation, but I didn’t notice at first how it worked with multiple selections. When I selected one source, the image appeared to the right of the text display, but when I selected an addition-al source, I didn’t see anything at all happen to the image portion of the page. I realized only after several minutes, when I happened to scroll accidentally, that the images were all be-ing displayed, with the new ones added below the old, but because the first one was longer than the height of my browser window, I didn’t see originally that others were being added below it. Is there a way to modify the display to make the addition of new images easier to see, or, if not, at least to provide notification to the viewer that something new may have happened below the bottom of the visible window? You do explain this on the “How to View and Understand the Poems” page, which I could reach by clicking on “Poems” in the main menu, but because I was using the drop-down subitems instead, I wasn’t aware that the “Poems” entry in the main menu was clickable. (And once I discovered that and clicked on the others, I also saw http://dickinson16.newtfire.org/about.html for the first time, which has a lot of valuable information that you don’t repeat anywhere else. Perhaps those pages, the ones accessible by clicking on the main menu items, should also be submenu items.)
The SVG dash-reduction display is lovely, but not all information in it is equally easy to see and understand. As you write, the Final Harvest pattern of minimal dash reduction is clear because the results are generally consistent, most of the poems are represented, and there isn’t much else going on in that portion of the graph to serve as a distraction, but it can be more difficult to spot what’s going on in the editions that either are sparsely represented or have more varied values. How about if mousing over or clicking one of the labels at the top would somehow highlight the dots associated with it, perhaps by increasing the radius of the circle or temporarily drawing connecting lines? That the bar for Poem 11 is narrower than the others looks odd; even though the full width isn’t needed because that poem is in only two sources, the chart in general might look better if the bars all had the same dimen-sions. Is the order of the circles above the graph significant? It doesn’t appear to be (for ex-amples, the three Poems volumes seem to be in reverse chronological order), and perhaps it should be chronological, and the text should say that explicitly.
I’m guessing that you put the bibliography on the dash analysis page, even though it’s also relevant elsewhere (e.g., the contrastive reading pages), because it helps viewers under-stand the legend for the graph. If that’s the case, perhaps the abbreviation (inside the col-ored circle) should be listed along with the bibliographic information. I think it would be better, though, to create a separate bibliography page, and perhaps just include pop-up in-formation on mouseover for the colored circles above the chart. Readers won’t be looking for bibliography specifically on the dash analysis page (I had trouble remembering where it was when I went looking for it deliberately after having stumbled over it once), and be-cause the list of books is long, it isn’t really possible to look at the bibliographic entries and the dash analysis chart at the same time anyway, that is, without scrolling, so any ad-vantage of having them on the same page is already partially compromised.
I spot-checked the HTML and CSS and it was all valid. The JavaScript works as advertised, and it’s easy to understand, although you might want to consider the following modifica-tion:
• Instead of object.onclick, try object.addEventListener('click', functionName, false) (as you already do with the window 'load' event).
• You might be able to consolidate your long list of buttons() “if” statements as a loop, where you could harvest the relevant @id values (perhaps they could all be mem-bers of a @class, if there isn’t a way to find them easily otherwise) and add the event listeners in that loop.
• To toggle @class values, you might want to try using the object.classList property instead of performing string surgery with regex. Elisa’s tutorial about this is at http://dh.obdurodon.org/javascript/classListToggle.xhtml.
All in all, this is a terrific project. Congratulations!
# Dr B:
<xsl:analyze-string>to explore text that you had not marked up. -Very effective team use of GitHub throughout to organize project tasks, seek counsel, and update each other. Strong team communication enhanced by this technology. -Everything checks out with w3c validator# David: This is a lovely site, with a clean, professional appearance; good functionality; and, from a general DH perspective, terrific “H” to go along with the terrific “D”. I’ll concentrate here on the visualizations and UX, but the project as a whole is of very high quality, and would have earned an A+ in my course. Perhaps what’s most impressive because it’s the sort of thing that frequently distinguishes professional-quality design is the attention to subtle details, such as the use of contrastive background and foreground colors (the only slip-up here in-volves the text on the circles above the SVG dash report, where the black text is hard to read against the darker background colors).
On the reading page for the poems, it looks as if the color of the button changes when it is selected, but it doesn’t look depressed to me (I checked in both Chrome and Firefox on Mac OS), although the texts says that “The button will show as depressed”. That appearance doesn’t project depression certainly isn’t a problem; since the color of the button matches the color of the text, it would tell the user what is and is not being displayed even without any change in the button’s appearance, but I found the mismatch between the documenta-tion and what I saw on the screen distracting. You might be able to get a more persuasive depressed effect by using a CSS drop shadow, or perhaps you might just say that the but-tons darken or lighten depending on whether they are selected. Alternatively, you might use a light-switch toggle widget, something like http://www.shutterstock.com/pic-260067197/stock-vector.html, which augments the color cue with a positional one.
Some verse lines are blank when none of the versions is selected, which makes obvious sense (at least in retrospect) in the case of lines that have no common content across all of the versions, but it nonetheless looked odd at first to see not only blank lines, but also some lines with just one or two words. If it doesn’t make sense for the visitor to view the poem with no version selected anyway, what should the default be? Perhaps an instruction to se-lect one or more versions?
Displaying variants in line works well with two readings, but as the number of variants in-creases (and especially when the number increases to the point that the line wraps), the legibility suffers. I wonder whether an interlinear display that highlighted the variants might not be more legible, e.g., instead of the following (which wraps onto a second line in my browser window):
how about:
You could toggle the individual lines on or off, similarly to the way you toggle readings on and off now, taking up the space when a line disappears.
I like the display of the page images with colored highlighting of the moments of variation, but I didn’t notice at first how it worked with multiple selections. When I selected one source, the image appeared to the right of the text display, but when I selected an addition-al source, I didn’t see anything at all happen to the image portion of the page. I realized only after several minutes, when I happened to scroll accidentally, that the images were all be-ing displayed, with the new ones added below the old, but because the first one was longer than the height of my browser window, I didn’t see originally that others were being added below it. Is there a way to modify the display to make the addition of new images easier to see, or, if not, at least to provide notification to the viewer that something new may have happened below the bottom of the visible window? You do explain this on the “How to View and Understand the Poems” page, which I could reach by clicking on “Poems” in the main menu, but because I was using the drop-down subitems instead, I wasn’t aware that the “Poems” entry in the main menu was clickable. (And once I discovered that and clicked on the others, I also saw http://dickinson16.newtfire.org/about.html for the first time, which has a lot of valuable information that you don’t repeat anywhere else. Perhaps those pages, the ones accessible by clicking on the main menu items, should also be submenu items.)
The SVG dash-reduction display is lovely, but not all information in it is equally easy to see and understand. As you write, the Final Harvest pattern of minimal dash reduction is clear because the results are generally consistent, most of the poems are represented, and there isn’t much else going on in that portion of the graph to serve as a distraction, but it can be more difficult to spot what’s going on in the editions that either are sparsely represented or have more varied values. How about if mousing over or clicking one of the labels at the top would somehow highlight the dots associated with it, perhaps by increasing the radius of the circle or temporarily drawing connecting lines? That the bar for Poem 11 is narrower than the others looks odd; even though the full width isn’t needed because that poem is in only two sources, the chart in general might look better if the bars all had the same dimen-sions. Is the order of the circles above the graph significant? It doesn’t appear to be (for ex-amples, the three Poems volumes seem to be in reverse chronological order), and perhaps it should be chronological, and the text should say that explicitly.
I’m guessing that you put the bibliography on the dash analysis page, even though it’s also relevant elsewhere (e.g., the contrastive reading pages), because it helps viewers under-stand the legend for the graph. If that’s the case, perhaps the abbreviation (inside the col-ored circle) should be listed along with the bibliographic information. I think it would be better, though, to create a separate bibliography page, and perhaps just include pop-up in-formation on mouseover for the colored circles above the chart. Readers won’t be looking for bibliography specifically on the dash analysis page (I had trouble remembering where it was when I went looking for it deliberately after having stumbled over it once), and be-cause the list of books is long, it isn’t really possible to look at the bibliographic entries and the dash analysis chart at the same time anyway, that is, without scrolling, so any ad-vantage of having them on the same page is already partially compromised.
I spot-checked the HTML and CSS and it was all valid. The JavaScript works as advertised, and it’s easy to understand, although you might want to consider the following modifica-tion:
• Instead of object.onclick, try object.addEventListener('click', functionName, false) (as you already do with the window 'load' event).
• You might be able to consolidate your long list of buttons() “if” statements as a loop, where you could harvest the relevant @id values (perhaps they could all be mem-bers of a @class, if there isn’t a way to find them easily otherwise) and add the event listeners in that loop.
• To toggle @class values, you might want to try using the object.classList property instead of performing string surgery with regex. Elisa’s tutorial about this is at http://dh.obdurodon.org/javascript/classListToggle.xhtml.
All in all, this is a terrific project. Congratulations!