xxxxxxxxxx<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) { //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(); }); //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