There's nothing special about using negative values for your axes - you should simply be using linear scales for your axes, and setting the domain to [min, max], where min might well be negative.

See a working version of your code here:

A few notes on this:

  • You should definitely use linear scales for a scatterplot, unless you want more of a matrix. A standard x-scale might look like this:

    var xScale = d3.scale.linear()
         .domain([-5, 5])
  • The d3.svg.axis() component includes an .orient() setting - by default, this is "bottom", i.e. a horizontal axis with numbers below the line. To make a correctly oriented y-axis, use .orient('left').

  • I didn't include the code to determine the min/max domain for each axis based on your data, because I figured it would complicate the example. But you can do this fairly easily if you don't know the bounds of your data:

    // assuming data like [[x0,y0], [x1,y1]]
    var xmin = d3.min(data, function(d) { return d[0] }),
        xmax = d3.max(data, function(d) { return d[0] }),
        ymin = d3.min(data, function(d) { return d[1] }),
        ymax = d3.max(data, function(d) { return d[1] });

Related Query

More Query from same tag