score:0

Here is the upated Plunker link for creating scatter plot charts with quadrants through d3.js:-

http://plnkr.co/edit/yEfkN0tn7DPAypAvyWjD?p=preview

Code:

<script>
var svg = d3.select("#scatter"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    domainwidth = width - margin.left - margin.right,
    domainheight = height - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .domain(padExtent([1,5]))
    .range(padExtent([0, domainwidth]));
var y = d3.scaleLinear()
    .domain(padExtent([1,5]))
    .range(padExtent([domainheight, 0]));

var g = svg.append("g")
        .attr("transform", "translate(" + margin.top + "," + margin.top + ")");

g.append("rect")
    .attr("width", width - margin.left - margin.right)
    .attr("height", height - margin.top - margin.bottom)
    .attr("fill", "#F6F6F6");

d3.json("data.json", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
      d.consequence = +d.consequence;
      d.value = +d.value;
  });

  g.selectAll("circle")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 7)
      .attr("cx", function(d) { return x(d.consequence); })
      .attr("cy", function(d) { return y(d.value); })
        .style("fill", function(d) {        
          if (d.value >= 3 && d.consequence <= 3) {return "#60B19C"} // Top Left
          else if (d.value >= 3 && d.consequence >= 3) {return "#8EC9DC"} // Top Right
          else if (d.value <= 3 && d.consequence >= 3) {return "#D06B47"} // Bottom Left
          else { return "#A72D73" } //Bottom Right         
      });

  g.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + y.range()[0] / 2 + ")")
      .call(d3.axisBottom(x).ticks(5));

  g.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + x.range()[1] / 2 + ", 0)")
      .call(d3.axisLeft(y).ticks(5));
});

function padExtent(e, p) {
    if (p === undefined) p = 1;
    return ([e[0] - p, e[1] + p]);
}
</script>

score:1

D3.js allows this feature if you simply add negative values for the coordinates in the scatterplot. Just off the top of my hat, you could give the points their regular coordinates, just set the domains of your d3.scale function as to allow negative values. Just an example would be

var x = d3.scale.linear().range([0, width]).domain([d3.min(data), d3.max(data)]);

This sets the range of your scatterplot to the width you have selected, but allows all values to be accepted into the plot, regardless of them being positive or negative. As is very well explained here, scales fit to the size of the range, spreading the contents of the domain over the range. It is, however, not a requirement that said domain is completely positive.

If you check for the biggest absolute number in your data, you can format the domain likewise, therefore having the axes in the center of your plot, instead of them being misaligned.

Next, just add your axes like normal, only shift them to the middle of your canvas using x and y attributes.


Related Query

More Query from same tag