title: D3 Histogram with negative values
body: <p>I've been following this tutorial: <a href="http://www.youtube.com/watch?v=cu-I2um024k" rel="nofollow noreferrer">http://www.youtube.com/watch?v=cu-I2um024k</a> and I'm trying to create a histogram using an array of data points. My code works fine when the data points are all positive values: <a href="http://jsfiddle.net/sbeleidy/yDBQU/" rel="nofollow noreferrer">http://jsfiddle.net/sbeleidy/yDBQU/</a></p>
  
  <pre><code>var data = [1,2,3,4,5,6,9,12,23,5,4,1,2,30,24,21,18,19,41,43,36,38,5,52,1,23,1,2,5,3,1,2,4,4,21,2,3,4,1,2,5,7,8,5,3,1,10,12,24,4,21,34,35,35,35,35,36,37,32,1,31,32,32,23,23,24,25,27,45,46,47,0];
  
          var width = 500,
              height = 500,
              padding = 50;
  
          var histogram = d3.layout.histogram()
              .bins(data.length/3)
              (data);
  
          console.log(histogram);
  
  
          var someArray =[];
          for (var i=0; i &lt; histogram.length; i++){
              someArray.push(histogram[i].length);
          }
          var maxVal = d3.max(someArray);
  
          var y = d3.scale.linear()
              .domain([0, maxVal])
              .range([0,height]);
  
          var x = d3.scale.linear()
              .domain([d3.min(data),d3.max(data)])
              .range([0,width])
  
          var xAxis = d3.svg.axis()
              .scale(x)
              .orient('bottom');
  
          var canvas = d3.select('body').append('svg')
              .attr('width',width)
              .attr('height',height + padding)
  
          var xAxisPrinter = canvas.append('g')
              .attr('transform','translate(0,'+height+')')
              .call(xAxis);
  
          var bars = canvas.selectAll('.bar')
              .data(histogram)
              .enter()
              .append('g')
  
          bars.append("rect")
              .attr('x', function(d){return x(d.x);})
              .attr('y', function(d){return height - y(d.y);})
              .attr('width', function(d){return x(d.dx); })
              .attr('height', function(d){return y(d.y);})
              .attr('fill','steelblue')
  
          bars.append('text')
              .attr('x', function(d){return x(d.x); })
              .attr('y', function(d){return height - y(d.y);})
              .attr('dx',function(d){return x(d.dx)/2;})
              .attr('dy',"20px")
              .attr('text-anchor','middle')
              .text(function(d){
                  if (d.y != 0){
                      return d.y;
                  }
                  else {
                      return null;
                  }})
  </code></pre>
  
  <p>But when I add some negative values in the data I get very weird widths for the data (see <a href="http://jsfiddle.net/sbeleidy/K5EW7/" rel="nofollow noreferrer">http://jsfiddle.net/sbeleidy/K5EW7/</a> )</p>
  
  <p>I tried the answer from: <a href="https://stackoverflow.com/questions/15388481/d3-js-histogram-with-positive-and-negative-values">d3.js histogram with positive and negative values</a> and did this: <a href="http://jsfiddle.net/sbeleidy/M23ks/" rel="nofollow noreferrer">http://jsfiddle.net/sbeleidy/M23ks/</a>
  but that's still not working.</p>
  
  <p>What am I doing wrong and how can I support negative values?</p>
  
  <p>Thanks</p>