Dynamic BarChart

<!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; }
    
    #main{
      margin:50px;
    }
    
    #controls div{
      	display:inline-block;
      	margin:10px;
    }
    
  </style>
</head>
<div id="main">
  	<div id="controls">
  	</div>
</div>
<body>
  <script>
    
    var width = 500;
    var height = 400;
    var margin = {"top":10,"left":120,"right":10,"bottom":20}
    
    var svg = d3.select("#main")
    	.append("svg")
    	.attr("width",width)
    	.attr("height",height)
    	.style("outline","1px solid black")
    
    var scaleOrdinal = d3.scaleOrdinal()
    	.range(["#003f5c","#7a5195","#ef5675","#ffa600"])
    	.domain(["WR","RB","QB","TE"])	
    
    
    d3.csv("rawData.csv",function(d){
      
      d.forEach(function(z){
	      z.Value = +z.Value;
      })
      
    	console.log(d)  
      
      /*
      var statNest = d3.nest().key(function(d){return d.Stat})
      	.entries(d)
      
      console.log(statNest)
      */
      
      var Positions = d3.nest().key(function(d){return d.Position})
      	.entries(d)
      
      createSortControls(Positions)
      
      //prep summary data
      render(prepData(d))
      
    })
    
    function createSortControls(Positions){
      
      	var buttons = d3.select("#controls")
        	.selectAll(".positionButtons")
        	.data(Positions)
      	
        buttons.enter()
        	.append("div")	
        	.text('foo')
        	.style("color","black")
        
    }
    
    
    function render(prepped){
      	
        //calculate an overall scale based on all categories
        var xScale = d3.scaleLinear()
        	.range([margin.left,width-margin.right - margin.left])
        	.domain([0,d3.max(prepped,function(d){return d.totalPoints})])
        
        //calculate y bands for each bar's height
        var yBand = d3.scaleBand()
        	.range([height-margin.bottom,margin.top])
        	.domain(prepped.map(function(d){return d.key}))
        
        var rect_g = svg.selectAll(".rect_g")
        	.data(prepped)
        
        rect_g.enter()
        	.append("g")
        	.attr("class","rect_g")
        	.attr("transform",function(d){return "translate(0," + yBand(d.key) + ")"})
        	
       	var bars = d3.selectAll(".rect_g")
        	.selectAll("rect")
        	.data(function(d){
            	//sort 
            	var sorted = d.values.sort(function(a,b){return d3.descending(a.Value,b.Value)})
              
              var cumulative = 0;
            
              //calculate cumulative position 
              sorted.forEach(function(d){ 
                d.cumulative = cumulative;
                cumulative = cumulative + d.Value
              })
               console.log(sorted) 
            	return sorted
          }) 
        
        bars.enter()
        	.append("rect")
        	.attr("transform",function(d){return "translate(" + xScale(d.cumulative) + ",0)"})
        	.attr("height",yBand.bandwidth())
        	.style("fill",function(d){return scaleOrdinal(d.Position)})
        	.style("stroke","white")
        	.attr("width",function(d){return xScale(d.Value+d.cumulative)-xScale(d.cumulative)})
        	
        var labels = d3.selectAll(".rect_g")
        	.selectAll("text")
        	.data(function(d){return [d]})
        
        labels.enter()
        	.append("text")
        	.attr("transform",function(d){return "translate(" + xScale(0) + ",0)"})
        	.attr("y",yBand.bandwidth()/2)
	        .text(function(d){return d.key})
        	.style("dominant-baseline","central")
        	.style("text-anchor","end")
        	.attr("dx",-5) 
        	.style("fill","black") 
        	.style("font-family","Helvetica")
        	.style("font-size","11px")
        	
        
    }
    
    function prepData(raw){
      
      //filter out stat categories. 
      var flt = raw.filter(function(d){return d.Stat == "DkPts"})
      
      /* 
      
      TO DO - convert stat categories to fantasy points dynamically 
      based on user input. 
       
      */       
      
      var nest = d3.nest().key(function(d){return d.Defense})
      	.entries(flt)
      
      //add up the points for each defense
      nest.forEach(function(team){
        	team.totalPoints = d3.sum(team.values,function(d){return d.Value})
      })
      
      nest.sort(function(a,b){return d3.ascending(a.totalPoints,b.totalPoints)})
      
      console.log(nest) 
      return nest;
    }

</script>
</body>

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