lucasmartins/igs_bar_chart

<script type="text/javascript">
  function colorfy (number) {
    number=number*10
    while(number>255){
      number=number/1.1
    }
    number=parseInt(number);
    return number;
  }
  //Width and height
  var w = <%=@width%>;
  var h = <%=@height%>;
  var barPadding = 2;
  
  var dataset = <%=@data%>;
  
  //Create SVG element
  var svg = d3.select("<%=@target_element%>")
        .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", function(d) {
        return d * 4;
     })
     .attr("fill", function(d) {
      return "rgb(0, 0, " + colorfy(d) + ")";
     });

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

</script>