100%

Dynamical Systems: circule trajectories

✓ Published3🌍 Public

Last edited Sep 23, 2025

Created on Sep 23, 2025

This example visualizes circular trajectories for the dynamical system $\dot{x}=xy,\dot{y}=(1-x^2-y^2)/2$. A click on the phase plane draws the unique circular path determined by the chosen initial condition, with a red center marker and a blue dot tracking the motion. The D3.js code renders an SVG canvas with axes, tick labels, and a set of precomputed trajectory circles in light gray, while user interaction dynamically adds a highlighted trajectory. The implementation uses `d3.select`, `d3.scaleLinear`, and SVG element `append` calls to build the plot, updating the circle’s position and radius via `attr` on mouse events.

AI-generated description

Circular trajectories of a simple dynamical system

For the dynamical system $\dot{x}=xy, \dot{y}=(1-x^2-y^2)/2$, the trajectories can be shown to be circles, uniquely determined by the initial condition.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dynamical systems: center manifold

This interactive visualization illustrates the dynamics of the system $\dot{x} = xy, \dot{y} = -y - x^2$, showing how trajectories approach the center manifold (the blue curve) and then evolve slowly along it. A click on the plot adds a new starting point, and the solution is integrated using a Runge-Kutta 4 (RK4) method, with the path drawn as a brown curve. The visualization is built with D3.js, using scaleLinear for coordinate mapping and a line generator for rendering both the manifold and the trajectory.

YYanghong Huang

79% match

Loading thumbnail…

Dynamical Systems: Van der Pol Oscillator

This visualization shows the convergence of solutions of the Van der Pol system towards its limit cycle, with the system defined by $\dot{x} = y + x - x^3/3$ and $\dot{y} = -x$. A red curve traces the limit cycle, while the initial orbit point is marked with a cursor. The example uses D3.js (v7.9.0) to render SVG elements, including path lines for trajectories and circles for points, and includes MathJax for displaying the governing equations. The orbit data is precomputed and embedded directly in the script.

YYanghong Huang

74% match

Loading thumbnail…

D3 Selection Exploration - Modules

This example demonstrates a dynamic scatterplot where a set of circles moves and resizes in a continuous, animated loop, simulating a wave-like pattern. Built with D3.js, the visualization uses the `select` module to target the SVG canvas and the `range` and `join` APIs to bind data to the circles. Each frame, generated by a timer, updates the x, y, and radius attributes of the circles based on a sine function. The data is synthesized on the fly by the `makeData` module, and the rendering is done through SVG elements, creating a smooth, real-time animation.

Aajoua

73% match

Loading thumbnail…

D3 selection

This example demonstrates a dynamic field of circles that continuously undulate across the screen, their positions and radii shifting over time. It displays a swarm of shapes moving in a wave-like pattern, driven by a sine function of time and index. The visualization uses the D3.js library’s `select` and `range` APIs to manage SVG elements, appending a full-screen SVG canvas. Through an animation loop using `setInterval`, it regenerates data at 60 frames per second, employing `selectAll` and `join` to efficiently update the existing circles’ attributes, creating a smooth, organic motion.

Yyankesswang

72% match

Loading thumbnail…

d3 selection

This example demonstrates a dynamic visualization of circles that move vertically in a sine-wave pattern, with the number of circles oscillating over time. Constructed with React and D3.js, the SVG rendering updates at 60 frames per second using an interval timer. The code leverages D3’s `select` to append an SVG canvas and `range` to generate data, while `selectAll` and `.join` bind circle elements to the evolving dataset. The animation adjusts each circle’s x and y coordinates based on a time variable, creating a fluid, rhythmic motion.

SShannon Teoh

72% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates a dynamic animation of fifteen circles moving in a sinusoidal wave pattern across the screen, with each circle’s vertical position updated continuously. The visualization uses the D3.js library (version 6.6.2), specifically leveraging the `select`, `range`, and `join` APIs to manage the SVG elements. The code generates data points calculated from a time variable, then updates the circles’ `cx` and `cy` attributes at a fixed 60-frame-per-second interval using `setInterval`. The rendering is SVG-based, with a live animation that replays the wave motion indefinitely.

YYingkai Song

71% match

Loading thumbnail…

D3 selection exploration

This example demonstrates D3’s data-join and selection patterns by animating a variable number of circles across the screen. It uses `d3.select`, `d3.range`, and the `data()`, `.join()`, and `attr()` methods to bind an array of objects with computed `x` and `y` positions—derived from sine waves—to SVG `<circle>` elements, updating every frame via `setInterval`. The number of circles oscillates between 5 and 15, and the `.join()` method handles enter, update, and exit seamlessly. The visualization runs in a React-free HTML page with a minimal SVG canvas sized to the window.

Aadityapalliyil0@gmail.com

71% match

Loading thumbnail…

D3 Selection

This example demonstrates a dynamic update of 15 circles that move and resize in a sine-wave pattern, animated via a timer. The visualization uses D3 version 6.6.1 with the selection API to bind data to SVG circles and synchronize their positions and radii. Each circle’s x-coordinate is fixed, while its y-coordinate and radius oscillate over time. The animation runs at 60 frames per second using setInterval, with a data transformation that maps array indices to circle attributes. The SVG is rendered as a full-window graphic with an orange fill, and the code relies on d3.select, selectAll, and range.

SSami Friedrich

71% match