{
const height = 300;
const width = 600;
const xValue = d => d.population;
const yValue = d => d.country;
const margin = { top: 10, right: 20, bottom: 20, left: 70 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const svg = d3.create("svg").attr("height", height).attr("width", width);
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
const xScale = d3.scaleLinear().domain([0, d3.max(data, xValue)]).range([0, innerWidth]);
const yScale = d3.scaleBand().domain(data.map(yValue)).range([0, innerHeight]).padding(0.1);
g.append("g").call(d3.axisBottom(xScale))
.attr("transform", `translate(0, ${innerHeight})`);
g.append("g").call(d3.axisLeft(yScale));
g.selectAll("rect").data(data).enter().append("rect")
.attr("y", d => yScale(yValue(d)))
.attr("width", d => xScale(xValue(d)))
.attr("height", yScale.bandwidth)
return svg.node();
}