Below 25th Adjustment

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    background:#f5f5f5;
    }
    svg{display:block;
    background:#f5f5f5;
    }
    text{
      font-family:Franklin Gothic Book;
      
    }
  </style>
</head>

<body>
  <script>
    
    var index = .6;
    var cutoff = .8;
    var adjusted = .7
    
    var height = 60;
    var width = 350;
    var pad = 15;
     
    var xScale = d3.scaleLinear().range([pad,width-pad])
    	.domain([.58,.85])
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height) 		
    svg.append("g")
    	.attr("transform","translate(0,30)")
    	.append("line")
    	.attr("x1",xScale.range()[0])
    	.attr("x2",xScale.range()[1])
    	.attr("y1",0)
    	.attr("y2",0)
    	.style("stroke","black")
    
    
    svg.append("polyline")
    	.attr("id","bracket")
    	.attr("points",function(){
      		return [xScale(index),(height-pad)/2,xScale(index),height-pad-5,xScale(adjusted),height-pad-5,xScale(adjusted),(height-pad)/2]
      	
    		})  
    	.style("stroke-width","1px") 
     	.style("stroke","black")
    	.style("stroke-dasharray","4")
    	.style("fill","none")

svg.append("line")
    	.attr("x1",xScale(cutoff))
    	.attr("x2",xScale(cutoff))
    	.attr("y1",pad)
    	.attr("y2",height)
    	.style("stroke","#009673")
    	.style("stroke-width","3px")
      
		svg.append("text")
    	.attr("x",xScale(cutoff))  
    	.attr("y",10)
    	.attr("font-size","13px")
    	.style("text-anchor","middle")
    	.style("fill","black")
    	.text('25th Percentile')
      
    svg.append("text")
    	.attr("x",xScale((adjusted-index)/2 + index))  
    	.attr("y",height)
    	.attr("font-size","13px")
    	.style("text-anchor","middle")
    	.style("fill","black")
    	.text('50% difference to threshold')
    
		svg.append("circle")
    	.attr("cx",xScale(index)) 
    	.attr("cy",(height)/2)
    	.style("r",7)
    	.style("stroke-width","1px")
    	.style("fill","#c1c1c1")
     	.style("stroke","black")
    
		svg.append("circle")
    	.attr("id","animCircle")
    	.attr("cx",xScale(adjusted)) 
    	.attr("cy",(height)/2)
    	.style("r",7)
    	.style("stroke-width","1px")
    	.style("fill","#009673")
     	.style("stroke","black")
    
    
    var index2 = .65;
    var adjusted2 = (.8-.65)/2  + .65
    
    var svg2 = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height) 
    
    svg2.append("g")
    	.attr("transform","translate(0,30)")
    	.append("line")
    	.attr("x1",xScale.range()[0])
    	.attr("x2",xScale.range()[1])
    	.attr("y1",0)
    	.attr("y2",0)
    	.style("stroke","black")
    
    
    svg2.append("polyline")
    	.attr("id","bracket")
    	.attr("points",function(){
      		return [xScale(index2),(height-pad)/2,xScale(index2),height-pad-5,xScale(adjusted2),height-pad-5,xScale(adjusted2),(height-pad)/2]
      	
    		})  
    	.style("stroke-width","1px") 
     	.style("stroke","black")
    	.style("stroke-dasharray","4")
    	.style("fill","none")

svg2.append("line")
    	.attr("x1",xScale(cutoff))
    	.attr("x2",xScale(cutoff))
    	.attr("y1",0)
    	.attr("y2",height)
    	.style("stroke","#009673")
    	.style("stroke-width","3px")
       
    svg2.append("text")
    	.attr("x",xScale((adjusted2-index2)/2 + index2))  
    	.attr("y",height)
    	.attr("font-size","13px")
    	.style("text-anchor","middle")
    	.style("fill","black")
    	.text('50% difference to threshold')
    
		svg2.append("circle")
    	.attr("cx",xScale(index2)) 
    	.attr("cy",(height)/2)
    	.style("r",7)
    	.style("stroke-width","1px")
    	.style("fill","#c1c1c1")
     	.style("stroke","black")
    
		svg2.append("circle")
    	.attr("id","animCircle2")
    	.attr("cx",xScale(adjusted2)) 
    	.attr("cy",(height)/2)
    	.style("r",7)
    	.style("stroke-width","1px")
    	.style("fill","#009673")
     	.style("stroke","black")
    
    
    
    
    var duration = 1500;
    var delay = 400;
    
    loop()

function loop(){
  setTimeout(function(){
      d3.select("#animCircle")
    	.attr("cx",xScale(index)) 
    	.attr("cy",(height)/2)
    	.style("r",7)
    	.style("stroke-width","1px") 
     	.style("stroke","black")
      .transition()
      .duration(duration)
      .delay(delay)
      .ease(d3.easeCubic) 
    	.attr("cx",xScale(adjusted))  
      
     d3.select("#animCircle2")
    	.attr("cx",xScale(index2)) 
    	.attr("cy",(height)/2)
    	.style("r",7)
    	.style("stroke-width","1px") 
     	.style("stroke","black")
      .transition()
      .duration(duration)
      .delay(delay)
      .ease(d3.easeCubic) 
    	.attr("cx",xScale(adjusted2))  
      	
      
      
       loop()
    },duration + delay)

} 
    
    
  </script>
</body>

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