Render a D3JS Bar chart - Part 1

XSP.addOnLoad(function() {
var data = #{compositeData.data};
var clientID = "#{javascript:getClientId('chartSurface')}";
var canvas = dojo.byId(clientID);
var width = #{compositeData.width} < 0 ? canvas.offsetWidth : #{compositeData.width};
var height = #{compositeData.height} < 0 ? Math.round(width / 3) : #{compositeData.height};
var decimalplaces = #{compositeData.decimalplaces};
var displayByThousands = #{compositeData.displayByThousands};
var barWidth = Math.round(width / data.length / 1.02);
var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.value; })]).
  rangeRound([0, height]);

// add the canvas to the DOM
var padding = 30;
var fill = ["#1AB58A","#FF7729","#FFAD29","#FF2151","#FFFF88","#FFEBCA"];
var simpleBar = d3.select(canvas).
  append("svg:svg").
  attr("width", width).
  attr("height", height + padding);

// Basic chart
simpleBar.selectAll("rect").
  data(data).
  enter().
  append("svg:rect").
  attr("x", function(datum, index) { return x(index); }).
  attr("y", function(datum) { return height - y(datum.value); }).
  attr("height", function(datum) { return y(datum.value); }).
  attr("width", barWidth).
  attr("fill", function(datum, index) { return fill[index%6]; });
// Labels
simpleBar.selectAll("text").
  data(data).
  enter().
  append("svg:text").
  attr("x", function(datum, index) { return x(index) + barWidth; }).
  attr("y", function(datum) { return height - y(datum.value); }).
  attr("dx", -barWidth/2).
  attr("dy", "1.2em").
  attr("text-anchor", "middle").
  attr("style", "font-size: 12; font-family: Helvetica, sans-serif; font-weight : bold").
  text(function(datum) { return datum.value == 0 ? "" : (displayByThousands ? (datum.value/1000).toFixed(decimalplaces)+"k": datum.value.toFixed(decimalplaces));}).
  attr("fill", "black");
 // Axis
 simpleBar.selectAll("text.yAxis").
  data(data).
  enter().append("svg:text").
  attr("x", function(datum, index) { return x(index) + barWidth; }).
  attr("y", height).
  attr("dx", -barWidth*0.9).
  attr("text-anchor", "left").
  attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
  text(function(datum) { return datum.label;}).
  attr("transform", "translate(0, 18)").
  attr("class", "yAxis")
 })