M

MTR

@darkcheftar·25 public vizzes

Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

Loading thumbnail…

trace path

A looping sine curve is traced continuously by two animated segments: a solid orange stroke and a trailing grey echo. The SVG paths use the `stroke-dasharray` and `stroke-dashoffset` attributes, with `<animate>` elements driving the dash offset from 0 to 500 over five seconds. The path length is measured via `SVGPathElement.getTotalLength()` in a React hook, while the static grey reference path shows the full curve. The example uses React 18 and inline SVG, with the curve defined by cubic Bézier coordinates in the path data.

Loading thumbnail…

Fork of React Starter

This example demonstrates scroll-driven scaling: a sticky sky-blue box grows from 50% to 100% scale as the page scrolls through a 200vh wrapper. The App component tracks scroll progress via a `window.scrollY` event listener, computes a percentage from the scroll position relative to the wrapper’s total height, and applies the result as an inline `transform: scale()` style. It uses React’s `useState`, `useEffect`, `useRef`, and `useCallback` hooks, with rendering handled by `createRoot`.

Loading thumbnail…

Tasty donut

A rotating, five-layer donut chart spins continuously in the center of the screen. Each ring segment displays a number and uses a rainbow sequential color scale based on the overall donut's layer count. Built with D3 v6, the visualization creates arcs via `d3.arc` and `d3.pie`, while a CSS animation and a JavaScript interval with `setInterval` rotate the entire SVG group and counter-rotate the text labels.

Loading thumbnail…

donut

This donut chart uses D3 version 6 to render a single, five-segment ring where each segment is a wedge of equal value. The visualization employs `d3.arc` with dynamically calculated inner and outer radii based on the segment index, and `d3.pie` to compute the arc geometry. Each wedge is filled with a color from `d3.scaleSequential` using the `d3.interpolateRainbow` palette, and labeled with its data index. The entire SVG group is positioned using a CSS transform, though the code’s intended rotation animation is present but not functional, as the rotation angle is fixed to zero.

Loading thumbnail…

Bubble Sort rAF

This visualization demonstrates the Bubble Sort algorithm animating a shuffled array of 50 bars, rendered as SVG rectangles inside a single group. The bars are color-coded blue and repositioned via `d3.scaleBand` and `d3.scaleLinear` as the algorithm steps through each comparison and swap. It uses D3 v6 with a React framework, advancing through precomputed array snapshots using `requestAnimationFrame`. Keyboard arrow keys allow stepping forward or backward through the recorded states, while clicking a circle reinitializes the data with a fresh shuffle.

Loading thumbnail…

Bubble Sort

This example visualizes the Bubble Sort algorithm as an animated SVG bar chart. A shuffled array of 100 numbers is sorted step-by-step, with each comparison and swap rendered as a smooth transition of bar positions. The visualization uses D3 v6 to manage data binding, scales, and transitions, with bars drawn as SVG `rect` elements. Sorting steps are precomputed and replayed via `setTimeout`, triggering `render()` calls that animate x-coordinates using D3’s `transition` method.

Loading thumbnail…

State

This interactive visualization illustrates the Collatz conjecture, a sequence where even numbers are halved and odd numbers are tripled and incremented, continuing until reaching 1. A user enters a starting number and presses a button, which triggers a step-by-step animated traversal through six circular state nodes displayed on a grid. Each node highlights and the current value is shown in a text output as the sequence progresses. The visualization uses plain HTML, CSS Grid for the state layout, and the Web Audio API to optionally generate a triangle-wave tone on each step, with the frequency varying based on whether the current number is even or odd. JavaScript timers (setTimeout) control the sequential highlighting of the nodes.

Loading thumbnail…

JavaScript SVG Animation

A rotating square animates over a static Cartesian coordinate system, with two small circles tracking its corners along a circular path. Built with vanilla JavaScript and SVG, the animation uses `requestAnimationFrame` to update the square's `transform` attribute and calculate circle positions via trigonometric functions. The code directly manipulates SVG elements like `<rect>` and `<circle>` without any external libraries, rendering entirely in the browser.

Loading thumbnail…

circles

Three concentric circles rotate continuously around a shared center, with red and green fills determined by radius and blue radial lines indicating rotation. The visualization uses D3 version 6 to append SVG `circle` and `line` elements inside `g` groups, updating their `transform` style via a JavaScript `setInterval` timer. A CSS `@keyframes` animation on hover triggers an additional 360-degree rotation. The code demonstrates D3’s declarative selection and merging API with `d3.select`, `enter`, and `merge` on an SVG canvas sized to viewport dimensions.

Loading thumbnail…

circle

A single red circle rendered in SVG, centered within a full-viewport canvas, with a green radial line extending from its center to the right edge. The visualization demonstrates basic D3.js v6 setup and styling, using inline SVG elements and a CSS hover animation that rotates the entire group containing both shapes. The code defines a `g` element with an id, positions it via a CSS transform, and applies a keyframe animation on hover that spins the group 360 degrees over five seconds. No data is loaded; the example focuses purely on static geometric primitives and interactive CSS-driven motion within an SVG coordinate system.

Loading thumbnail…

variation Pascal's Triangle

This visualization presents a variation of Pascal's Triangle, where each row is a sequence of circles colored green or red based on whether the value is divisible by the row index. The triangle is built procedurally, generating 22 rows using a custom `nextRow` function that computes each row's sum-based values. Rendered as SVG via D3 v6, the code uses `d3.select` and `d3.append` to create a single SVG, with each row as a `<g>` element translated vertically and each circle horizontally. The fill color is determined by `j%i`, showing the modulo pattern across the structure.

Loading thumbnail…

Pascal's Triangle

This visualization displays Pascal’s Triangle as a series of 22 rows of numerically generated values, arranged as an SVG in a stepped diagonal layout. Each row is computed from the previous one using a custom `nextRow` function that sums adjacent elements with a coefficient of 2, producing the triangle’s entries. The code uses D3 v6 data joins to append SVG groups and text elements, positioning rows vertically via `translate` transforms and columns horizontally with a fixed offset. Circles styled with red strokes are defined in CSS but not rendered in the visible output.

Loading thumbnail…

zeta function for positive integers

This example plots the Riemann zeta function for positive integer inputs from 1 to 10.99, using a line chart to connect individual data points fetched as JSON from a remote gist. The visualization uses D3 v6 scales (`d3.scaleLinear`) to map the x-axis domain to the full window width and the y-axis to the height, with circles marking each point and an SVG path rendered via `d3.line`. The data is loaded asynchronously using the Fetch API, and the SVG is created and updated with standard D3 selection and join methods.

Loading thumbnail…

The Maximum number in prime factorization

This example visualizes the largest prime factor of each integer from 2 to 104, plotting circles at coordinates where the x-axis represents the integer and the y-axis is 500 minus ten times that factor. An SVG line chart connects these points, revealing the scattered pattern of maximum prime factors. The code uses D3 v6 to bind the data array to circles via `selectAll` and `data`, positions them with `attr`, and draws the connecting path using `d3.line()`. Each circle responds to `mouseover` by logging its coordinates to the console.

Loading thumbnail…

Tree

This example shows a static tree diagram whose nodes and links animate into place when the page loads. Nodes are drawn as red-stroked white circles, with text labels for each person, and links are drawn as straight black lines. The visualization uses D3 v6’s `d3.stratify` to arrange hierarchical data, `d3.tree` to compute the layout, and SVG `path` and `circle` elements. Node and link rendering is animated with D3’s `.transition().duration()`, which interpolates the initial coordinates to final positions.

Loading thumbnail…

array to tree

This example converts a randomly shuffled array of integers into a hierarchical tree structure. The visualization shows the resulting dendrogram with red-bordered circles representing nodes and black lines for parent-child links. Using d3.stratify and d3.tree, the array elements are organized into a tree layout with SVG rendering. Text labels display each node’s value, and transitions animate their appearance based on depth. The code updates smoothly when re-rendered with new random data.

Loading thumbnail…

Improving array to tree

A shuffled array of ten numbers becomes a binary tree, with each node displaying its value. D3's `d3.stratify` converts the flat array into hierarchical data, and `d3.tree` computes the layout. The SVG renders nodes as red-bordered circles connected by black paths. A transition animates the text labels, with a duration that increases based on node depth. The example shows repeated re-shuffling and re-rendering of the tree with each of the ten random permutations.

Loading thumbnail…

d3 Animation

This example demonstrates a single-circle animation using D3 transitions. The visualization shows a red-outlined circle that starts at the left side of an SVG canvas and moves downward while changing its fill color to green over one second. The code appends an SVG element sized to the browser window, creates a circle with initial x-coordinate 200, then chains a transition with a 1000-millisecond duration to animate the y-coordinate, radius, and fill style. It uses D3 v6's `selection.transition()` and `transition.attr()` methods within a minimal HTML page.

Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3 data-joining workflow that renders a collection of eleven image URLs as `<img>` elements on a page. It shows how to bind an array of string data to newly created DOM nodes using D3’s selection and `enter()` mechanism. The code uses `d3.select`, `.data()`, `.enter()`, and `.append()` to create each image, setting the `src` attribute with `.attr()`. The rendered result displays a row of images, with the page’s large font size acting as a visual backdrop. The example relies on D3 v6 and is minimal, focusing on the core enter-update-exit pattern.

Loading thumbnail…

Interactive Mouse Move

An interactive React application displays a black circle that follows the mouse cursor across an SVG canvas. The visualization uses React's `useState` hook to track mouse coordinates, updating the circle's center position through the `onMouseMove` event handler. The component renders a single SVG circle element whose `cx` and `cy` attributes are bound to the current mouse position state, creating a direct real-time response to cursor movement.

Loading thumbnail…

CSV parse

This example displays the size and shape of a CSV dataset loaded from a remote GitHub gist. A large, centered text block reports the formatted file size in kilobytes, the total number of rows, and the number of columns. It uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` to measure its serialized length. The results are inserted into the page via `innerHTML`, with a commented alternative using `fetch` and `d3.csvParse` also present.

Loading thumbnail…

Smiley with React and D3 arc

A stylized smiley face is drawn with SVG circles and a D3 arc path. The face is composed of separate React components for the background circle, eyes, and mouth, with a `FaceContainer` managing the SVG dimensions and central translation. The mouth uses `d3.arc()` with inner and outer radii and fixed angles to create a smile. The component receives numeric props for positions and sizes, rendering a static, centered face.

Loading thumbnail…

Fifty Smileys Just for you

Fifty Smileys Just for You generates a grid of fifty distinct cartoon faces, each rendered as an SVG circle with black eyes and a curved mouth. The faces vary randomly in stroke thickness, eye size and position, and mouth width and radius, creating playful visual diversity. Built with React and d3.v6, the app leverages D3’s `arc` API for mouth paths and the `range` helper for iteration. Each face is composed from reusable components, with positioning handled via SVG transformations.