Two series

document.body.innerHTML = '<div id="viz"></div>';
const svg = d3.select("#viz").append("svg").attr("width", 480).attr("height", 200);
const x = d3.scaleLinear().domain([0, 3]).range([40, 440]);
const y = d3.scaleLinear().domain([0, 160]).range([180, 20]);
const line = d3.line().x((d, i) => x(i)).y(d => y(d));
svg.append("path").datum([48, 55, 92, 150]).attr("fill", "none").attr("stroke", "#1d4f7a").attr("d", line);
svg.append("path").datum([22, 18, 40, 80]).attr("fill", "none").attr("stroke", "#c45c26").attr("d", line);
console.log("paths", svg.selectAll("path").size());

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('multi');