A list of all the paths in the Folger XML edition of *Much Ado About Nothing*

A list of all the TEI element leaves in the Folger Shakespeare edition of Much Ado about Nothing

This visualization lists all TEI element leaves found in the Folger Shakespeare edition of *Much Ado about Nothing*, showing the raw hierarchical vocabulary of the text’s markup. It displays each unique leaf tag—such as `<w>`, `<pb>`, and `<stage>`—in a simple ordered list, making the document’s structural diversity immediately visible. The page is built with plain HTML and CSS, relying on the browser’s native DOM parsing to render the static list from the precomputed data. No JavaScript libraries or dynamic rendering are used; the source data comes from a gist authored by CliffordAnderson, presenting the tags exactly as extracted from the TEI-encoded play.

80% match

Gist fd8a31ea3830d17cacb585fc7313b388

This example visualizes the character relationships and scene structure of Shakespeare’s *Hamlet* as a directed network graph. It shows how characters connect across acts and scenes, with nodes representing acts, scenes, and characters, and edges indicating their narrative co-occurrence. The visualization uses a force-directed layout, likely implemented with `d3.forceSimulation`, to position nodes, while the GraphML data is parsed to build the graph. Scene and act nodes are color-coded and labeled by their act/scene numbers, and character nodes carry names, revealing the play’s structural flow. The rendering relies on a browser-based SVG or Canvas context, with the underlying data sourced from the included `ham-graphml.xml` file.

67% match

Named Entity Recognition on Folger's XML Edition of A Winter's Tale

This visualization maps the named entities in a TEI-encoded XML edition of Shakespeare’s *A Winter’s Tale* by classifying each line of dialogue with the Stanford NER library’s `english.muc.7class.distsim.crf` classifier. It shows how the text’s person, location, and organization labels distribute across acts and scenes, highlighting character mentions as the play progresses. Written in XQuery 3.0, the code extracts line text from `//tei:ab` nodes, joining `tei:w`, `tei:pc`, and `tei:lb` elements into a single string, then calls `ner:classify-string` per line. The output feeds a visualization that preserves the original line breaks, revealing which characters dominate each segment of the play.

65% match

For Arne

This example visualizes the structure of a single TEI-encoded article by extracting metadata from an XML source and rendering it as a document-tree diagram. It shows the hierarchical relationships between the article’s title, author, issue, and page-range fields, emphasizing how the original bibliographic data maps onto the TEI structure. The visualization uses an XQuery script with XPath queries to pull specific values, such as the issue and article numbers via regular-expression replacement, and the starting/ending pages from the `biblScope`. The rendering then relies on a force-directed layout (via `d3.forceSimulation`) to position nodes, with each node representing a TEI element and links showing parent–child dependencies. The data source is the gist’s embedded TEI file, and the output is a static SVG generated client-side, reflecting the parsed metadata without additional interaction.

Simple Books Document

This example visualizes a small set of books from an XML data source, grouping them by their `class` attribute (fiction or nonfiction). It first shows the hierarchical document structure as a simple indented list, then renders each book as a colored node in a force-directed graph. The visualization uses D3.js’s `d3.hierarchy` and `d3.tree` to lay out the XML tree, while `d3.forceSimulation` positions the book nodes, with the `class` value driving node color and tooltip text. The raw XML is loaded via `d3.xml`, and the document’s structure is directly mirrored in the layout, making the data’s grouping and classification immediately visible.

This is my example code from our classroom exercise

This example visualizes stage directions from a TEI-encoded text by associating each person with the stages they appear in. The XQuery code iterates through `//person` elements and collects matching `//stage` elements based on the `@who` attribute, outputting a structured XML list of directions per character. It relies on the TEI namespace and uses `fn:tokenize` to parse multiple ID references. The result is a plain XML document, not a graphical rendering, serving as a preprocessing step for potential downstream visualization.

<title>Testing XPath

This example demonstrates how an XML TEI document’s structure can be queried using XPath and represented as an interactive node-link diagram. It displays the document’s hierarchical elements—such as `teiHeader`, `text`, `body`, and `p`—as circles connected by links, with text content visible alongside node labels. The visualization uses D3.js’s `d3.hierarchy` and `d3.tree` layout to calculate positions, while `d3.zoom` enables panning and zooming. The code loads the XML via a local file and parses it with `DOMParser`, then applies XPath expressions via `document.evaluate` to extract elements and text for rendering.

Gist fd96cadbc2332c8aea3d

This visualization presents a hierarchical outline of Robert C. Martin’s “Craftsmanship and Ethics” principles, rendering each concept as a labeled node in a radial tree layout. The structure uses `d3.forceSimulation` with collision detection to position the nodes, while links connect parent concepts to their sub-principles. Text labels are placed directly on the nodes, and the layout emphasizes the progression from broad disciplines like “Discipline” down to specific practices such as “TDD” and “100% Code Coverage.” The data comes from the markdown source text, parsed into a nested JSON hierarchy.