H

Herst

@Herst·19 public vizzes

Loading thumbnail…

Gist d4c7362c0aa36f0dcf0fa78549e1d3b1

This visualization demonstrates an automatic root logout mechanism for interactive shell sessions. The code appends a configuration block to `/root/.bash_profile` that sets a 600-second idle timeout (`TMOUT`) for interactive shells, enforced via a `case` statement checking for the `i` flag in shell options. The script uses `sudo tee` to safely write the configuration with root privileges. The rendering approach is entirely text-based, showing the shell script and its embedded here-document that modifies bash startup behavior. No graphical libraries or data sources are involved; the visualization highlights the code structure and the logic for auto-logging out idle root sessions.

Loading thumbnail…

Gist 44be7198b7913c5e683122ab224baa9e

This example demonstrates a shell-based spinner that provides visual feedback during a long-running command-line task. Instead of a graphical chart, it renders a rotating line animation directly in the terminal by updating a single carriage-returned character (`\r`) on the standard error stream. The script iterates through the characters of the string `/|-\` using a modulo index, printing one frame per line of piped input. It relies on standard shell constructs like `printf`, a `while` loop with `read`, and an environment variable for state, with no external JavaScript libraries or data sources involved. The spinner stops and clears the line after the input stream ends.

Loading thumbnail…

Gist 3265e265f71ea51a81e03416e00e8e94

This example shows a shell script that establishes a serial connection to a running QEMU virtual machine. It demonstrates how to bridge a QEMU UNIX socket to a pseudo-terminal using `socat`, then attaches that terminal to a `screen` session for interactive access. The script first attempts to reattach to an existing screen session named `qemu-serial`; if that fails, it launches `socat` in the background to link the socket to a PTY, starts `screen` with that PTY, and cleans up `socat` once screen exits. It relies on `set -euo pipefail` for strict error handling and checks screen’s process list to decide whether to kill the background `socat`. The code uses standard shell utilities (`screen`, `socat`, `grep`) without any external data libraries.

Loading thumbnail…

Gist 95d8b883a65f8efcb89318c01a98ab54

This example shows a shell script that automates the installation or upgrade of the Go programming language on a Linux system. The script fetches the latest Go version from the official Go version endpoint, checks the currently installed version, and proceeds to download and extract the appropriate Linux AMD64 tarball. It also updates the system’s PATH by appending the Go binary directory to `/etc/profile` if not already present. The code uses command-line tools like `curl`, `tar`, and `grep` to perform these operations, relying on Go’s public version API and download server.

Loading thumbnail…

Gist 7ea7490cb95fe21dfad10572a1c8244f

This example visualizes the process of checking and updating the UPX executable packer to its latest release version. It shows a shell-script-driven workflow that queries the GitHub API for the newest release tag, compares it to the locally installed version, and either reports the tool is up to date or proceeds to download, compile, and install the source tarball. The code relies on standard command-line utilities (`curl`, `jq`, `tar`, `make`) and directly parses version strings, without any graphical or interactive rendering libraries. The rendering approach is purely textual terminal output, with no data visualization beyond status messages.

Loading thumbnail…

Gist 83e1b6fcb5b1da33f595c08405f89f2a

This example visualizes a system administration workflow that automatically masks or unmasksthe Linux sleep and suspend targets based on active SSH sessions. It shows a shell script that counts established SSH connections on port 22 using `ss` and `awk`, then conditionally runs `systemctl mask` or `systemctl unmask` on `sleep.target` and `suspend.target`. The visualization highlights the script’s branching logic driven by `PAM_TYPE` (open or close session) and the connection count. No external charting library is used; the code relies on standard shell utilities (`ss`, `awk`, `logger`, `sudo`) to manage systemd power management.

Loading thumbnail…

Fun with <text>

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

Loading thumbnail…

Gist ea3c2dbb293136905194cfa2fa60cec8

This example demonstrates a shell script that automates the download and extraction of the latest Linux 64-bit geckodriver release. It shows how to query the GitHub API for the newest release, parse the download URL using `sed`, and pipe the archive directly into `tar` for extraction. The script relies on `curl` to fetch the API metadata and `wget` to retrieve the tarball, providing a one-liner workflow for staying up-to-date with geckodriver binaries.

Loading thumbnail…

Stroke fun waterfall

This visualization is a test harness for evaluating browser rendering oddities in SVG strokes and text. It displays a grid of waterfall-style test cases with varying text, stroke widths, font sizes, and opacity settings, all rendered using D3.js v4. The tool demonstrates differences between `paint-order` and double-painting techniques, as well as `geometricPrecision` and `spacingAndGlyphs` text-rendering options. Users can adjust parameters via a fixed control panel or URL query string to isolate specific rendering behaviors across different browser engines.

Loading thumbnail…

Click vs. (a great deal of) Drag(ging)

Twenty colored circles are rendered in an SVG, where each circle can be either clicked or dragged. A click triggers a two-step radius animation (expanding to 64, then shrinking back to 32), while dragging moves the circle and, once the drag exceeds a small threshold, brings the circle to the front using `raise()` and adds an active class. The example uses D3 v4’s `d3.drag()` with `.clickDistance(4)` to distinguish clicks from drags, alongside manual checks on `sourceEvent` coordinates to handle edge cases where the drag ends near the start point. Data is generated randomly as an array of 20 `{x, y}` objects, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

Loading thumbnail…

Argyle <pattern>

A repeating argyle pattern fills a circle with rows of diamond shapes, where each diamond’s fill color and stitch color change smoothly over time. The pattern is drawn using SVG elements inside a `<pattern>` def, with colors selected from random ColorBrewer palettes or d3 interpolated scales like `d3.interpolateViridis`. Each recolor run uses `d3.transition` with `styleTween` and `d3.interpolateLab` to animate fill and stroke changes.

Loading thumbnail…

Fun with <text>

This example demonstrates three different SVG techniques for adding a white outline to text so it remains legible over any background. The first uses two stacked `<text>` elements, the second relies on the `paint-order` attribute, and the third applies a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge`. The map is interactive with d3.zoom for panning and zooming, and controls adjust font size, stroke width, rotation, and other text properties.

Loading thumbnail…

Dot Dot Dot Demo

This demo shows a single yellow ellipsis of three dots rendered as large, thick-stroked text on a plain white background, centered on a 500 by 300 SVG canvas. The text uses the `textLength` and `lengthAdjust` attributes to control exact spacing and glyph distribution. The example relies on native SVG presentation attributes, including `stroke`, `stroke-width`, and `paint-order`, to create the outlined effect. It demonstrates basic text rendering in an inline `<svg>` element without any external libraries or data sources.

Loading thumbnail…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

This example demonstrates an interactive rectangle that can be resized and repositioned within a fixed map area using mouse or touch gestures. Dragging the corner handles adjusts the rectangle’s width and height while enforcing minimum size constraints, and dragging the rectangle’s interior moves it without exceeding the map boundaries. The visualization uses the D3.js library’s zoom and drag behaviors, with SVG elements for rendering and a custom zoom constraint function to keep the rectangle within the coordinate space. Numeric inputs for x, y, width, and height update live as the rectangle changes, reflecting the current state of the data.

Loading thumbnail…

Pan & Zoom III

This example shows a dense phyllotaxis pattern of 2,000 circles that users can pan and zoom with the mouse. The code uses the d3-zoom plugin in D3 v4 to handle input, applying the zoom transform directly to a group element containing the circles. An invisible overlay rect ensures the zoom behavior receives events, while the SVG’s coordinate system is adjusted with a translate transform. The rendering is done via SVG circles, with a resize handler updating the layout.

Loading thumbnail…

setTimeout/setInterval experiment involving slow-downs

This example demonstrates how `setTimeout` and `setInterval` differ in their behavior when a callback runs longer than the specified interval. It shows that `setInterval` can queue overlapping calls, while `setTimeout` waits for the previous execution to finish. The visualization uses a counter and a select menu to switch between the two methods, with a checkbox to artificially slow down the `tick` function via a blocking `while` loop. The code relies on D3.js v4 for DOM selection and event handling, and uses `window.setTimeout` and `window.setInterval` to schedule the counter updates. The counter increments by 0.5 every 500 milliseconds.

Loading thumbnail…

Wibbly-wobbly behavior in Chrome (Blink)

A continuously resizing SVG `<image>` element and a yellow rectangle reveal a rendering discrepancy in Chrome’s Blink engine: despite `preserveAspectRatio="xMinYMin"` on both the image and its referenced SVG, the graphic stretches while the rectangle stays fixed. Using d3.v4, the code animates both elements’ widths from 128 to 192 pixels over ten seconds via `transition.attr`. The effect intensifies with browser zoom, highlighting a bug where Blink ignores the image’s aspect-ratio constraint when loading external SVG files.

Loading thumbnail…

A small script that warns about functions that are not called from within the code (fork from https://gist.github.com/Herst/287aa233c0acba6ed2bc2d093dec786d ported to Python 2)

This example demonstrates a Python script that identifies functions defined in source code but never called elsewhere in the same set of files. It shows how static analysis can flag potentially dead code for cleanup. The implementation uses Python's `ast` module and a custom `NodeVisitor` subclass to traverse abstract syntax trees, collecting both function definitions and references across multiple modules. A separate, simpler version relies on regular expressions via `re.findall` to match definitions and calls. Both approaches compare the set of defined names against referenced names, excluding patterns like `visit_*` or names starting with `test_`, and print the file and line number of each unused function.

Loading thumbnail…

Gist 39263a478046a48f1860

This example builds a force-directed network diagram using `d3.forceSimulation`, with nodes and links positioned via collision and link forces. The visualization renders a graph of interconnected circles, likely derived from a social or citation dataset, and uses SVG elements with `d3.select` and `d3.zoom` for pan and zoom interaction. The code initializes the simulation with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, and updates node positions on each tick event. The graph appears to be a static snapshot of a larger network, emphasizing clustering and connectivity patterns through the layout algorithm.