Tell us what works and what could be better. We read every submission.
@antonyross·18 public vizzes
This visualization demonstrates how to interpolate a point along an SVG path using the native `getTotalLength` and `getPointAtLength` methods. Two rectangular Catmull–Rom splines are rendered, with circles animated along each path using custom Vector and Runner classes that apply acceleration, velocity, and edge-bouncing behavior. The animation shows two points moving along the paths, with their motion influenced by simple physics (forces and mass) while remaining constrained to the path geometry. The example is built with D3 v3 and renders using SVG, with the circles styled with white strokes to stand out against the black paths.
This example uses SVG’s `getTotalLength` and `getPointAtLength` methods to animate a point along a Catmull–Rom spline. Two rectangular paths are drawn as black outlines, and a small white-stroked circle follows the second path, moving from corner to corner. The animation is driven by a custom Runner class that applies acceleration and velocity to the point, while the path’s geometry is sampled at successive lengths to position the circle. A small text label and the dark outlines keep the composition minimal. The technique demonstrates dynamic interpolation along a path, in contrast to static stroke-dash interpolation, and is implemented with D3 v3 and SVG animation.
Two parallel Catmull-Rom splines are drawn from four fixed points each, with a red and blue circle interpolating along their respective paths using SVG's `getTotalLength` and `getPointAtLength` methods. A custom Vector class calculates steering forces that move the circles along the curves, while the text label "hey" sits statically in the upper right, and the circles bounce off the edges if they drift outside the canvas. The animation shows smooth, continuous motion of the points along the paths in an SVG rendered with D3 v3.
Two nested rectangular paths drawn as Catmull–Rom splines are animated with circular markers that travel along them using the SVG `getTotalLength` and `getPointAtLength` methods. The example defines a custom `Runner` class with vector-based steering behaviors (seek, arrive, and edge wrapping) to move the circles around the closed paths, while D3's line interpolation renders the paths. An on-screen text label and the animated circles demonstrate the interpolation of positions along the splines in real time.
Two closed Catmull–Rom splines are drawn as black paths on an SVG canvas, with four user-defined control points each. Clicking anywhere on the canvas adds a new runner—a blue circle—that continuously follows the nearest path using the SVG `getTotalLength` and `getPointAtLength` methods to interpolate its position along the curve. The runners’ motion is driven by a simple steering behavior simulation (velocity, acceleration, and force vectors), and each new runner is added to the dataset and rendered as a circle on click. The animation illustrates how points can be smoothly animated along arbitrary SVG paths, with the paths and circles updated dynamically in response to user interaction.
A single point traverses a pair of Catmull–Rom splines, using the SVG `getTotalLength` and `getPointAtLength` methods to compute the point’s position along the path at each frame. The example also includes interactive behavior: clicking on the canvas creates new circles that move along the path with simple vector-based steering toward the mouse position. The visualization demonstrates how path interpolation can be combined with animated movement in D3.
Two closed Catmull–Rom splines are drawn as black outlines. Clicking anywhere on the SVG adds a colored circle that then animates along one of the two paths, using the SVG path methods `getTotalLength` and `getPointAtLength` to interpolate its position. A running counter in the top right displays the animation progress as a percentage, and each new click adds another circle with a randomly assigned color, creating multiple points moving simultaneously along the paths.
Two closed Catmull–Rom spline paths appear as black outlines on a white SVG canvas. Clicking anywhere on the canvas spawns a colored circle that animates along the path, moving at a constant speed. This is achieved by leveraging the SVG path methods `getTotalLength()` and `getPointAtLength()` to compute the circle’s position at each animation frame. The motion loops continuously, with each circle retaining its own velocity, acceleration, and top-speed properties, producing an organic, independent movement around the spline.
An animated visualization demonstrates how points travel along closed Catmull-Rom spline paths. Multiple circles, created by clicking, move continuously along the paths using SVG’s `getTotalLength` and `getPointAtLength` methods to calculate positions along the path. The code uses d3.v3 with `transition.attrTween` for smooth animation, and vector-based physics to update each circle's velocity and acceleration. The example includes two sample paths and shows how custom Runner objects can be spawned interactively by clicking on the SVG canvas.
Two square Catmull–Rom spline paths are drawn in black, and clicking the SVG spawns colored circles that animate along the paths. Each circle moves along one path for the first 30% of its journey, then switches to the other path for the remainder, while a text label displays the animation progress. The example uses D3 v3 with SVG transitions and `transition.attrTween` to interpolate positions via the native `getTotalLength` and `getPointAtLength` methods on path elements.
Two nested, closed Catmull–Rom splines define the paths in this SVG animation. Clicking anywhere adds a colored circle that first collapses to the inner path’s start, then follows the outer path via a tween that switches between the two paths partway through the animation. The code uses D3 v3’s `transition.attrTween` with the native SVG `getTotalLength` and `getPointAtLength` methods to interpolate each circle’s position, while a text element displays the tween progress as a percentage.
A click on the SVG canvas spawns a blue circle that continuously animates along a closed Catmull–Rom spline, while a second static path outlines a similar shape. The moving circle’s position is interpolated using the SVG path methods `getTotalLength` and `getPointAtLength`, driven by D3’s `transition.attrTween` over a 10-second loop. Two cardinal-closed paths are drawn with `d3.svg.line`, and the code also supports adding runners with random colors.
Two closed Catmull–Rom splines form two nested loops, and clicking anywhere on the SVG adds a circle that animates along the outer path. The example demonstrates SVG’s `getTotalLength` and `getPointAtLength` methods to compute positions along the path, driving each circle’s transform via a `transition.attrTween` that loops indefinitely. The code uses D3 v3, with `d3.svg.line` and a cardinal-closed interpolation to define the splines, and renders the animation as SVG circles and paths.
Two closed Catmull–Rom splines are drawn with D3’s SVG line generator, and clicking anywhere on the page appends a red circle that begins a looping 10-second transition along one of the paths. The animation relies on the native SVG path methods `getTotalLength` and `getPointAtLength`, which the `transition.attrTween` uses to compute the circle’s position at each time step. The example demonstrates point-along-path interpolation with d3.v3, rendering both the static paths and animated circles in SVG.
This example demonstrates a recursive depth-first search through a tree of Node objects, where each node holds a value and a list of children. The search traverses the tree from the root downward, checking each node’s value and recursively exploring children until a match is found, returning the target node or None. The code builds a sample tree with letters (a through h) and prints the result of searching for 'g', using plain Python classes and methods like `get_value()` and `get_children()`. No external visualization libraries are used; the output is text-based, showing the found node.
This example visualizes a depth-first search of a tree, showing the search path as nodes are visited and discarded. It uses a custom Node class in Python to build the tree structure, with each node holding a value and a list of children. The dfs function traverses the tree using a stack, popping nodes to check their values and printing each visited node to display the search order. The code defines two sample trees and searches for a specific target value, demonstrating how the algorithm explores branches before backtracking.
This example demonstrates a Python-based artificial neural network that learns patterns from input data to predict or classify future unseen data. The code implements a multi-layer perceptron with configurable hidden layers, using logistic, linear, or softmax output types, and includes early stopping to prevent overfitting during training. It relies on NumPy for matrix operations and Pandas for data handling, with the network trained via backpropagation and momentum. The visualization shows how the network iteratively reduces error, as printed during training, while the confusion matrix method provides classification performance metrics.
This example segments a runner in the foreground of a video clip by constructing a background mosaic from multiple frames, then uses the extracted foreground images for gait recognition. It detects SURF keypoints and descriptors with OpenCV’s `FeatureDetector_create` and `DescriptorExtractor_create`, matches features via `flann_Index.knnSearch`, and computes homographies with `cv2.warpPerspective` to align frames into a panorama. The code relies on Python 2.7, OpenCV, and NumPy, with helper functions for correspondence drawing and display.