D3 Examples - bar chart revised

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>West Oakland population data</title>
        <meta name="description" content="A breakdown of the neighborhood's population by race and ethnicity.">
        <link rel="stylesheet" href="wocensus.css">
          <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        
        <h1>West Oakland 2010 census totals</h1>
        
      <script>
          
          
          var dataset = [12578, 4886,  3236, 2541, 1495];
          
          var ordinalData = ["African-American", "white", "Asian", "Other", "Two or more"];
           
           var w=960;
           var h=250;
           var barPadding = 1;
           var padding = [10, 10, 50, 50];
          
          var widthscale = d3.scale.linear()
          .range([0, w - padding[1] - padding[3] ]);
          
          var heightscale = d3.scale.ordinal().rangeRoundBands([0, h], 0.5);
          
          
          heightscale.domain(d3.range(dataset.length));
          
          heightscale.domain(ordinalData);
          
          
          var scale = d3.scale.linear()
          .domain([0, 15000])
          .range([0, 900]);
             
          
           var svg = d3.select("body")
                        .append("svg")
                         .attr("width", w)
                         .attr("height", h);
           
          
       
           svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
             .attr("x", padding[3])
           .attr("y", function(d, i) {
             vert =  (h/dataset.length); //save the value as 'vert' for spacing the text labels later
               
             console.log("the value of vert: " + vert);
             return i * vert;
           })
         
          .attr("height", 
                
                function () { 
        return ((h/dataset.length)-1)
          })
           
           
           .attr("width", function(d) {
            // return d 
             return scale(d)
           })
           .attr("fill", "navy")
    
           ;
           
           svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
            return d;   
           })
           
             .attr("x", padding[3])
           .attr("y", function(d, i) {
              return (i * (h/dataset.length) + (vert * .95) ); 
               
             //  return i * 21;
                 })
           
         
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "white");
          
          //generate axis
          var axis = d3.svg.axis()
          .scale(scale);
          
         
        
          svg.append("g") 
          .attr("class", "x axis")
         .attr("transform", "translate("+ 50 + ", "  + h + ")")
          .call(axis);
         // .orient("bottom");
          
          var Yaxis = d3.svg.axis()
          .scale(heightscale)
          .orient("left");
        
          svg.append("g")
          .attr("class", "Yaxis")
          .attr("transform", "translate(" + (padding[3]-5) + ",0)")
          .call(Yaxis);
          
        </script>
  
     <P>The bar graph shows West Oakland population by race. In order of size, the bars represent these groups: African-American, white, Asian, other, and two or more races.</P>
    </body>
</html>
    