// Step 1: Set up the basic structure
      const svg = d3.select("svg");
      const width = +svg.attr("width");
      const height = +svg.attr("height");


const defs = svg.append('defs');
    var lg = defs.append("linearGradient")
        .attr("id", "animate-gradient") //unique id for reference
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "0")
        .attr("spreadMethod", "reflect");

    
    var co = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#00ff00", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
    
    lg.selectAll(".stop")
        .data(co)
        .enter()
        .append("stop")
        // .attr("offset", function (d, i) { return i / (co.length - 1); })
        .attr("offset", function (d, i) { return i / (co.length - 1); })
        .attr("stop-color", function (d) { return d; });

    lg.append("animate")
        .attr("attributeName", "x1")
        .attr("values", "0%;200%") //let x1 run to 200% instead of 100%
        .attr("dur", "12s")
        .attr("repeatCount", "indefinite");
    // .attr("begin", '6s');

    lg.append("animate")
        .attr("attributeName", "x2")
        .attr("values", "100%;300%") //let x2 run to 300% instead of 200%
        .attr("dur", "12s")
        .attr("repeatCount", "indefinite");




      const g = svg.append("g").attr("transform", "translate(50,50)");





      // Step 2: Prepare your data
      const data = {
        name: "A",
        children: [
          { name: "B", children: [{ name: "D" }, { name: "E" }] },
          { name: "C", children: [{ name: "F" }] },
        ],
      };

      // Step 3: Create the tree layout
      const treeLayout = d3.tree().size([height - 100, width - 100]);

      // Step 4: Draw the initial tree graph
      const root = d3.hierarchy(data);
      const treeData = treeLayout(root);






      const links = g
        .selectAll(".link")
        .data(treeData.links())
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("stroke", "url(#animate-gradient)")
        .attr("d", d3.linkHorizontal().x((d) => d.y).y((d) => d.x));

      const nodes = g
        .selectAll(".node")
        .data(treeData.descendants())
        .enter()
        .append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .attr("cx", (d) => d.y)
        .attr("cy", (d) => d.x);

      // Step 5: Define animation logic
      function animateDataFlow() {
        // Randomly select a link to demonstrate data flow
        const randomLink = links.nodes()[Math.floor(Math.random() * links.size())];

        // Get the source and target nodes of the link
        const sourceNode = randomLink.__data__.source;
        const targetNode = randomLink.__data__.target;

        // Animate the data flow by creating a new node and transitioning it from the source to target position
        const newData = { name: "Data" }; // New data to represent flowing data
        const newNode = g.append("circle").datum(newData).attr("class", "node").attr("r", 5).attr("cx", sourceNode.y).attr("cy", sourceNode.x);

        newNode
          .transition()
          .duration(1000)
          .attr("cx", targetNode.y)
          .attr("cy", targetNode.x)
          .on("end", () => {
            // Remove the temporary node once the animation is complete
            newNode.remove();
          });
      }