CODEWITHSUNDEEP
javascriptd3.jsscatter-plot
Ritika
Ritika

Reputation: 29

Library for creating scatter plot charts with quadrants

I have to create scatter plot with quadrants. I have looked at libraries like d3.js , high charts, nvd3 but I found only normal scatter charts.

Can someone suggest which js library will help me achieve this?

Thanks

Upvotes: 0

Views: 959

Answers (2)

user8226204
user8226204

Reputation:

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>

Upvotes: 0

Ruben Helsloot
Ruben Helsloot

Reputation: 13129

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.

Upvotes: 1

Related Questions