Bar chart

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"></div>';
const pts = [{x:0,y:48},{x:1,y:55},{x:2,y:92},{x:3,y:150}];
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 => x(d.x)).y(d => y(d.y));
svg.append("path").datum(pts).attr("fill", "none").attr("stroke", "#1d4f7a").attr("d", line);
console.log("path", svg.selectAll("path").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('bar');