JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<div id="chart">

</div>

JavaScript

var data = [{
  name: "China",
  population: 1330141295
}, {
  name: "India",
  population: 1173108018
}, {
  name: "Indonesia",
  population: 242968342
}, {
  name: "Russia",
  population: 139390205
}];
//set margins
var margin = {
  top: 30,
  right: 30,
  bottom: 30,
  left: 40
};
var width = 960 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
//set scales & ranges
var yScale = d3.scaleBand().range([0, height]).padding(0.1)
var xScale = d3.scaleLinear().range([0, width])
//draw the svg
var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom).append("g")
  .attr("transform", "translate(" + margin.left * 2 + "," + margin.top + ")")
//load the data
data.forEach(function(d) {
  d.population = +d.population;
});

//set domains

xScale.domain([d3.min(data, function(d) {
  return d.population
}), d3.max(data, function(d) {
  return d.population
})])

yScale.domain(data.map(d => d.name))

//add x & y Axis

svg.append("g")
  .attr("transform", "translate(" + 0 + "," + height + ")")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));
 
svg
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", d => yScale(d.name))
  .attr("width", d => xScale(d.population))
  .attr("x", 0)
  .attr("height", yScale.bandwidth())