bar chart

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>

rect {
	fill: steelblue;
}
rect:hover {
	fill: orange;
}
</style>
</head>
<body>
<div id="drop"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("placement_edit.csv", function(error, data){

var schools = ["Alvarado","Bryant","Chavez","Fairmount","Flynn","Hillcrest","Marshall","Monroe","Moscone","Revere","Sanchez",
	"Spring Valley","Junipero Serra","Webster"];

var selection = schools[0];

var yScale = d3.scaleLinear()
			.domain([0, d3.max(data, function(d){
				if (d.Choice != "Total")
				return +d.Amount;
			else return 0;
			})])
			.range([height, 0]);

var xScale = d3.scaleBand()
			 .domain([1, 2, 3, 4, 5, 6, 7, 8])
              .range([0, width])
              .paddingInner(0.05)
              .paddingOuter(0.25);

var xAxis = d3.axisBottom()
		.scale(xScale);

var yAxis = d3.axisLeft()
		.scale(yScale);

svg.append("g")
    	.attr("class", "x axis")
    	.attr("transform", "translate(0," + height + ")")
    	.call(xAxis)
    	.selectAll("text")
    	.style("font-size", "11px");

svg.append("g")
    	.attr("class", "y axis")
    	.call(yAxis);

svg.append("text")
	.attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .text("Number of Placement Requests");

svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + 40) + ")")
      .style("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .text("Choice #");

svg.append("text")
        .attr("transform", "translate(" + width/2 + "," + -20 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .text("Number of Placement Requests by School");

svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .filter(function(d) { return d.School === selection && d.Choice != "Total" })
      .attr("x", function(d) { return xScale(+d.Choice); })
      .attr("y", function(d) { return yScale(+d.Amount); })
      .attr("height", function(d) { return height - yScale(+d.Amount); })
      .attr("width", xScale.bandwidth())
      .on("mouseover", function(d) {

//Get this bar's x/y values, then augment for the tooltip
					var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
					var yPosition = parseFloat(d3.select(this).attr("y"));

//Create the tooltip label
					svg.append("text")
					   .attr("id", "tooltip")
					   .attr("x", xPosition)
					   .attr("y", yPosition-10)
					   .attr("text-anchor", "middle")
					   .attr("font-family", "sans-serif")
					   .attr("font-size", "11px")
					   .attr("font-weight", "bold")
					   .attr("fill", "black")
					   .text(d.Amount);

})
			   .on("mouseout", function() {
			   
					//Remove the tooltip
					d3.select("#tooltip").remove();
					
			   });

var selector = d3.select("#drop")
    	.append("select")
    	.attr("id","dropdown")
    	.on("change", function(d){
        	selection = document.getElementById("dropdown");
        	newSelection = selection.options[selection.selectedIndex].value;

yAxis.scale(yScale);

svg.selectAll("rect").remove();

svg.selectAll("rect")
        		.data(data)
        		.enter()
        		.append("rect")
      			.filter(function(d) { return d.School === newSelection && d.Choice != "Total" })
	            .attr("x", function(d) { return xScale(+d.Choice); })
      			.attr("y", function(d) { return yScale(+d.Amount); })
			    .attr("height", function(d) { return height - yScale(+d.Amount); })
			    .attr("width", xScale.bandwidth())
			    .on("mouseover", function(d) {

//Create the tooltip label
					svg.append("text")
					   .attr("id", "tooltip")
					   .attr("x", xPosition)
					   .attr("y", yPosition - 10)
					   .attr("text-anchor", "middle")
					   .attr("font-family", "sans-serif")
					   .attr("font-size", "11px")
					   .attr("font-weight", "bold")
					   .attr("fill", "black")
					   .text(d.Amount);

})
			   .on("mouseout", function() {
			   
					//Remove the tooltip
					d3.select("#tooltip").remove();
					
			   });
					
			//Update Y axis
			svg.select(".y.axis")
				.transition()
				.duration(500)
				.call(yAxis);

});

selector.selectAll("option")
      .data(schools)
      .enter().append("option")
      .attr("value", function(d){
        return d;
      })
      .text(function(d){
        return d;
      })

});

</script>
</body>

Modified http://d3js.org/d3.v4.min.js to a secure url

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