Bar Chart of Top 10 Skyscrapers with Dropdown Menu

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
p {
	font-family: 'Chivo', sans-serif;
	font-size:10px;
}

rect {
	fill: #9ecae1;
}
rect:hover {
	fill: #3182bd !important;
}

.tooltip {
  font-family: 'Overpass', sans-serif;
  font-size:10px;
}

.xaxis line{
  opacity: 0.25;
}

.xaxis path{
  opacity: 0.25;
}

.xaxis text{
  fill: black;
}

.yaxis line{
  opacity: 0.25;
}

.yaxis path{
  opacity: 0.25;
}
        
</style>
</head>
<body>
<div id="drop"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chivo:300|Overpass:300" rel="stylesheet">
<script>

var margin = {top: 100, right: 100, bottom: 70, left: 50},
    width = 900 - margin.left - margin.right,
    height = 520 - 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 + ")");

var yScale = d3.scaleLinear()
      .range([height, 0]);

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

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

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

d3.csv("skyscrapers-top10.csv", function(data){

var cities = ["All", "Atlanta", "Boston", "Chicago", "Dallas", "Detroit", "Houston", "Jersey City", "Las Vegas", "Los Angeles", "Miami", "New York City", "Philadelphia", "Pittsburgh", "San Francisco", "Seattle"];

var purposes = ["abandoned", "casino", "government", "hospital", "hotel", "observation", "office", "religious", "residential", "retail", "telecommunications"];

var selection = cities[0];

yScale.domain([0, d3.max(data, function(d){ return d.height; })])

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

svg.append("g")
    	.attr("class", "yaxis")
    	.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", "Chivo")
      .attr("font-weight", "bold")
      .attr("font-size", "11px")
      .text("Height (m)");

svg.append("text")
        .attr("transform", "translate(" + width/2 + "," + -60 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "Chivo")
        .attr("font-size", "25px")
        .text("Ten Tallest Skyscrapers");

svg.append("text")
        .attr("transform", "translate(" + width/2 + "," + (height+40) + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "Chivo")
        .attr("font-size", "11px")
        .attr("font-weight", "bold")
        .text("Rank");

svg.selectAll("rectangle")
      .data(data)
      .enter()
      .append("rect")
      .filter(function(d){ return d.category === selection; })
      .attr("class", "rectangle")
      .attr("x", function(d, i) { return xScale(i+1); })
      .attr("y", function(d) { return yScale(+d.height); })
      .attr("height", function(d) { return height - yScale(+d.height); })
      .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"))
					var yPosition = parseFloat(d3.select(this).attr("y"));

var purposeString = "";
          var first = true;

for (i in purposes){
            if (d[purposes[i]] === "TRUE"){
              if (first){
                purposeString = purposeString + purposes[i];
                first = false;
              }
              else{
                purposeString = purposeString + ", " + purposes[i];
              }
            }
          }

if (d.category === "All"){
          svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-60)
          .style("font-size", "14px")
          .style("font-weight", "bold")
          .style("font-family", "Chivo")
          .style("text-decoration", "underline")
          .text(d.name);

svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-45)
          .attr("fill", d3.rgb("#404040"))
          .text(d.city + ", " + d.state);
        
        svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-32)
          .attr("fill", d3.rgb("#404040"))
          .text("height: " + d3.format(".5n")(d.height) + " m");

svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-19)
          .attr("fill", d3.rgb("#404040"))
          .text("completed: " + d["completed.year"]);

svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-6)
          .attr("fill", d3.rgb("#404040"))
          .text("purposes: " + purposeString);

}
        else{

svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-45)
          .style("font-size", "14px")
          .style("font-weight", "bold")
          .style("font-family", "Chivo")
          .style("text-decoration", "underline")
          .text(d.name);
        
        svg.append("text")
          .attr("class", "tooltip")
          .attr("x", xPosition+3)
          .attr("y", yPosition-32)
          .attr("fill", d3.rgb("#404040"))
          .text("height: " + d3.format(".5n")(d.height) + " m");

}

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

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

svg.selectAll(".rectangle")
            .data(data.filter(function(d){return d.category === selection}))
            .transition()
            .delay(function(d, i) {
               return i * 200;
             })
            .duration(500)
            .attr("height", function(d) { return height - yScale(+d.height); })
            .attr("y", function(d) { return yScale(+d.height); })

});

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

});

</script>
</body>

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