Skip to main content
Log in
R

Rainboylvx

@Rainboylvx·13 public vizzes

Loading thumbnail…

Gist 4223067a0ab2561280fa7996d7c9ac06

This visualization is a curated list of algorithm articles for competitive programming, specifically focused on graph theory, group theory, and network flow models. The code renders a markdown document as a collection of hyperlinks, showing the titles and URLs of each referenced article. It uses plain HTML and CSS to display the text content, with no interactive or dynamic data-visualization elements. The page serves as a static reference guide, organizing external resources from Luogu, a Chinese competitive programming platform.

Jan 9, 2026
Loading thumbnail…

NJU-计算机解决问题-替换链接-油猴脚本

This userscript replaces links on the NJU problem-solving course page, rewriting any URL beginning with `http://114.212.10.6/` to use `http://cslabcms.nju.edu.cn/` instead. It selects all matching anchor tags via `document.querySelectorAll` and updates their `href` attributes with a string replacement. The script runs under the Tampermonkey/Greasemonkey environment, constrained to pages matching `http://cslabcms.nju.edu.cn/problem_solving/*`, and uses no external libraries—only plain DOM manipulation and regex-free string replacement.

Feb 22, 2025
Loading thumbnail…

graphviz样例

This example showcases two Graphviz diagrams created with the DOT language. The first, "sametail", demonstrates the `sametail` edge attribute to merge multiple edges into a single visual tail at node 'b', using a left-to-right rank direction. The second, "矩形边.gv", uses orthogonal edge routing (`splines=ortho`), styled boxes and a diamond node, and employs the `taillabel` and `constraint` attributes to label and reposition edges. Both diagrams illustrate Graphviz's syntax for controlling edge paths and node appearance through attribute declarations.

Jan 27, 2019
Loading thumbnail…

[动漫之家API] #api

This example documents the unofficial API endpoints of the manga and light novel platform DMZJ, covering categories like news, comics, novels, search, subscriptions, and user reading history. It lists concrete HTTP request URLs, methods, and parameters for each endpoint, distinguishing between the mobile app API (`v3api.dmzj.com`) and the web API (`interface.dmzj.com`). The page is structured with markdown headings and a table of contents, serving as a code reference for developers building client applications or visualizations that fetch data from these services.

Dec 7, 2018
Loading thumbnail…

animate line with arrow

An animated line with an arrowhead traces a polyline through three points, with a red circle marking the arrow’s starting position. The example uses D3 v4’s `d3.select` and `d3.append` to build an SVG, defines a custom marker via `svg:defs` and `marker`, and computes path geometry with the DOM `getTotalLength()` and `getPointAtLength()` methods to position the circle at the line’s origin. The arrow’s orientation is set to “auto” so it follows the path’s direction.

Jun 4, 2018
Loading thumbnail…

transition learn

This minimal D3.js v4 example renders a blank SVG canvas and a single line of instructional text. It uses `d3.select` to target the document body and `svg.append` with the `text` method to display the message. The chart’s static layout is defined by fixed pixel coordinates for width, height, and text position, with monospace font styling. No data is loaded or transformed; the visualization serves as a starting point for interactive edits.

Jun 4, 2018
Loading thumbnail…

transition learn

This minimal D3.js v4 example renders a blank SVG canvas and a single line of instructional text. It uses `d3.select` to target the document body and `svg.append` with the `text` method to display the message. The chart’s static layout is defined by fixed pixel coordinates for width, height, and text position, with monospace font styling. No data is loaded or transformed; the visualization serves as a starting point for interactive edits.

Jun 4, 2018
Loading thumbnail…

simple tree

This visualization shows a small tree diagram with circular nodes connected by vertical paths, displaying hierarchical relationships from a CSV file. The node positions and link paths are computed using d3.stratify and d3.tree APIs, then rendered as SVG paths and circles. Data is loaded from data.csv, which contains id and parent columns, and the layout is controlled by a custom separation function that sets uniform spacing between siblings. The tree is drawn on a 960 by 500 pixel canvas using D3 v4.

May 31, 2018
Loading thumbnail…

how_use_link

This example uses the d3.linkHorizontal generator to draw a single curved path between a source point [100,100] and a target point [300,300] on an SVG canvas. The code constructs a minimal data object with source and target coordinates, passes it to the generator, and assigns the resulting path data to an SVG path element with a thick gray stroke. The d3.v4 library is loaded from a CDN, and the visualization demonstrates the basic link generator syntax without relying on a tree layout or external dataset.

May 31, 2018
Loading thumbnail…

Gist 962cd79b5bff0c8b28a25691831eb7f0

This example displays a grid-patterned background for a web page, rendered using CSS on an HTML body element. It shows a repeating tiled texture created by an external image file called `bk.png`. The code sets the background image and applies initial positioning, sizing, and repetition properties to control how the pattern displays across the viewport. Using standard CSS background properties, it establishes a simple, static visual foundation without any interactive or animated elements, relying solely on the bitmap image for its appearance.

Sep 25, 2017
Loading thumbnail…

Gist 0bb5514393bdd878235e51ed2fdd3724

This example visualizes the relationships between file names and their associated directory paths using a force-directed graph layout. The code employs `d3.forceSimulation` to position nodes and `d3.forceLink` to draw connecting edges, with each node rendered as a colored circle. The graph is built from a parsed file tree structure, likely derived from object keys or an array of paths, and uses `d3.select` for DOM manipulation. Labels are attached to nodes via SVG text elements, while the simulation updates positions on each tick. The rendering relies on an SVG container, with node colors distinguishing file types from directory paths.

Nov 21, 2016
Loading thumbnail…

Gist b9372b238ce1c784f567ce8d49a8e894

This visualization demonstrates a multi-platform installation process for the Free Pascal Compiler (FPC) version 3.0.0, using a bash script that manages CPU-targeted binary archives and directory hierarchies. It checks system architecture and OS-specific prefixes for Haiku, FreeBSD, and SunOS, then extracts compiler, Run-Time Library (RTL), Free Component Library (FCL), and utility packages using tar commands. The script dynamically converts CPU names to short architecture suffixes (e.g., `i386` to `386`) for symlink creation, and prompts the user for installation decisions via interactive shell functions.

Nov 3, 2016
Loading thumbnail…

express4.2源码解析

This example dissects the source code of Express 4.2.0, a Node.js web framework, showing how its API is structured and executed. It maps the request-handling pipeline, including middleware chains and route registration through methods like `app.use` and `app.get`. The visualization outlines the framework’s file structure and the internals of the Router component, including middleware stack data and initialization logic. It references specific code from `application.js`, `router/index.js`, and middleware modules such as `query` and `expressInit`.

May 20, 2014