D3 Examples - [Unlisted] Practice Horizontal Bar Chart

xxxxxxxxxx
 
<!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>
    