D3 Bar chart

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3: Creating a bar chart</title>
    <style type="text/css">
    </style>
  </head>
  <body>

//bar chart

//setting up the margins
    var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 800 - margin.top - margin.bottom;

//setting up arrays for input
    var billions = [];
    var names = [];
    var i = 0;

//iterating through csv file and saving the billionaire if his net worth exceeds 33 billion
    d3.csv("billionaires.csv", function(data) {
      data.forEach(function(d) {
        if(d.worthinbillions >= 33 && d.year == 2014) {
          names[i] = d.name;
          billions[i] = +d.worthinbillions;
          i++;
        }
     });

//adding svg to page
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//xScale1 used for creating bars
    var xScale1 = d3.scaleBand()
      .domain(d3.range(names.length))
      .rangeRound([0, width - margin.left - margin.right])
      .paddingInner(0.25);

//xScale2 used for creating x-axis
    var xScale2 = d3.scaleBand()
      .domain(names)
      .rangeRound([0, width - margin.left - margin.right])
      .paddingInner(0.05);

//yScale1 used for creating bars
    var yScale1 = d3.scaleLinear()
      .domain([0, d3.max(billions)])
      .range([0, height/1.3]);

//yScale2 used for creating y-axis
    var yScale2 = d3.scaleLinear()
      .domain([0, d3.max(billions)])
      .range([height/1.3, 0]);

//drawing a rectangle for each billionaire
    svg.selectAll("rect")
      .data(billions)
      .enter()
      .append("rect")
      .attr('transform', 'translate(' + width/15 + ',' + -(height/4.356) + ')')
      .attr("x", function(d, i) {
        return xScale1(i);
      })
      .attr("y", function(d) {
        return height - yScale1(d);
      })
      .attr("width", xScale1.bandwidth())
      .attr("height", function(d) {
        return yScale1(d);
      })
      .attr("fill", function(d) {
        return "rgb(0, 100, 0)";
      });

//adding text to each bar in order to display the actual net worth values
    svg.selectAll("text")
      .data(billions)
      .enter()
      .append("text")
      .attr('transform', 'translate(' + width/15 + ', -163)')
      .text(function(d) {
        return d;
      })
      .attr("text-anchor", "middle")
      .attr("x", function(d, i) {
        return xScale1(i) + xScale1.bandwidth() / 2;
      })
      .attr("y", function(d) {
        return height - yScale1(d) + 14;
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "white");

//setting up the axes for the bar chart
    var xAxis = d3.axisBottom()
      .scale(xScale2);

var yAxis = d3.axisLeft()
      .scale(yScale2);

//adding x-axis to svg
    svg.append("g")
      .attr("class", "x axis")
      .attr('transform', 'translate(' + width/15 + ', ' + height/1.3 +  ' )')
      .call(xAxis)
      .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(90)")
        .style("text-anchor", "start");

//adding y-axis to svg
    svg.append("g")
      .attr("class", "y axis")
      .attr('transform', 'translate(' + width/15 + ', 0)')
      .call(yAxis);

//adding title at the top of the bar chart
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " , 0)")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "24px")
      .text("Richest Billionaires of 2014");

//labeling the x-axis
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height - margin.top - 30) + ")")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "20px")
      .text("Billionaires' Names");

//labeling the y-axis
    svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left + 20)
      .attr("x",0 - (height / 2.5))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "20px")
      .text("Net Worth in Billions");

});

</script>

</body>
</html>

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