[Unlisted] Practice Bar Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content= "width=device-width">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <title> Top Internet Countries Visualization</title>
	<style>
    .tick text{
      fill: #8E8883;
      font-size: 12pt;
    	font-family: sans-serif}
    .axis-label{
      fill: black;
      font-size: 30pt;
      font-family:sans-serif;
    }
  </style>
</head>
<body>
  <svg width="960" height= "500"></svg>
  <script>
    
    const xValue = d=> d.country;
    const xLabel = 'Country';
    const yValue = d=> d.netUsers;
    const yLabel = 'Internet Users';
    
    const	margin = {
      left: 180,
      right: 80,
      top: 20, 
      bottom: 200
    };
    
    const svg = d3.select('svg');
    const width = svg.attr('width');
    const height = svg.attr('height');
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
 
    const g = svg.append('g')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`);
  	const xAxisG = g.append('g')
    	.attr('transform', `translate(0, ${innerHeight})`);
    const yAxisG = g.append('g');
   	
    
    xAxisG.append('text')
    	.attr('class', 'axis-label')
      .attr('x', innerWidth/2)
    	.attr('y',130)
      .text(xLabel);
    
    yAxisG.append('text')
    	.attr('class', 'axis-label')
      .attr('x', -innerHeight/2)
    	.attr('y',-90)
      .attr('transform', `rotate(-90)`)
      .style('text-anchor','middle')
      .text(yLabel);

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js