Sort bars

document.body.innerHTML = '<div id="viz"></div>';
const data = [{c:"Nairobi",u:21},{c:"Mombasa",u:15},{c:"Kisumu",u:15},{c:"Nakuru",u:18}].sort((a, b) => a.u - b.u);
const svg = d3.select("#viz").append("svg").attr("width", 480).attr("height", 180);
const x = d3.scaleLinear().domain([0, 25]).range([0, 300]);
svg.selectAll("g").data(data).join("g").attr("transform", (d, i) => `translate(80,${20 + i * 30})`)
  .each(function(d) {
    d3.select(this).append("rect").attr("width", x(d.u)).attr("height", 20).attr("fill", "#1d4f7a");
    d3.select(this).append("text").attr("x", -8).attr("y", 14).attr("text-anchor", "end").text(d.c);
  });
console.log("sorted", data.map(d => d.c).join(","));

document.body.innerHTML = '<div id="viz"></div>';
const data = [{c:"Nairobi",u:21},{c:"Mombasa",u:15},{c:"Kisumu",u:15},{c:"Nakuru",u:18},{c:"Eldoret",u:12}];
const svg = d3.select("#viz").append("svg").attr("width", 480).attr("height", 240);
const x = d3.scaleBand().domain(data.map(d => d.c)).range([40, 460]).padding(0.2);
const y = d3.scaleLinear().domain([0, 25]).range([200, 20]);
svg.selectAll("rect").data(data).join("rect")
  .attr("x", d => x(d.c)).attr("y", d => y(d.u)).attr("width", x.bandwidth()).attr("height", d => 200 - y(d.u)).attr("fill", "#1d4f7a");
svg.append("g").attr("transform", "translate(0,200)").call(d3.axisBottom(x));
svg.append("g").attr("transform", "translate(40,0)").call(d3.axisLeft(y));
console.log("bars", svg.selectAll("rect").size());

document.body.innerHTML = '<div id="viz"><p>Nairobi</p></div>';
d3.select("#viz p").style("color", "#1d4f7a");
d3.select("#viz").append("p").text("Mombasa");
console.log("p", d3.selectAll("p").size());

console.log('sort');