Geek asks and answers

How can I plot the positive and negative values ​​for both axes in a scatter plot with d3?

I use d3 to plot the scatter plot, and the set of i values ​​for the x and y axes has positive and negative values. This is my first attempt to use d3, and I collected from introductory tutorials such as On the tenth day of Xmas, get dirty with d3.js data that the key correctly sets the x and y scales.

Next, I found this lesson: A bar chart with negative values that almost helped me fix it (I think). My dataset is too large to fit here, but here is the code on which I have a sample of my data to work with:

<div id="compareAll"></div>
<script>
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);

}

</script>

, , , yScale , xScale.

. , - . , .

!

+5
1

- [min, max], min .

. : http://jsfiddle.net/nrabinowitz/qN5Sa/

:

  • , . x- :

    var xScale = d3.scale.linear()
     .domain([-5, 5])
     .range([0,w]);

  • d3.svg.axis() .orient() - "bottom", . y, .orient('left').

  • min/max , , . , :

    // 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] });
+10

More articles:


All Articles