CODEWITHSUNDEEP
d3.js
Leehbi
Leehbi

Reputation: 779

Trying to append an ellipse to svg to cover points

I have produced a scatter chart using D3. It works okay. Now I want to cover the points plotted with an ellipse.

I've tried to get the xOval value by looking for the max value in the dataset, same for yOval.

    var xOval = d3.scale.linear()
                            .domain([0,d3.max(dataset, function(d) { return d[0]; })])


        var yOval = d3.scale.linear()
                            .domain([0,d3.max(dataset, function(d) { return d[1]; })])

Further down in the body after the scatter is plotted I have :

        svg.append("ellipse")
            .attr("cx", function(d) {
                return xOval(d[0]);
            })


            .attr("cy", function(d) {
                return yOval(d[1]);
           })
           .attr("rx", 10)
           .attr("ry", 10);

This fails to work.

Any ideas where I'm going wrong?

Upvotes: 0

Views: 703

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

This is quite difficult to do with an ellipse, as you have to make sure that everything is within the path defined by it. Here's how to do it with a circle, which should get you started.

The easiest way to do this is to use D3's polygon methods for this. In particular, you can get the centroid of the polygon defined by all points as the center of the circle. Then all you have to do is find the distance to the point that is farthest away from that and you have your radius.

The code looks something like this, assuming suitable data structures.

var center = d3.geom.polygon(dataset).centroid(),
r = d3.max(dataset, function(d) {
    return Math.sqrt(Math.pow(xScale(d[0]) - xScale(center[0]), 2) + Math.pow(yScale(d[1]) - yScale(center[1]), 2));

}) + rScale;

rScale here is the radius of the circles that represent a point. The radius of the covering circle needs to be extended by that to make sure that not only the center, but the entire data point circle is covered.

Complete example here. Note that this is not optimal in the sense that there would be a smaller circle that covers all data points.

Upvotes: 2

Related Questions