xxxxxxxxxx<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"); 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); } }) .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