title: How can I plot positive and negative values for both axes in a scatter plot with d3?
body: <p>I'm using d3 to build a scatter plot and the set of values I have for the x and y axes both have positive and negative values. This is my first attempt at using d3 and I've gathered from introductory tutorials such as <a href="http://www.12devsofxmas.co.uk/2012/01/data-visualisation/" rel="noreferrer">On the tenth day of Xmas, get dirty with data using d3.js</a>, that the key is setting up the x and y scales correctly. </p>
  
  <p>Next, I found this tutorial: <a href="https://gist.github.com/2368837" rel="noreferrer">Bar Chart with Negative Values</a>, which has almost helped me get it right (I think). My data set is too hefty to place here, but here is the code I have a sample of my data to work with: </p>
  
  <pre><code>&lt;div id="compareAll"&gt;&lt;/div&gt;
  &lt;script&gt;
  window.onload = function() {
  
  var dataSet = [ [4,4], [-4,4], [-4,-4], [4,-4], ];
  var x0 = Math.max(-d3.min(dataSet[0]), d3.max(dataSet[0]));
  var xScale = d3.scale.ordinal()
               .domain([-x0,x0])
               .range([0,10]);
  var yScale = d3.scale.ordinal()
               .domain(d3.range(dataSet[1])
               .rangeRoundBands([0,10]);
  
  var svg = d3.select("#compareAll")
  .append("svg")
  .attr("width", 10)
  .attr("height",10)
  
  svg.selectAll("circle")
  .data(dataSet)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
        return xScale(d[0]); 
  })
  .attr("cy", function(d) {
        return yScale(d[1]); 
  })
  .attr("r",4); 
  
  var xAxis = d3.svg.axis()
  .scale(xScale)
  .tickSize(1);
  
  var yAxis = d3.svg.axis()
  .scale(yScale)
  .tickSize(1);
  
  svg.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0,10)")
  .call(xAxis);
  
  svg.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(10,0)")
  .call(yAxis);
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Frankly, I don't understand the use of the ordinal scale in the Bar Chart example, however I got seemly worse results when I took it out and made the yScale with the same syntax as the xScale. </p>
  
  <p>Any explanation of the best way to go about working with positive and negative values for both axes would be appreciated. Let me know if I'm missing something obvious. I through together this example from a much larger project as to make it as specific and easy to read as possible. </p>
  
  <p>Thanks!</p>