Makeover Monday floor area

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="data.js"></script>
	<link rel="stylesheet" type="text/css" href="weepeople.css">
  <style>
    body { margin:50;top:0;right:0;bottom:0;left:; font-family: monospace}
    .person {
      font-size:100px;
      font-weight:400;
      letter-spacing:-43px;
      fill: #2F4F4F;
    }
    .city { 
      shape-rendering: crispEdges; 
      fill: none; 
      stroke: #2F4F4F; 
      stroke-width: 2px
    }
    
    .label {
      fill: #2F4F4F;
      stroke: none;
    }
    
    .label-bkgd {
      fill: #FFF;
      stroke: #FFF;
    }
    
    #chart {
      display: inline;
        
    }
    
    select {
      vertical-align: top;
      border-color: #2F4F4F;
      border-width: 2px;
      font-family: monospace;
      background-color: #DCDCDC;
    }
    
  </style>
</head>

<body>

<h1>How much floor space does $1m US buy you in...</h1>

<div id="chart">
      <select id="select-city"></select>
      <svg></svg>
      <p>Part of the <a href="https://www.makeovermonday.co.uk/">Makeover Monday</a> project</p>
      <p>Data source: <a href="https://www.weforum.org/agenda/2018/04/chart-of-the-day-the-worlds-most-expensive-prime-property">WeForum</a></p>
      <p>Wee People typeface: <a href="https://github.com/propublica/weepeople">Copyright (c) 2018 ProPublica and Alberto Cairo</a></p>
    </div>
  
  <script>
   
   data.sort(function(a, b){
      if(a.city < b.city) return -1;
      if(a.city > b.city) return 1;
      return 0;
  	}) 
   
   let width = 500
   let height = width
   let margin = { "top": 1, "bottom": 10, "left": 10, "right": 10 }
   
   let darkGrey = "#2F4F4F"
   let lightGrey = "#DCDCDC"
   
   let chart = d3.select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    	.append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
   
   let scale = d3.scaleSqrt()
   	.domain([0, d3.max(data, (d) => d.squareMetres)])
   	.range([0, width])
   
   let scaleD = (d) => scale(d.squareMetres)

let cities = chart.selectAll(".city")
   	.data(data)
   	.enter()
   	.append("g")
   	.attr("class", "city")
   	.attr("transform", function(d) {
      return "translate(0," + (height - scale(d.squareMetres)) + ")"
    })
   
   cities.append("rect")
   	.attr("width", scaleD)
   	.attr("height", scaleD)
   
   cities.append("text")
   	.attr("class", "label-bkgd")
   
   cities.append("text")
   	.attr("class", "label")
   	
   cities.selectAll("text")
    .text((d) => d.city + ": " + d.squareMetres + "m2")
   	.attr("y", 12)
   	.attr("x", 3)
   	.style("opacity", function (d) {
     	return d.showByDefault ? 1 : 0
   	})
   
   chart.append("g")
   	.attr("transform", "translate(" + -9 + "," + (height - 6) + ")")
   	.append("text")
   	.text("f A")
   	.attr("class", "weepeople person")
   
   let dropDown = d3.select("#select-city")
   	.on("change", function(d){
      letSelectedCity = dropDown.property("value")
			cities.selectAll("text")
      	.transition()
      	.style("opacity", function(d){
					if (letSelectedCity == "All") {
            return d.showByDefault ? 1 : 0
          }
        	else {
            return d.city == letSelectedCity ? 1 : 0
          }
        })
      
      cities.selectAll("rect")
      	.transition()
      	.style("stroke", function(d){
					if (letSelectedCity == "All") {
            return darkGrey
          }
        	else {
            return d.city == letSelectedCity ? darkGrey : lightGrey
          }
        })
      
      	cities.filter(function(d){
            if (letSelectedCity == "All") {
              return
            }
            else {
              return d.city == letSelectedCity
            }
          })
      		.raise()
      
    })
   
   dropDown.selectAll("option")
   	.data(data)
   	.enter()
   	.append("option")
   	.attr("value", (d) => d.city)
   	.text((d) => d.city)
   
   dropDown.append("option")
   	.text("Show all")
   	.attr("value", "All")
   	.lower()
   
  	dropDown.property("value", "All")

</script>
</body>

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