NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {upg dh|ds}
Creative Commons License Last modified: Monday, 27-Nov-2017 04:45:53 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

We have been working with a table of nineteenth-century labor survey results from the Nell Nelson project in our XSLT and SVG units, and we return to it now to integrate HTML with SVG, JavaScript, and CSS. This assignment will give you experience with designing a project HTML page to host SVG together with HTML, and to integrate information from an SVG chart with information retrieved on-click from an HTML table. In the process, you’ll return to the “drawing board” to output your HTML and SVG afresh, with a plan for setting attributes and elements for users to interact with in JavaScript. You will be reviewing much of what you have learned in this course and gaining experience we hope you will also apply to your project design work.

Your task

We began here, with a TEI XML file we created by transcribing this table, using feature structures markup in the TEI:

19th-century labor survey from Nell Nelson project

Our goal has been to produce a readable web interface to make this table data more accessible to interested readers. We are now ready to work in stages from our TEI XML to produce something like this webpage, to set SVG elements in relation to HTML elements on a webpage, and to take this one step further to add JavaScript and make the presentation dynamic. Our SVG on this page is pulled from a student homework assignment from the Fall 2015 class, and we have worked on fitting the SVG with HTML elements. In our fully functioning model (which we will show you in class and post on the NewtFire website after you have completed this assignment) we wrote JavaScript to script a series of events to occur with a site visitor clicks on a bar of the SVG graph: On click of a bar, the table to the right will change to reveal a currently hidden table row that contains the survey result data for the particular survey question represented by that bar. You should not produce exactly the same design we did (which in some respects is a little visually repetitive since we reproduce the survey questions twice), and we expect that you will each come up with your own way to lay out the information on your solution page. For this assignment, then, we ask that you accomplish the following:

Some guidance with stepping your way to a solution

We recommend you begin this assignment with a sheet of paper and a pencil, or something that helps you sketch out a battle plan. This is how we work on project design challenges: We start with a document analysis of our input XML and try to sketch something on paper about how we want to output and visualize information from that XML in a user-friendly website. With this assignment we wanted to model that process with specific task that might be like something you are working on for your projects. Here’s some guidance on what you will need to plan for and some strategies we used to develop our solution:

What to submit for your homework

You will need to submit multiple files to complete this assignment:

We ask that you associate your files with relative URLs so that you can upload them to Courseweb or put them in place (in relation to each other) on whatever web server you wish to use. Submit this on Courseweb, but if you like, you may also mount your files on your newtFire or GitHub io webspace.