Rainbow Lorenz

Generation of the Lorenz attractor on the (x,z) plane using the most common lorenz system parameters.

Nadieh says everything is better with an svg filter rainbow gradient, so I obliged.

Visualization of other attractors:

Rossler attractor (svg version, canvas version)
DeQuan Li attractor

<!DOCTYPE html>
<meta charset="utf-8">

<style>

.drawingDot {
  fill-opacity: 0.8;
  stroke-opacity: 0.5;
  fill: #ccc;
  stroke: black;
  r: 3px;
}

.dotTrack {
  fill: none;
  stroke: url("#linear-gradient");
}

</style>

let svg = d3.select("svg")

//Append linear gradient in svg defs
let defs = svg.append("defs");
let linearGradient = defs.append("linearGradient")
    .attr("id", "linear-gradient");

//gradient color scale
let gradientScale = d3.scaleLinear()
    .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]);

//Append multiple color stops evenly spaced
linearGradient.selectAll("stop")
    .data( gradientScale.range() )
    .enter().append("stop")
    .attr("offset", function(d,i) { return i/(gradientScale.range().length-1); })
    .attr("stop-color", function(d) { return d; });

let offsetX = +svg.attr("width")/2
let offsetY = +svg.attr("height")

let lorenzParameters = {
  rho: 28.0,
  sigma: 10.0,
  beta: 8.0/3.0
}

let x = 0,
    y = z = 1,
    t = 0.01,
    iter = 0,
    max_iter = 10000;

let zoomFactor = 9

var data = [];

let lineGenerator = d3.line()
    .x(d => d.x)
    .y(d => d.z)
    .curve(d3.curveCardinal);

let gTrack = svg.append("g")
  .attr("class", "gTrack")
  .attr("transform", `translate(${offsetX}, ${offsetY})`)

//follow the dot!
let dot = gTrack.append("circle")
    .attr("class", "drawingDot");

let dotTrack = gTrack.append("path")
    .attr("class", "dotTrack");

function lorenz(callback) {
  callback(
    x += t * (lorenzParameters.sigma * (y - x)),
    y += t * (x * (lorenzParameters.rho - z) - y),
    z += t * (x * y - lorenzParameters.beta * z)
  );
}

function draw(x, y, z) {
  data.push({x: zoomFactor * x, z: zoomFactor * - z})

dotTrack
    .attr("d", lineGenerator(data))
    .attr("stroke", "black");

dot
    .attr("transform", `translate(${data[data.length-1].x}, ${data[data.length-1].z})`)
}

let timeInterval = d3.interval(function() {
  iter++; //time increment
  if (iter >= max_iter) timeInterval.stop();
  lorenz(draw)

}, 5);

</script>

https://d3js.org/d3.v4.min.js