simple bar chart d3

bar.js

var margin = {top: 20, left: 50, right: 50, bottom: 50},
    w = 700 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;

var ygetter = function(d){return d.value;};
var f = d3.format(",.0f");

var barPadding = 10;
var colWidth = (w / data.length) - barPadding;
var colSpace = w / data.length;
var colCenterOffset = barPadding / 2;

var YY = d3.scale.linear()
    .domain(d3.extent(data, ygetter))
    .range([h, 0])
    .nice();

var svg = d3.select("body")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom);

var columnCalculator = function(idx){
    return colCenterOffset + (colSpace * idx);
};

bars = svg.append('g').attr('class', 'bars')
   .selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr('class', 'bar')
   .attr("y", function(d){return YY(ygetter(d));})
   .attr("x", function(d, i){return columnCalculator(i);})
   .attr("width", colWidth)
   .attr("height", function(d){return h - YY(ygetter(d));})
   .style("fill", function(d, i) { 
        return d3.max(data, ygetter) === ygetter(d) ? 'red' : '#bbaab6'; });
svg.append('g').attr("class", "guide")
  .selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("y", function(d){return YY(ygetter(d));})
  .attr("x", function(d, i){return columnCalculator(i) + 3;})
  .text(function(d){return "$" + f(ygetter(d));});