D3 Examples - [Unlisted] Practice 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 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);
​
    
    
    const xScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0.2);
    const yScale = d3.scaleLinear();
    
    
    const xAxis = d3.axisBottom()
        .scale(xScale)
            //.tickPadding(20)
            .tickSize(-innerHeight);
    
    const yTicks = 10;
    const yAxis = d3.axisLeft()
        .scale(yScale)
            .ticks(yTicks)
            .tickPadding(20)
            .tickFormat(d3.format('.0s'))
            .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;
      
      xScale
        .domain(data.map(xValue))        
        .range([0,innerWidth])
        ;
      
     yScale
          .domain([0, d3.max(data, yValue)])
          .range([innerHeight, 0])
          .nice(yTicks);
     
      //colorScale.domain(data.map(colorValue).reverse());
      
      
      
      g.selectAll('rect').data(data)
        .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('y', d => yScale(yValue(d)))
            .attr('width', d => xScale.bandwidth())
            .attr('height', d => innerHeight-yScale(yValue(d)))
            .attr('fill', "steelblue")
            //.attr('fill-opacity', 1.0)
      ;
            
      
      xAxisG.call(xAxis)
      xAxisG.selectAll('.tick line').remove();
      xAxisG.selectAll('.tick text')
                .attr('transform', 'rotate(-45)')
                .style('text-anchor', 'end')
                .attr('alignment-baseline', 'middle')
                .attr('x', -5)
                .attr('y', 6)
                .attr('dy', 0);
      yAxisG.call(yAxis);
      
    });
​
  </script>
</body>
</html>
    