Data from Jesse Wills finding aid that needs to be extracted into individual components

For Zach Johnson

This example transforms a raw XML extract of the Jesse Wills finding aid into structured archival units using XQuery 3.1. The code loads a source document from a GitHub gist, then uses a tumbling window to pair adjacent XML elements into `c02` records. It tokensizes `unittitle` text by semicolons and periods, classifies segments as folder containers or dates, and constructs `did` elements with normalized `unitdate` and `unittitle` values. The result is a cleaned, hierarchical data structure suitable for downstream visualization, though no rendering library is invoked here.

71% match

Data from XML2RDF Workshop

The visualization maps correspondences from the XML2RDF workshop, plotting letters and postcards as geographic points in the Netherlands. It shows the distribution and co-location of messages sent from Den Haag, using GeoJSON features with coordinates and descriptive properties. The map is rendered with D3’s geo path, while point placement and interactions rely on D3’s force simulation for spatial layout. The underlying data comes from the provided correspondents.geojson file, which encodes sender details and place names.

65% match

Gist ed756303e2cbb63f5fc8

This visualization uses a force-directed layout to show relationships between terms and facets, with each term linked to a facet (binding or year). The graph is rendered using D3’s `d3.forceSimulation`, with nodes and links drawn as SVG elements. The code reads from an XML file (`facets.xml`) via `d3.xml` and parses `<term>` elements to build the network. It applies a force simulation with charge and link forces, and updates node positions on each tick using `d3.drag` for interactivity. The visualization clearly distinguishes term nodes from facet nodes, revealing clustering by year and binding type.

64% match

Adapted from https://github.com/akleemans/letter-frequency

A comparative visualization of letter frequencies across 16 languages, shown as an interactive network of letters and language nodes. The visualization uses `d3.forceSimulation` to position nodes, with link widths encoding frequency values from the CSV dataset. Hovering highlights a selected language or letter, revealing its frequency distribution across connected nodes. The code accesses the raw CSV data and applies force-directed layout to cluster related letters and languages, making cross-linguistic similarities and differences visually apparent.

Gist c8fa96678eda5a2e92a93b8777bf1e1a

This example uses a custom JavaScript implementation with the D3.js library to render a small collection of user-supplied x,y coordinates as a scatterplot. The code computes an attraction-repulsion force simulation via a bespoke `d3.forceSimulation`-like routine, drawing nodes and connecting edges on an SVG canvas. The five data points (100,100; 130,120; 80,180; 180,80; 180,40) are displayed without axes or labels, clearly showing their relative spatial arrangement and the network structure formed by the force-directed layout. The rendering relies on SVG `<circle>` and `<line>` elements, with interaction limited to the static initial placement.

JJuannovo

Gist e23004e556ab1d1e670720475c9ef0ce

The visualization shows a network of connected nodes, each labeled with a letter, where edges link pairs of nodes. It uses d3.forceSimulation to position nodes, with a drag interaction and a highlighted path between two specific nodes. The rendering relies on SVG elements (circles, lines, and text) updated via d3’s data join. The regex pattern `(?<=\d)\s(?=[A-z])` appears in the code, suggesting it processes input text to extract or filter connections, though the exact source data is not visible.

HHugoberry

Gist 8989f184ab98d1e190581e18829af3be

This example shows a force-directed graph of email communications, revealing clusters of senders and recipients by their connection strength. It uses D3’s `d3.forceSimulation` to compute node positions and `d3.forceLink` to manage edges, while a Canvas `getImageData` pixel readout colors nodes by their local density. The graph is drawn on a 2D canvas, with node size and color encoding degree centrality and community membership. Data is loaded from an external edge list, and the simulation runs continuously with a fade-in transition via `transition.attrTween` on opacity.

CConorAspell