title: D3 negative value bar chart
body: <p>Hi I need help with the negative values in my bar chart, it is currently not showing and only showing the positive values. It will output an error saying invalid negative value for rect.
  How do i solve this? My code is</p>
  
  <pre><code>var dataset = [ (121651.391 / 1000), (226572.523 / 1000), (-7708.748564 / 1000), (165348.8828 / 1000), (87917.84251 / 1000), (129156.684 / 1000), (46133.22384 / 1000), (17775.32051 / 1000), (92209.22587 / 1000), (168072.8333 / 1000),(35361.62174 / 1000), (1195.90284 / 1000), (-2841.722459 / 1000), (-2841.722459 / 1000), (-1936.84912 / 1000), (8078.804727 / 1000), (-72495.06187 / 1000), (297950.5249 / 1000)];
  
  
  //Width and height
  var w = 500;
  var h = 200;
  var barPadding = 1;
  
  var svg = d3.select("body")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
  
  svg.selectAll("rect")
     .data(dataset)
     .enter()
     .append("rect")
     .attr("x", 0)
     .attr("y", 0)
     .attr("width", 20)
     .attr("height", 200)
    .attr("x", function(d, i) {
      return i * (w / dataset.length);
  })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) {
      return d * 4;
  })
    .attr("y", function(d) {
      return h - (d * 4);  
  })
    .attr("fill", function(d) {
      return "rgb(0, 0, " + (d * 10) + ")";
  });
    svg.selectAll("text")
     .data(dataset)
     .enter()
     .append("text")
     .text(function(d) {
          return d;
     })
     .attr("x", function(d, i) {
          return i * (w / dataset.length);
     })
     .attr("y", function(d) {
          return h - (d * 4);
     })
        .attr("x", function(d, i) {
          return i * (w / dataset.length) + 5;  
     })
     .attr("y", function(d) {
          return h - (d * 4) + 15;              
     })
     .attr("font-family", "sans-serif")
     .attr("font-size", "11px")
     .attr("fill", "white")
      .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;  
      });
  </code></pre>
  
  <p>any help greatly appreciated</p>