Mat Kelly, PhD Student

100%

Mat Kelly, PhD Student

✓ Published0🌍 Public

Last edited Oct 28, 2016

Created on Oct 28, 2016

This visualization examines the structure and contents of two WARC files from different crawls of Mat Kelly's academic homepage. It animates a series of frames that map the sequence of HTTP requests and responses, using a force-directed layout via `d3.forceSimulation` to position nodes by their relationships. The rendering combines SVG, Canvas, and WebGL to display the animation, with timing controlled by `transition.attrTween`. The data is parsed directly from the provided `heritrix.warc` and `wget.warc` files, visualizing crawl behavior and server responses like redirects and robots.txt blocks.

AI-generated description

Similar vizzes

Loading thumbnail…

CS 891 Web Archiving Seminar

This visualization demonstrates the process of web archiving by showing the WARC file records produced when using `wget` to archive two websites: `http://example.com` and the React Router documentation. The code uses `wget` with extensive arguments including `--mirror`, `--warc-cdx`, and `--page-requisites` to capture complete page snapshots. The example displays the resulting WARC file structure, containing request, response, metadata, and resource records, along with a shell script that orchestrates the archiving workflow and manages the Wayback Machine collections.

NN0taN3rd

67% match

Loading thumbnail…

Wavy treemap

This visualization shows the D3.js source code as a treemap where rectangular cells are distorted into a wavy, custom shape. The layout uses a standard `d3.treemap` with `d3.stratify` to structure the data, then applies custom distortion functions to the computed rectangles, converting them into SVG paths. The wavy warping is animated over five seconds using a transition, with the final shape approximating the D3 logo. Hovering a cell reveals its file path and line count in a tooltip.

KKcnarf

67% match

Loading thumbnail…

Gist 8a97689739c217f28474d80c89013628

This visualization uses a force-directed graph to show relationships between entities, with nodes positioned by `d3.forceSimulation` and links drawn as curved paths. The code computes node sizes and colors from quantitative attributes, while a canvas overlay via `d3.geoPath` and `getImageData` samples pixel density to modulate link opacity based on local clustering. It employs a custom `transition.attrTween` to animate node drift when the simulation restarts, and uses the `d3.hierarchy` API to flatten nested data from a JSON file. The visualization reads credentials from an `env.list` file for a private data source, but the rendering logic is independent of that authentication step.

CConorAspell

65% match

Loading thumbnail…

Untitled

This interactive network visualization uses D3 v4's force-directed simulation to display the structure of Softtek's DevOps toolchain. The graph, loaded from `miserables.json`, depicts hierarchical relationships between technologies and practices, from monitoring tools like Nagios and Prometheus to cloud services and configuration management systems. Nodes are rendered as small circles on a Canvas element, with links drawn as gray lines. Users can drag individual nodes to explore the network, which responds dynamically through the `d3.forceSimulation` API. The `d3.drag` function enables node repositioning, restarting the simulation to maintain layout stability.

Aarg04

63% match

Loading thumbnail…

WGET example

The visualization shows a network of hyperlinks and page relationships from a website crawl, using a force-directed graph layout. It employs D3.js’s `d3.forceSimulation` to position nodes (representing pages and resources) and `d3.link` to draw edges, with node size reflecting in-degree. The example is generated from a Wget command (`wget -mkEpnp http://example.org`) that mirrors a site, and the code parses the resulting HTML to extract links and build the graph. Data source is the locally mirrored site structure, rendered via SVG with transparent node fills and gray links, emphasizing connectivity patterns without animation or interaction.

HHugoberry

63% match

Loading thumbnail…

Wavy treemap

A wavy treemap displays the hierarchical structure of the flare.csv dataset, with each rectangular cell distorted by sinusoidal waves along both axes to create an undulating, artistic surface. The visualization transitions smoothly from a standard nested treemap to the wavy form. Using D3 v4, it applies `d3.treemap` for layout, `d3.stratify` for hierarchy, and custom path interpolation via `transition.attrTween` to morph rectangular boundaries into curved paths. Hovering highlights a cell and shows its ID and value via a native title tooltip.

KKcnarf

63% match

Loading thumbnail…

Gist 484101

This visualization shows an interactive network of interconnected nodes, with each node representing a person and links showing connections between them. It reveals the structure of social ties, likely from a GitHub collaboration graph, by grouping related clusters. The rendering uses a canvas-based `d3.forceSimulation` with custom collision and link forces to position nodes, while a custom `d3.geoPath`-style projection maps node positions onto a projected sphere. The code also employs Canvas `getImageData` to detect node boundaries for hover interactions, and uses `transition.attrTween` for smooth link animations. The underlying data is loaded from a Gist, and the visualization runs entirely client-side without external data files.

DDylanFM

62% match

Loading thumbnail…

Gist 021802844523c89a6e3f2aa959bc8421

This visualization uses D3.js to simulate a force-directed network layout, drawing nodes as circles connected by curved links. The code employs `d3.forceSimulation` to compute positions and velocities, with link distances tuned by the `distance` accessor and repulsive forces via `forceCollide`. It renders onto an HTML canvas using the Canvas API, and the animation loop runs continuously via `requestAnimationFrame`. The data is hardcoded in a variable named `data`, containing node and link arrays, but no external dataset is loaded; the example focuses on demonstrating a custom force layout with adjustable parameters.

MMbrownshoes

62% match