N

N0taN3rd

@N0taN3rd·62 public vizzes

Loading thumbnail…

Just some typescript snippets I have come up with that I would like to use elsewhere

This example demonstrates a TypeScript utility type, `Unboxed`, which extracts the underlying element type from generic container types such as `Array`, `Map`, and `Set`. The code shows how conditional types with `infer` keywords unwrap nested generics, returning the item type for arrays and sets or a key-value tuple for maps. It includes a practical usage scenario where an `ArrayHolder` interface leverages `Unboxed` to treat an array-backed holder as a simple `Holder` interface, allowing functions to receive the unwrapped type directly. The snippet relies solely on TypeScript’s type system without any external libraries or data sources.

Loading thumbnail…

Still Drinking Gin And Juice

This example plays a trick on the Wayback Machine by loading a hidden iframe that captures the archived page’s React and ReactDOM libraries, then re-mounting a new React component inside that iframe. The visualization itself is not yet defined in the provided snippet, but the code sets up a full-screen canvas-driven animation framework using React and the browser’s native canvas and animation APIs. Images of frogs and a banner are fetched from the Internet Archive’s geocities.com captures, hinting at a playful, retro-themed visual collage. The page also manipulates browser history to disguise its origin and hides the archive’s toolbar.

Loading thumbnail…

Gist 16d0e6050f60256517db942d1fe29703

This example demonstrates a technique for remotely fetching and inspecting CSS stylesheets, particularly extracting image URLs from `srcset` attributes and resolving cross-origin stylesheet rules. The code uses the Fetch API with a CORS proxy to retrieve stylesheet contents, then parses `srcset` strings with a custom regular expression to collect image candidates. It also leverages `document.styleSheets`, `cssRules`, and a temporary `<style>` element to access rule data, while caching processed elements in a `WeakSet` to avoid duplication. The visualization output is logged to the console, showing the collected stylesheet rules and image URLs from the current page.

Loading thumbnail…

PYTHONPATH=<path to pywb dir>pywb/ python -v -u pywb/apps/cli.py --live &> out.txt

This example visualizes Python module import traces generated by running `pywb` with Python’s verbose flag, capturing output to a text file. It shows the dependency chain of `gevent` and related libraries as they are loaded, highlighting both source and extension modules. The visualization uses a network graph layout likely built with `d3.forceSimulation` to connect modules to their import origins. Each node represents a module or code object, with edges indicating dependency relationships, sourced from the parsed `out.txt` log lines.

Loading thumbnail…

Dump warc

This example shows a tool that extracts and saves web resources from a WARC archive file into a local directory, organizing files by their original URLs and content types. It parses the archive using the `node-warc` library in JavaScript or `warcio` in Python, mapping HTTP GET requests to their corresponding 200 OK responses. The code uses `filenamify-url` or `goldfinch` to sanitize filenames, and `fs-extra` or `pathlib` for file operations, writing each HTML, image, CSS, or JavaScript file with an appropriate file extension based on the response’s Content-Type header.

Loading thumbnail…

Gist 2559ad6fd17831c9259a8af6f38ec027

This example filters a Common Crawl index file to identify archived web pages. It reads a CDXJ file using the `read_cdxj.py` script, which parses each line with the `CDXObject` class from `pywb.warcserver.index.cdxobject`. For each record, it checks whether the MIME type contains "html" and the HTTP status code equals 200, then prints the corresponding URL. The visualization shows which URLs meet these criteria, highlighting successful HTML captures from the crawl data.

Loading thumbnail…

WADL Presentation

This example demonstrates a WADL (Web Application Description Language) presentation, mapping the structure of an API endpoint hierarchy through an interactive radial tree. It depicts the relationships between resources, methods, and parameters as a branching graph. The visualization uses D3.js’s force-directed layout (`d3.forceSimulation`) to position nodes and leaf elements, while SVG paths trace the connections. Data is parsed from a WADL XML file, converted into a hierarchical JSON, and rendered with `d3.geoPath` for the curved links, highlighting the API’s semantic structure.

Loading thumbnail…

Remove the annoying blogger preview click trap element.

This example shows a snippet of JavaScript that removes a click-trap overlay from a Blogger preview page, allowing direct interaction with the post. It detects the preview mode by checking for the substring `post-preview` in the URL, then uses `setTimeout` with a three-second delay to locate the `.blogger-clickTrap` element via `document.querySelector` and call `remove()`. The code relies on the standard DOM API and logs status messages to the console, but does not involve any external libraries or data sources.

Loading thumbnail…

Appease the margin police at all costs

This example shows a bash script that checks a PDF’s page margins by visually flagging any page that violates a precomputed “good” pixel sum threshold. The script uses `pdftk` to burst the PDF into individual pages, then overlays solid sky-blue rectangles with ImageMagick’s `composite` and `convert` commands to obscure the page body and edges. It then analyzes a histogram of each redacted page to count remaining white and sky-blue pixels, comparing the total against the expected value to identify offending pages. The process runs entirely from the command line, relying on `pdftk` and ImageMagick’s `convert`, `composite`, and `histogram:info:` features.

Loading thumbnail…

Lets build a site using gatsbyjs!

This example builds a GatsbyJS site using React, demonstrating how to scaffold and develop a static site with the Gatsby framework. It covers project initialization and dependency management with the Yarn and npm package managers, showing both basic commands and development workflows. The repo links to supporting libraries including Prettier for formatting, Standard for linting, and UIkit for styling, as well as deployment options like GitHub Pages and Surge.

Loading thumbnail…

wrapupDevCSS

An interactive React visualization animates the Google Chrome logo through layered SVG paths and gradients, reconstructing its iconic red, green, and yellow segments with radial shading for depth. The component renders a spinning or morphing presentation of the brand mark, using CSS animations and SVG clipping paths to transition between the logo’s component shapes. Font Awesome icons and Nerd Fonts glyphs are loaded for potential UI accents, while the animation sequences replay the Chrome emblem’s construction.

Loading thumbnail…

Selectively Compile Latex Documents

This example shows a LaTeX document workflow that selectively compiles only the chapters, appendix, abstract, and vita sections the author needs, using boolean flags declared in the main file. The code defines custom macros with the `xparse` and `xstring` packages, such as `\displayOnlyChapters{1,2}` and `\displayIf`, to control inclusion of each subfile. Each chapter or section, like `chapter1.tex` and `appendices.tex`, is a separate file included via the `subfiles` package, and the `ifthen` package evaluates the flags to decide which content is typeset. The setup relies on the `wsdlthesis` document class and includes the `lipsum` package for placeholder text.

Loading thumbnail…

John Berlin MS Thesis Defense Links

This example visualizes the relationship between the author’s master’s thesis defense and its associated resources, organizing links into categories for videos, code repositories, and documentation. A central title anchors the layout, with linked nodes fanning outward to represent each item’s type. The graph uses d3.forceSimulation to position the nodes and d3-link shapes to draw connections, while node colors and labels distinguish resource categories. The data comes from a markdown file listing the defense recording, slides, GitHub projects, and supplementary videos, with the rendering approach relying on SVG elements and D3’s force-directed layout engine.

Loading thumbnail…

SVG creation setup https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_path

This example demonstrates how to construct a custom two-color logo using SVG path commands within an HTML document. It shows a stylized letterform or geometric design composed of two distinct filled shapes: one rendered in deep blue and the other in red-orange. The setup relies on raw SVG elements and the `path` API with absolute and relative drawing commands, including arcs, lines, and horizontal/vertical segments. Gray guide lines overlay the 16×16 viewBox to illustrate the coordinate grid, making the construction process visible, and the rendering approach uses standard inline SVG without any external libraries.

Loading thumbnail…

https://web.archive.org/web/20170209205035/http://www.soufeel.com/

This visualization tracks the client-side rewriting of a single webpage archived in the Wayback Machine, logging every URL modification made by JavaScript functions. It tallies 357 total rewrites and 13 HTTP 404 errors, breaking down calls by API (such as `Element.setAttribute`, `Node.appendChild`, `Element.innerHTML`, and `document.write`) and by element and attribute type, with counts for each combination. Raw server logs and rewrite logs are appended, showing specific requests and error responses. The data is rendered as plain text tables and log excerpts, providing a quantitative audit of archive-injected behavior.

Loading thumbnail…

Usage

This example demonstrates how to replay a historical archived version of the CNN homepage through a headless Chrome browser. It loads a specific Wayback Machine capture from December 2017, setting the viewport to a fixed 1920×1080 resolution. The script uses Puppeteer to launch the browser, and injects a custom `magic` function that overrides `document.domain` to mimic the live site’s domain for proper page behavior. The navigation targets the archived URL directly, with a 60-second timeout, and any errors are logged to the console.

Loading thumbnail…

Webpack Simple Hot Reloading

This example demonstrates a development setup for a Webpack project with hot module replacement (HMR), where the webpack-dev-server serves a bundle.js file to an index.html page on localhost:9000. The configuration enables live reloading during development by using the `--hot` and `--inline` flags, along with the `webpack.NamedModulesPlugin` for readable module names and `webpack.NoEmitOnErrorsPlugin` to suppress error output. The code defines an entry point at `./index.js` and outputs a bundle with inline source maps, using `DefinePlugin` to set the development environment. The scripts support both standard and Windows command-line syntax for starting the dev server.

Loading thumbnail…

beer is good

This example presents a network graph that responds to text selection. The visualization likely uses D3.js to render nodes and links, with the `document.onselectionchange` event and `getSelection().baseNode` API capturing the selected text. When a user selects text on the page, the console logs that text’s content, linking the graph’s interactive behavior to the underlying document. The code focuses on event-driven selection handling rather than typical simulation forces or data-driven rendering, suggesting a static or unanimated layout.

Loading thumbnail…

Live Web links

This gallery example visualizes a live web link graph, mapping the relationships between news articles about the Equifax data breach, Catalonia’s independence movement, and breed-specific legislation. The visualization renders the connected URL nodes and edges in a force-directed layout, with each node’s position determined by the `d3.forceSimulation` API. The underlying data is sourced from a gist’s README file, which pairs original article links with corresponding Webrecorder archive URLs, allowing the view to compare live versus archived versions of the same story. The code uses the `d3.select` and `d3.force` methods to manage the interactive graph’s dynamics and layout, but does not include any custom panning, zooming, or filtering controls.

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.

Loading thumbnail…

Requires

This example demonstrates scraping public Twitter profiles with Puppeteer, a headless Chrome automation library, to extract tweet content, timestamps, embedded image URLs, and adaptive media containers. It also shows scraping a live webpage via the Wayback Machine to capture a full-page screenshot at 1920x1080 resolution. The script uses Puppeteer’s `page.evaluate` to run DOM queries, Bluebird’s `Promise.delay` for controlled waiting, and `fs-extra` to write the collected tweet data as JSON. It navigates pages, clicks "show more" links, and scrolls to trigger dynamic content loading before saving results.

Loading thumbnail…

Internet Archive Incorrectly Wrapping Valid HTML

This example demonstrates how the Internet Archive’s Wayback Machine inserts its banner and analytics scripts into an archived page, wrapping a Polymer web component’s `<dom-module>` and its script in unexpected ways. The archived HTML shows the original valid structure disrupted by added script tags and a `textarea` element containing code, breaking the component’s expected parsing. It uses Polymer’s element registration and observers, plus XMLHttpRequest for fetching data, highlighting the mismatch between archived and original HTML.

Loading thumbnail…

In Archive, Alexa, Twitter Sample

This visualization presents a comparative analysis of the DOM and network complexity of seven popular websites, based on JSON snapshots captured by a web crawler. Each site is represented as a distinct point, with its position determined by aggregated metrics such as total node count, the number of clickable elements, and the diversity of resource types loaded. The tool, built with React, ingests these raw JSON files and uses a custom layout algorithm to project the multi-dimensional data onto a two-dimensional plane. Hovering over a point reveals a detailed breakdown of a site's specific DOM attributes, framework detection results, and the distribution of network requests by MIME type.

Loading thumbnail…

NO a priori knowledge needed to detect anything about a web page

This example visualizes the distribution of JavaScript event listeners attached to DOM nodes on the BBC and CNN homepages using data from JSON dumps supplied in the gist. It shows which event types occur most frequently and how many listeners are registered per element, with node IDs and tag names labeled directly in the visualization. The React-based interface renders the listener counts using D3’s hierarchical layout and color-coded circles, while node-specific data is processed from the `listenerCount` and `listenersPerNode` objects. The code relies on `d3.hierarchy` and `d3.pack` to generate the bubble chart from the provided JSON files.

Loading thumbnail…

YouTube

This example recreates a snapshot of the 2017 YouTube homepage, showing its dense grid of video thumbnails, sidebar navigation, and header controls. Built as a React application, it renders the interface using a mix of SVG and canvas elements, with the page layout and many interactive components driven by Polymer, as seen in the included HTML file. The visualization also incorporates the YouTube player API and search box logic, animating elements and loading data from the live site to faithfully capture the experience of browsing the platform at that time.

Loading thumbnail…

JS Class proto Proxy

This example demonstrates a JavaScript class that uses a Proxy to create a counter with automatic default values and type enforcement. The `Counter` class wraps a plain object in a `Proxy`, intercepting `get` operations to initialize missing keys to zero and `set` operations to reject non-numeric values. It provides iterator methods like `entries`, `sortedEntries`, and `sorted` for retrieving and ordering the counted data, using standard JavaScript iterators and `Object.entries`. The code relies solely on native JavaScript APIs, including the `Proxy` traps `get`, `set`, `has`, `ownKeys`, and `getOwnPropertyDescriptor`.

Loading thumbnail…

2017-07-25: Swimming In A Ocean Of JavaScript. Using Nodejs, Electron And Chrome To Preserve The Web

This example demonstrates a Node.js toolkit for web archiving, showing how to parse, stream, and generate WARC and CDXJ files to preserve web content. It uses the `cdxj` library to read CDXJ indexes asynchronously, the `node-warc` parser with event listeners for streaming WARC records, and a configuration object for the `squid` crawler that controls Chrome via its WebSocket API. The code highlights handling HTTP/2 limitations in archives and supports features like page-same-domain crawling and auto-scrolling.

Loading thumbnail…

Terminus vs Gnome-shell Node print process.env keys for https://github.com/Eugeny/terminus/issues/124

A comparison of environment variables exposed by Terminus versus GNOME Shell, using the process.env keys dumped from each terminal session. The visualization pairs the textual output of `dumpProcessEnv.js` with three terminal variants—GNOME Terminal, Terminus with bash login, and Terminus with dash bash—to highlight differences in variable availability. It filters for keys unique to each environment, revealing that Terminus omits variables like `XDG_VTNR`, `SESSION_MANAGER`, and `DISPLAY` that GNOME Shell provides. The rendering approaches use plain text output from the Node.js script, with no additional visualization library involved.

Loading thumbnail…

summarize text

This example demonstrates automatic text summarization using the Sumy library in Python, reducing a document to two key sentences. It shows how to extract and summarize text from both plain strings and HTML files, with BeautifulSoup used for parsing HTML content. The code initializes an LSA (Latent Semantic Analysis) summarizer with an English stemmer and stop words, then processes documents through Sumy’s `PlaintextParser` or `HtmlParser` with a `Tokenizer`. The visible output prints the selected sentences, but does not render charts or graphs.

Loading thumbnail…

https://meta.discourse.org/push-service-worker.js

This example demonstrates how to handle push notifications in a service worker, replacing any existing notification with the same tag before displaying a new one, and managing notification clicks by focusing or navigating to the target URL. The code uses the Service Worker API, including `self.registration.showNotification`, `getNotifications`, `clients.matchAll`, and the `push` and `notificationclick` events. It reads payload data from the push event via `event.data.json()` and closes stale notifications before showing the new one.

Loading thumbnail…

Gist af2ebfb61ff58df18497b60494e7ecc0

This example visualizes the co-occurrence of JavaScript libraries across top websites, mapping which frameworks appear together on the same pages. It uses a force-directed graph layout to position library nodes, with edges representing shared site usage. The data is collected via concurrent HTTP requests using `FuturesSession` and `ProcessPoolExecutor`, parsed from Libscore API responses and Wappalyzer HTML, then aggregated into a combined JSON dataset. The visualization is built with React, rendering the network of library relationships derived from real site rankings and script tags.

Loading thumbnail…

use chrome to crawl

This example demonstrates automated web crawling and interaction using Chrome's remote interface. The code navigates through URLs from a seed list, captures page HTML and window environment variables, and programmatically clicks all elements with click event listeners. It manages JavaScript dialogs and navigation timeouts, while logging errors. It relies on Chrome's Remote Interface (CDP), along with Bluebird for promise handling, and custom detectors for JS library identification.

Loading thumbnail…

pywb proxy mods

This visualization shows the internal logic of the pywb web archiving proxy, displaying how HTML, CSS, and JavaScript content is rewritten during replay. The animation illustrates the code paths for rewriting HTML tags and attributes via the `HTMLRewriterMixin`, and content sanitization through `RewriteContent` using regex patterns for meta refresh and charset detection. The wombat.js script implements client-side URL rewriting with a JavaScript state machine that handles absolute, relative, and proxy-mode URL transformations. The gist demonstrates the interaction between these Python and JavaScript modules in the pywb rewriting pipeline, emphasizing the regex-based parsing and URL manipulation strategies.

Loading thumbnail…

Gist 28c56b9a8960e9c0cf99489d2e43881a

This example shows how to modify the layout of a Blogger template by adjusting the widths of its main content and sidebar containers. The code uses plain CSS to override the default dimensions, expanding the overall page width to 940 pixels and allocating 675 pixels to the main wrapper and 256 pixels to the sidebar. A second file applies more conservative changes, setting the outer wrapper to 760 pixels and the main column to 510 pixels. The gist provides two alternative CSS approaches for resizing a Blogger page structure.

Loading thumbnail…

detecting window.document.domain

This example detects assignments to `window.document.domain` inside inline JavaScript and removes them from a saved CNN news page. It parses each inline script into an abstract syntax tree using Babylon, traverses the tree with Babel’s `traverse`, and filters `AssignmentExpression` nodes where the computed key is the literal `'domain'` and the object is `document`. Modified scripts are regenerated with `babel-generator`, and the updated HTML is written back to disk using `fs-extra`. The code reads the original page with Cheerio and writes the result to `mod.html`.

Loading thumbnail…

test

This example presents a visualization of an image feed generated from a single Mendeley sign-in URL. The rendering uses the Canvas API to construct a grid of tiles, with each tile’s color and position driven by data parsed from the source URL's query parameters. The code leverages JavaScript’s `URLSearchParams` to extract route tokens, then draws the resulting pattern using `canvas.beginPath()` and `canvas.arc()`. The visualization shows the transformation of a simple web address into a geometric, color-coded matrix, highlighting the structural components of the URL string.

Loading thumbnail…

The case of helen-palmer

This example shows a Mendeley profile page displaying a user’s location (Trondheim, Norway) and a co-authors list loaded via paginated API requests. The code uses the Mendeley API client to fetch profile and location data, with an OAuth2 authorization flow for authentication and token refresh. It relies on jQuery-style component initialization to trigger `getNextCoAuthors` calls, parsing `Link` headers for pagination. Rendering is driven by preloaded state containing latitude, longitude, and place metadata, alongside API content-type definitions for profile and document resources.

Loading thumbnail…

https://www.mendeley.com/profiles/helen-palmer archived index.js files

An archived React application renders a data visualization using a bundled JavaScript file that combines SVG, Canvas, and WebGL rendering. The code initializes via the Babel polyfill and employs the core-js library, with the main module at index 348. It relies on the `d3.forceSimulation` approach for layout, while drawing paths through `d3.geoPath`. The visualization is a single-page interactive that animates its elements. The source is archived from a gist by N0taN3rd, with the code referencing Helen Palmer's profile page as its data source.

Loading thumbnail…

Gist 2d272134b57b02eb8cdd0c5904249591

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

Loading thumbnail…

View CNN.com by iframe

This example demonstrates a historical snapshot of CNN.com’s homepage replayed inside a web iframe, using the pywb web-archiving framework. The visualization shows how the original page’s JavaScript-driven content, including lazy-loaded zones and carousels, is reconstructed from archived assets. The code references CNN’s custom inline scripts—such as `CNN.Zones`, `CNN.contentModel`, and `pageReveal`—alongside the iframe’s `seamless` attribute. The pywb replay uses `wb.js`, `wb_frame.js`, and `default_banner.js` to embed the captured page, with the source being a captured timestamp from the archive.

Loading thumbnail…

test

This example shows a CNN homepage as captured by the Wayback Machine, with multiple interactive zones and containers that lazy-load content. The code defines a configuration object for CNN.Zones, listing twenty-seven zones and seven containers, and sets thresholds for sibling navigation and byline images. It uses JavaScript object literals and conditional error handling to manage webpack assets, but does not invoke any visualization libraries or render data directly. The page remains static in the provided body HTML.

Loading thumbnail…

Lets Make The CNN Archive Great Again: Unmangled Mins

This animated visualization compares two versions of CNN’s minified JavaScript files—one from 2016 and one from 2017—by tracking the global variables and property chains each file assigns, such as `CNN.Analytics` and `CNN.contentModel`. The data comes from a gist that parses unmangled code into structured objects mapping each property to its right-hand-side value. Rendering as an animation, it highlights how the codebase’s global footprint changes over time, using the file’s own JavaScript structure as the input rather than external libraries.

Loading thumbnail…

Gist d0ab7ec2c10ce36c96a324e961078911

This example visualizes the HTTP request and response headers exchanged when loading the Twitter profile page for @WebSciDL, showing how header fields and values are organized and compared. The React-based code uses the Gist’s embedded JSON data to render the headers as a structured, hierarchical tree or table, likely leveraging a library like `react-json-view` or custom components to display nested objects and arrays. It highlights details such as status codes, content types, security policies, and cookie attributes from the captured network traffic, making the raw header data more readable and navigable.

Loading thumbnail…

Mat Kelly, PhD Student

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.

Loading thumbnail…

un-scinote in r

This example plots a histogram of values from a CSV file (`reachNums.csv`), but transforms the y-axis to a base-2 logarithmic scale to better visualize the distribution of the reach numbers. The x-axis labels are converted to human-readable SI units (e.g., "1k", "1M") using a custom `f2si2` function that maps numbers to prefixes like kilo and mega. The code uses R's base plotting functions (`hist`, `axis`, `plot`) with the `pretty()` function to generate tick positions.

Loading thumbnail…

John Berlin CS725 Information Visualization

This visualization compares two views of the adjacency graph of the contiguous United States. An animated matrix view reorders states alphabetically and then by the number of neighboring states, highlighting how interior states like Tennessee have more connections than coastal ones. A node-link diagram shows the same graph, with hover tooltips revealing state names. Both views are rendered as SVG using D3 version 3, with data generated by the Python NetworkX library.

Loading thumbnail…

John Berlin CS725

This example demonstrates the "No Unjustified 3D: Occlusion Hides Information" rule of thumb by contrasting a 3D scatterplot with a 2D alternative. The 3D version, created with R's `scatterplot3d`, plots times one method won, times another won, and histogram differences, but suffers from occlusion and unclear axis relationships. The fix uses `ggplot2` with `geom_point` and `position_jitter` to over-plot correction, encoding the histogram difference via color. This 2D view clarifies point density and value positions while retaining the third variable's information through the color aesthetic.

Loading thumbnail…

John Berlin CS725 Information Visualizatoin

This visualization presents Summer Olympic data as two interactive charts. A scatter plot maps the number of male and female participants on its axes, with circle area encoding total participants. A bar chart shows the number of countries per Olympic year, with each bar colored by the hosting country. The implementation uses D3.js version 3 to render SVG elements and axes, reading data from a JSON file derived from sports-reference.com, with tooltips and animations enhancing the display.

Loading thumbnail…

Visualization Implementation (VI3)

Two scatterplots render 50 randomized data points each using D3.js. The left chart displays circles positioned by linear x and y scales with axes. The right chart clips its circles to a rectangular chart area using an SVG clipPath and includes an interactive text label that updates the chart with new data values on click. Both use d3.svg.axis for ticks and d3.scale.linear for domains.

Loading thumbnail…

fresh block

This example presents four separate D3 visualization panels, each displaying a distinct chart type in a single page layout. The upper panels show static data visualizations, while the fourth panel contains interactive text that, when clicked, triggers a one-time data update that refreshes the chart with new values. Built with D3 v3, the code sets up styled axes and SVG containers for each visualization, relying on D3's core selection and data-binding methods to render and update the graphical elements.

Loading thumbnail…

fresh block

Four small multiples display vertical bar charts, each with its own set of bars and labeled axes. D3 v3 is used to generate the charts, with `d3.scale.ordinal` and `d3.scale.linear` mapping data to positions and heights. A click on the text in the fourth panel triggers a one-time update, replacing the existing bar data via `d3.select` and `data()`. The axes are rendered with `d3.svg.axis` and styled with black strokes.

Loading thumbnail…

fresh block

Four distinct D3.js v3 bar and scatter chart examples demonstrate incremental visualization techniques, from simple HTML div bars to an SVG scatterplot with axes. The code builds random datasets and renders rectangles, circles, and text labels with linear scales. A final interactive example uses click-triggered updates and animated transitions to modify chart values dynamically.

Loading thumbnail…

Python3 version of Scott G. Ainsworth timemaps.py

This script demonstrates the Memento protocol by fetching and parsing a TimeMap from the MementoProxy aggregator. It displays archived snapshots (mementos) of a webpage, showing their timestamps and URIs alongside the original resource, TimeGate, and TimeBundle links. Using Python’s `urllib` and `requests` for HTTP retrieval, `dateutil.parser` for timestamp conversion, and a regex-based tokenizer for parsing Link format headers, it builds a dictionary of mementos. The example prints the first and last memento dates, making the temporal distribution of archives visible.

Loading thumbnail…

VI2

This example demonstrates a basic D3.js bar chart visualizing a static dataset of twenty numeric values. The visualization uses SVG rectangles to represent each value, with bar height proportional to the data point and a color scale that darkens with increasing magnitude. Text labels display the exact value above each bar, and the chart employs D3’s selection, data binding, and attribute methods (`attr`) to render the visualization. The dataset is hardcoded within the script, and the SVG canvas is sized at 500 by 150 pixels.

Loading thumbnail…

ICW2

This gallery example presents visualizations of 2014 college football passing statistics from a CSV file. The scatter matrix uses R's `pairs` function to plot combinations of passing yards, touchdowns, quarterback rating, and rushing stats. A bar chart using `ggplot2` with `geom_bar` displays passing yards per player, while another `ggplot2` bar chart shows average rushing touchdowns per conference, computed with the `aggregate` function. All charts are rendered as SVG.

Loading thumbnail…

Power of Data Redo

This example displays a row of 25 teal bars whose heights are randomly generated at load time. The visualization is built with D3 version 3, using `d3.select`, `.data()`, and `.enter()` to bind the dataset to appended `div` elements. Each bar’s height is computed by multiplying the random integer by 5 pixels, while the `div.bar` CSS class provides the base width, margin, and background color. The rendering approach relies on D3’s selection API to create and style the bars directly in the HTML DOM.

Loading thumbnail…

Week2

This bar chart shows the number of countries participating in the Summer Olympics from 1896 to 2012, with each bar representing one Olympic year. The visualization animates the bars and includes a tooltip displaying the host city and country when hovering over each bar. Built with D3.js v3, the chart uses d3.scale.ordinal and d3.scale.linear for positioning, d3.svg.axis for axes, and SVG rectangles to render the data from data.json.

Loading thumbnail…

Week2

This visualization displays historical Summer Olympics data, showing the number of male and female participants for each Olympic Games from 1936 to 2012 using horizontal stacked bar charts. D3.js with SVG rendering animates the transition between different years when the user selects a new Olympic Games. The chart uses d3.scale.linear for positioning bars along the x-axis and d3.scale.ordinal for the y-axis categories, with tooltips providing details about each year's statistics. The data is embedded directly in the HTML file as a JSON array.

Loading thumbnail…

better

A line chart displays the number of Olympic events held from 1904 to 2012, using data from a JSON file that includes details on participants, countries, and sports for each Summer Games. The visualization uses D3 v3 to create the chart, applying a time scale for the year axis and a linear scale for event counts, with a basis interpolation smoothing the line. The code sets a fixed y-domain from 43 to 303 events, and styling applies a steelblue line with axis labels, though the y-axis text is mislabeled as "Temperature (ºF)."

Loading thumbnail…

Gist 40a7b304a32e2e0db885

This example visualizes a peg-based board game using C++ with standard libraries including iostream, fstream, vector, and unordered_map. It defines classes for pegs, board spots, and players, tracking movement through a pegMove structure with coordinates and begin/end flags. The code renders board positions as characters and supports multiple peg colors (blue, green, red, big blue) with distinct identifiers. It demonstrates object-oriented design for game state management, including move tracking, occupancy checks, and position resets, though it does not include any graphics or plotting libraries, appearing to be a logical simulation rather than a visual data display.

Loading thumbnail…

Gist 598a74e0cb4c65102232

This example demonstrates a C++ program that first simulates traversal and deletion of nodes in a singly linked list, printing the values as it moves and removes each node, and then reads a board from the file `board.txt` into a 2D vector of characters. The rendering shows the board as a grid, printing each cell with its indices and value, and then updates two specific positions to display a modified board. The code relies on standard C++ libraries such as `<iostream>`, `<fstream>`, and `<vector>`, with no external visualization APIs.

Loading thumbnail…

struct operators

This example demonstrates sorting an array of 25 `stringStruct` objects, each containing a single-character string, into ascending alphabetical order. It shows three different sorting approaches using the C++ Standard Library’s `std::sort` algorithm: one with a custom functor (`sorter`), one with a lambda, and one with a template function. The code defines custom operators for comparing `stringStruct` instances and pointers, and overloads the stream insertion operator for output. The program prints the sorted sequence to the console, highlighting how operator overloading and custom comparators integrate with generic algorithms.