Freethrows

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    rect.bar {fill:steelblue;}
    
    #title {font-size: 20px;
    				font-family: sans-serif;
    				font-weight: 200;
    				text-align: center;}
    
    #Axis {font-size: 12px}
   
    
  </style>
</head>

<body>
  <h1 id="title">Histogram of Freethrows Made (out of 10 attempts)</h1>
  <script>
    var margin = {top:20, bottom:20, left:40, right:20};
    
    var height = 450 - margin.top - margin.bottom;
    var width = 600 - margin.left - margin.right;
    var barPadding = 2
    var dataset;
    
    var svg = d3.select("body")
    						.append("svg")
    						.attr("height",height + margin.top + margin.bottom)
    						.attr("width", width + margin.left + margin.right);
    
    
    
    d3.csv("Freethrows.csv", function(error, data){
      data.forEach(function(d){
        d.made = +d.Made,
        d.prob = +d["P(Made)"]
        d.mean = +d.Mean
      });
      
      var xScale = d3.scaleLinear()
      							.domain([d3.min(data,function(d){return d.made;}),d3.max(data,function(d){return d.made;}) + 1])
      							.range([margin.left,width - margin.right]);
      var yScale = d3.scaleLinear()
      							.range([height - margin.bottom,margin.top]);			
      			
      var histogram = d3.histogram()
    								.value(function(d){return d.Made;})
    								.domain(xScale.domain())
      							.thresholds(xScale.ticks(6));
      
      var bins = histogram(data);
      
      yScale.domain([0,d3.max(bins, function(d){return d.length;})]);
      
      var bars = svg.selectAll("rect")
      	.data(bins)
      	.enter()
      	.append("rect")
      	.attr("class", "bar")
      	.attr("x",1)
      	.attr("transform", function(d) {
		  return "translate(" + xScale(d.x0) + "," + yScale(d.length) + ")"; })
      .attr("width", function(d) { return xScale(d.x1) - xScale(d.x0) - barPadding ;})
      .attr("height", function(d) { return height - margin.top - yScale(d.length);});

svg.append("g")
      	.attr("transform", "translate(0," + (height - margin.bottom) + ")")
      	.attr("id", "Axis")
      	.call(d3.axisBottom(xScale));
      
      svg.append("g")
      	.attr("transform", "translate(" + (margin.left - 5) + "," + 0 + ")")
      	.attr("id", "Axis")
      	.call(d3.axisLeft(yScale));
      					
      svg.selectAll("line")
      	.data(data)
      	.enter()
      	.append("line")
      	.style("stroke", "black")
      	.attr("x1", function(d,i){return xScale(7.31);})
      	.attr("x2", function(d){return xScale(7.31);})
      	.attr("y1", height)
      	.attr("y2", 0);
    })
    
    
    
    				
  </script>
</body>

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