JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fractal Generator</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div id="attractor"></div>
</body>
</html>

JavaScript

// lorenz.js
document.addEventListener("DOMContentLoaded", function() {
    const width = 800;
    const height = 600;
    const svg = d3.select("#attractor").append("svg")
        .attr("width", width)
        .attr("height", height);

    // Lorenz attractor parameters
    const sigma = 10;
    const rho = 28;
    const beta = 8 / 3;
    const dt = 0.01;
    const numPoints = 10000;

    // Initial conditions
    let x = 0.01, y = 0, z = 0;

    // Generate the Lorenz attractor points
    const points = [];
    for (let i = 0; i < numPoints; i++) {
        const dx = sigma * (y - x) * dt;
        const dy = (x * (rho - z) - y) * dt;
        const dz = (x * y - beta * z) * dt;
        x += dx;
        y += dy;
        z += dz;
        points.push([x, y, z]);
    }

    // Scale and translate the points to fit the SVG
    const xExtent = d3.extent(points, d => d[0]);
    const yExtent = d3.extent(points, d => d[1]);
    const xScale = d3.scaleLinear().domain(xExtent).range([0, width]);
    const yScale = d3.scaleLinear().domain(yExtent).range([height, 0]);

    // Create line generator
    const line = d3.line()
        .x(d => xScale(d[0]))
        .y(d => yScale(d[1]));

    // Append path to SVG
    svg.append("path")
        .datum(points)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1)
        .attr("d", line);
});