First D3 bar graph

by Mark

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
        <title>D3 Test</title>
    
    <body>
    
    
    </body>

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
    margin-right: 2px;
}

JavaScript

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

var w = 500;
var h = 100;
var barPadding = 1;

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
    .attr("x", function(d, i){
          return i * (w / dataset.length);  
    })
    .attr("y", function(d){
         return h - d * 4;   
    })
       .attr("width", w / dataset.length - barPadding)
       .attr("height", 100)
       .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        })

svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
      return d;  
})
.text(function(d) {
    return d; 
})
.attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
 .attr("y", function(d) {
        return h - (d * 4) + 14;  //15 is now 14
    })
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle")
.attr("font-size", "11px")
.attr("fill", "white");