Mouseover highlight

document.body.innerHTML = '<div id="viz"></div>';
const svg = d3.select("#viz").append("svg").attr("width", 400).attr("height", 120);
svg.selectAll("rect").data([21, 15, 15, 18]).join("rect")
  .attr("x", (d, i) => 20 + i * 80).attr("y", d => 100 - d * 3).attr("width", 50).attr("height", d => d * 3).attr("fill", "#1d4f7a")
  .on("mouseover", function() { d3.select(this).attr("fill", "#c45c26"); })
  .on("mouseout", function() { d3.select(this).attr("fill", "#1d4f7a"); });
console.log("hover 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},{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('hover');