block by sathomas 1202cb7829dc818a2105

Visualizing Differential Equations, I

Full Screen

An experiment in visualizing differential equations based on the traditional phase line. The chart shows the qualitative behavior of a specific differential equation in a single variable. Initially, the equation is ẋ = 1 - x². The chart represents the value of across a range of values (initially from -2 to -2) as vertical lines of fixed length. The color and tilt of the lines vary based on . Positive values of tilt to the right and are colored green. Negative values of tilt to the left and are colored blue. The magnitude of determines the degree of tilt, with larger values shown with greater tilt. Lines corresponding to equilibrium points, where ẋ = 0, are colored red.

The chart exposes a physical interpretation of the equation, with x(t) representing the position of a particle in ℜ. The tilt of the line at any point indicates the direction that the particle will move from that point. The angle of the tilt represents how fast the particle will move.

You can zoom in or out to see details using the buttons as well as the mouse or touchscreen.

Feel free to experiment with different equations and parameters. The function for should be a valid JavaScript expression. There’s no error checking, though, so be careful.

This series of visualizations continues with Part II.

Note: This implementation is something I put together in a few hours to satisfy my own curiosity. I haven’t taken the time to style the controls, etc. If there’s enough interest in the approach, though, I could be persuaded to improve it. Let me know on twitter at @jsdatavis.

index.html

thumbnail.lnk