A Jardinains Animation in D3

js

   var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 800)
        .attr("height", 800);    
    
    var barrier = sampleSVG.append("line")
        .attr("x1", 120)
        .attr("y1", 540)
        .attr("x2", 280)
        .attr("y2", 540)
        .attr("stroke-width", 5)
        .attr("stroke", "black");
             
    var ball = sampleSVG.append("circle")
        .style("stroke", "black")
        .style("fill", "orange")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .transition()
        .delay(0)
        .duration(300)
        .attr("cx", 200)
        .attr("cy", 500)
        .style("fill", "aliceblue")
        .transition()
        .delay(0)
        .duration(300)
        .attr("cx", 400)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "orange");})
        .on("mouseout", function(){d3.select(this).style("fill", "aliceblue");});