The Lorenz system is a system of three ordinary differential equations, with the variables x, y, and z evolving in time; for the right set of parameters, the system has a strange attractor, and it looks pretty. A Google image search for 'chaos theory' shows (at the time of writing) six Lorenz attractor trajectories in the first ten images, so it is perhaps a little over-used. But I'm nevertheless very happy with being able to rotate and zoom on one as it's evolving.

Click 'Evolve' underneath the plot to get it going; my Galaxy S3 has no trouble with the computation, which is a fourth-order Runge-Kutta. Axes are switched off by default for aesthetic reasons, but you can click/tap on the controls to switch them on.

Mouse controls: Left-click and drag to rotate; alt (Mac)- or ctrl (Windows)-click-drag or middle-click-drag to pan; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; two-finger scroll to pan; pinch to zoom.

Evolve.

You can see how the plot is constructed in the HTML source:

• There is no use in showing individual point locations, so params.geom_type is set to "none", which makes it a line-only graph.
• Although there is the option to append data to an existing plot with three_d.change_data(), it is extremely inefficient for both geom_type == "point" and for geom_type == "none", because these two used fixed-length arrays internally, and appending requires re-creating these arrays. So instead the data is initialised to a length of 10000 points, all of them set to null.
• (When first writing this I used the append option, and also didn't fix the axes, allowing them to be re-calculated as new points in the trajectory were added. This gave incredibly bad results, with Chrome eating up a gigabyte of RAM very quickly before it all crashed. I therefore advise against changing the axes many times a second, especially when there's a moderately large number of data points.)
• During the calculation, the data is updated with the latest trajectory location by calling three_d.set_point_position() followed by three_d.update_render().
• The calculation is started by calling integrate_system(), which then automatically starts iterating itself via requestAnimationFrame().

Posted 2016-12-22.