bar chart d3

by b_long

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Sunburst with Distortion</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
       <style type="text/css">

    </style>
  </head>
    <body>
  </body>
</html>

JavaScript

var dataset = [1, 0, 0, 1, 0, 0, 12, 19, 263, 108, 117, 234, 556, 172, 30, 52] 
var labels = ["No schooling completed", "Nursery to 4th grade", "5th and 6th grade", "7th and 8th grade", "9th grade", "10th grade", "11th grade", "12th grade, no diploma", "High school graduate, GED, or alternative", "Some college, less than 1 year", "Some college, 1 or more years, no degree", "Associate's degree", "Bachelor's degree", "Master's degree", "Professional school degree", "Doctorate degree"]
    
            var w = 550, h = 240;    
            var barPadding = 1
            var barHeight = 25
            var textColWidth = 250
            var barColWidth = w - textColWidth
            
            h = (barHeight + barPadding) * dataset.length

            var svg = d3.select("body")
                        .attr("width", w)
                        .attr("height", h)
                        .append("svg")

             var xScale = d3.scale.linear()
                  .domain([0, d3.max(dataset)])
                  .range([0, barColWidth-30]);             

            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", textColWidth)
               .attr("width", function(d, i) {return xScale(d)})
               .attr("y", function(d, i) {return i * (barHeight + barPadding)})
               .attr("height", barHeight)

            svg.selectAll("text.labels")
               .data(labels)
               .enter()
               .append("text")
               .attr("class", "labels")
               .text(function(d) {return d})
               .attr("x", 5)
               .attr("y", function(d, i) {return barHeight -5  + i * (barHeight + barPadding)})
               .attr("height", barHeight)
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
                   
// Why doesn't the following text appear ? 
                   
           ...