Dynamical systems: center manifold

100%

Dynamical systems: center manifold

✓ Published0🌍 Public

Last edited Sep 23, 2025

Created on Sep 23, 2025

Forked from Dynamical Systems: circule trajectories

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.

AI-generated description

Click and see how the solution approaches the centre manifold (<strong>the blue solid curve</strong>), and then slows down when evolving on it.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dynamical Systems: circule trajectories

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.

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

69% match

Loading thumbnail…

Lorenz System

This example visualizes the Lorenz system, a set of chaotic differential equations, by continuously tracing its trajectory as a glowing, colored line. The display shows the system's characteristic butterfly-shaped attractor, with colors shifting from yellow to purple based on the current z-value. The animation runs on a Canvas element, using a `d3.timer` callback to integrate the equations at each step and draw short line segments. A semi-transparent black `fillRect` is applied every 100 milliseconds to create a fading trail effect, all styled within an HTML page using D3 v3.

Mmbostock

60% match

Loading thumbnail…

Untitled

This interactive visualization displays a network of nodes connected by curved links on a dark background. Using D3’s force simulation, nodes repel each other while links maintain distances, and a zoom-and-pan canvas supports exploration. The example renders paths via `d3.forceSimulation` for physics, `d3.zoom` for viewport control, and Canvas 2D drawing for real-time rendering. Node positions update each tick, with link strokes drawn as quadratic Bézier curves, and the data appears to be synthetic, generated in code. The interface runs entirely in the browser with no external data files.

Mmaximus2581

57% match

Loading thumbnail…

Basic Kinematic Graph and Tables

This example visualizes the position of an object over time with a scatter plot of data points connected by either straight lines or arrowheads, toggled via a dropdown menu. Built with React and D3.js, the SVG graph uses `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks. The line style changes dynamically by redrawing paths, with arrows computed using trigonometry from the mathjs library. The visualization includes position and velocity data tables alongside the graph.

CCasualWanderer20XX

57% match

Loading thumbnail…

Knowledge Map Experiment

Five labeled points drift around an SVG canvas in this minimal force-directed network experiment. The visualization uses d3.forceSimulation with forceManyBody and forceCenter to position the nodes, while a tick handler updates their x and y coordinates. Each circle is drawn as an SVG element with a radius of five pixels, and the simulation runs continuously over a fixed 300-by-300 viewport. The example demonstrates a basic setup for dynamic node placement using D3 v5's force layout.

Ccornshoots

57% match

Loading thumbnail…

Untitled

This example presents a dynamic scatterplot that visualizes a dataset from the v3 source, mapping points that shift between states based on interactive forces. The visualization uses the HTML5 Canvas API’s `getImageData` method to sample pixel colors and enable readback of the rendered scene, while `d3.forceSimulation` drives the physics-based layout and motion of the nodes. A bare-bones `index.html` hosts the code, which draws the points as they relax into clusters and respond to real-time user drag interactions. The graph updates its edges and positions through iterative simulation steps.

JJared McCarver

57% match

Loading thumbnail…

System Dynamics

This example shows an interactive system dynamics editor for creating and editing stock-and-flow diagrams. Users can switch between pointer, node, and link modes to add stocks, clouds, variables, valves, and flows, with editable labels and adjustable link curves. The implementation uses GoJS Diagram, LinkingTool, ClickCreatingTool, and the NodeLabelDraggingTool extension, all rendered on an HTML canvas with animation disabled. The interface highlights mode-specific toolbar buttons and tracks node creation counts to generate unique identifiers.

JJoker-tr

56% match