Kiosk CSV string

const rows = d3.csvParse("city,units\nNairobi,21\nMombasa,15\nKisumu,15\nNakuru,18\nEldoret,12");
document.body.innerHTML = '<div id="viz"></div>';
const svg = d3.select("#viz").append("svg").attr("width", 480).attr("height", 160);
svg.selectAll("rect").data(rows).join("rect")
  .attr("x", (d, i) => 20 + i * 80).attr("y", d => 140 - (+d.units) * 5).attr("width", 50).attr("height", d => (+d.units) * 5).attr("fill", "#1d4f7a");
console.log("from csv", rows.length);

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