[Unlisted] Practice Horizontal Bar Chart

forked from thulse's block: [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 yValue = d=> d.country;
    const yLabel = 'Country';
    const xValue = d=> d.netUsers;
    const xLabel = 'Internet Users';
    
    const	margin = {
      left: 140,
      right: 80,
      top: 20, 
      bottom: 70
    };
    
    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',60)
      .text(xLabel);
    
//    yAxisG.append('text')
//    	.attr('class', 'axis-label')
//      .attr('x', -innerHeight/2)
//    	.attr('y',-140)
//      .attr('transform', `rotate(-90)`)
//      .style('text-anchor','middle')
//      .text(yLabel);
    
    const yScale = d3.scaleBand()
    	.paddingInner(0.24)
    	.paddingOuter(0.2);
    const xScale = d3.scaleLinear();
    
    const xTicks = 10;
    const xAxis = d3.axisBottom()
        .scale(xScale)
    		.ticks(xTicks)
    		.tickFormat(d3.format('.0s'))
    		.tickSize(-innerHeight);
    
    const yAxis = d3.axisLeft()
        .scale(yScale)
    		.tickPadding(15)
    		.tickSize(-innerWidth);
    
   
   
    
    const row = d=>{
      const netUsersWithCommas = d['InternetUsers'];
      return{
        country: d['Country'],
        netUsers: +netUsersWithCommas.replace(/,/g,'')
      };
      
    };
    //const top5 = data=>data.slice(0,5);
    
    d3.csv('topinternetcountries.csv', row, data => {
     xScale;
      
      yScale
      	.domain(data.map(yValue))        
      	.range([innerHeight,0])
      	
      ;
      
     xScale
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice(xTicks);
     
      //colorScale.domain(data.map(colorValue).reverse());
      
      
      
      g.selectAll('rect').data(data)
      	.enter().append('rect')
      		.attr('x',0)
      		.attr('y', d => yScale(yValue(d)))
      		.attr('width', d => xScale(xValue(d)))
      		.attr('height', d => yScale.bandwidth())
      		.attr('fill', "steelblue")
      		//.attr('fill-opacity', 1.0)
      ;
        	
      
      xAxisG.call(xAxis)
      xAxisG.selectAll('.tick line').remove();
      yAxisG.call(yAxis);
      
    });

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

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