D3 Examples - VisDock in Convex Hull generation

VisDock in Convex Hull generation
The VisDock toolkit provides various interactions in the gift wrapping algorithm based on R. A. Jarvis' O(nh) complexity algorithm. Users can make selections of SVG elements (circle) by using various selection tools and this example generates a convex hull that contains the SVG elements. For more information about VisDock, cick on the link.
xxxxxxxxxx
 
<!DOCTYPE html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        <link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
        <script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
        <script src="https://rawgithub.com/visdockhub/newvisdock/master/master/2d.js"></script>
        <script src="https://rawgithub.com/visdockhub/newvisdock/master/master/intersectionutilities.js"></script>
        <script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.utils.js"></script>      
    
<body>
</body> 
    <script>
        VisDock.init('body', {width: 1200, height: 800});
        var viewport = VisDock.getViewport();
        
        var svg = viewport;
        var xy = [];
        
        for (var i = 0; i < 200; i++){
            xy[i] = {};
            xy[i]['x'] = 1000 * Math.random();
            xy[i]['y'] = 600 * Math.random();
        }
        var id = 0;
        var circles = svg.selectAll('circle').data(xy)
            .enter().append('circle')
            .attr('cx', function(d){
                return parseFloat(d.x);
            })
            .attr('cy', function(d){
                return parseFloat(d.y);
            })
            .attr('id', function(d,i){
                return 'id'+i;
            })
            .attr('class', 'nodes')
            .attr('r', 5)
            .attr('fill', 'black');
​
    VisDock.eventHandler = {
        getHitsPolygon : function(points, inclusive) {
            var shapebound = new createPolygon(points);
            return shapebound.intersectEllipse(d3.selectAll(".nodes")[0], inclusive)
        },
        getHitsEllipse : function(points, inclusive) {
            var shapebound = new createEllipse(points);
            return shapebound.intersectEllipse(d3.selectAll(".nodes")[0], inclusive)                        
        },
        getHitsLine : function(points, inclusive) {
            var shapebound = new createLine(points);
            return shapebound.intersectEllipse(d3.selectAll(".nodes")[0], inclusive)
        },
        setColor : function(hits) {
            var circleObjects = d3.selectAll("circle")[0];
            for (var i = 0; i < hits.length; i++) {
                VisDock.utils.addEllipseLayer(hits[i], null, num - 1);
            }
            findConvex(hits);
        },
        changeColor : function(color, query, index) {
        },
        changeVisibility : function(vis, query, index) {
        },
        removeColor : function(hits, index) {
            for (var i = 0; i < hits.length; i++) {
                hits[i].remove();
            }
        },
    }
            
        function findConvex(hits){
            VisDock.startChrome();
            var theta0 = 0;
            var done = 0;
            var index = -1;
            var xprev;
            var yprev;
            var connect = [];
            var count = 0;
            var cas = 0;
            var theta_n = 0;
            while (done == 0 && count < 1000){
                count++;
                if (index == -1){
                    var x = 1000000;
                    for (var j = 0; j < hits.length; j++){
                        if (parseFloat(hits[j].getAttribute("cx")) < x){
                            x = parseFloat(hits[j].getAttribute("cx"));
                            index = j;
                        }
                    }
                    connect.push(index);
                    xprev = parseFloat(hits[index].getAttribute("cx"));
                    yprev = 1*parseFloat(hits[index].getAttribute("cy"));
                    theta0 = Math.atan((yprev/xprev));
​
                } else if (connect.length == 1){
                    var theta;
                    var theta_min = 100000000;
                    var dx, dy;
                    for (var j = 0; j < hits.length; j++){
                        if (j != connect[0]){
                            dy = 1*(parseFloat(hits[j].getAttribute("cy")) - yprev);
                            dx = (parseFloat(hits[j].getAttribute("cx")) - xprev);
                            theta = Math.atan((dy/dx));
                            
                            if ((theta) < (theta_min)){
                                theta_min = theta;
                                index = j;
                                var dx2 = dx;
                                var dy2 = dy;
                            }
                            
                        }                       
                    }
                    if (dx2 <= 0 && dy2 >= 0){
                        cas = 1;                            
                    } else if (dx2 <= 0 && dy2 <= 0){
                        cas = 2;
                    } else if (dx2 >= 0 && dy2 <= 0){
                        cas = 3;
                    } else if (dx2 >= 0 && dy2 >= 0){
                        cas = 4;
                    }       
                    theta_n = Math.abs(Math.atan(dy2/dx2));         
                    xprev = parseFloat(hits[index].getAttribute("cx"));
                    yprev = 1*parseFloat(hits[index].getAttribute("cy"));                   
                    connect.push(index);                    
                } else if (connect.length > 1){
                    var n = connect.length - 1;
                    var theta;
                    var theta_min = 100000000;
                    var dx, dy;
                    for (var j = 0; j < hits.length; j++){
                        if (j == connect[0] || connect.indexOf(j) == -1){
                            if (j != connect[connect.length-2]){
                                if (j != connect[n]){
                                    dy = 1*(parseFloat(hits[j].getAttribute("cy")) - yprev);
                                    dx = (parseFloat(hits[j].getAttribute("cx")) - xprev);
                                    theta = Math.atan((dy/dx));
                                    if (dx <= 0 && dy >= 0){ // case 1
                                        if (cas == 1){
                                            theta = Math.PI + theta_n - Math.abs(theta);
                                        } else if (cas == 2){
                                            theta = Math.PI + theta_n + Math.abs(theta);
                                        } else if (cas == 3){
                                            if (Math.abs(theta) > theta_n){
                                                theta = theta_n - Math.abs(theta) + 2*Math.PI; 
                                            } else{
                                                theta = -1*theta_n + Math.abs(theta) + 2*Math.PI; 
                                            }
                                            
                                        } else if (cas == 4){
                                            theta = 2*Math.PI - theta_n - Math.abs(theta); 
                                        }
                                    } else if (dx <= 0 && dy <= 0){ // case 2
                                        if (cas == 1){
                                            theta = Math.PI + theta_n + Math.abs(theta);
                                        } else if (cas == 2){
                                            theta = Math.PI - theta_n + Math.abs(theta);
                                        } else if (cas == 3){
                                            theta = 2 * Math.PI - Math.abs(theta) - theta_n; 
                                        } else if (cas == 4){
                                            if (Math.abs(theta) > theta_n){
                                                theta = 2*Math.PI + theta_n - Math.abs(theta); 
                                            } else {
                                                theta = 2*Math.PI - theta_n + Math.abs(theta); 
                                            }
                                            
                                        }
                                    } else if (dx >= 0 && dy <= 0){ // case 3
                                        if (cas == 1){
                                            if (Math.abs(theta) > theta_n){
                                                theta = 2*Math.PI + theta_n - Math.abs(theta);
                                            } else {
                                                theta = 2*Math.PI - theta_n + Math.abs(theta);
                                            }
                                            
                                        } else if (cas == 2){
                                            theta = 2*Math.PI - theta_n - Math.abs(theta);
                                        } else if (cas == 3){
                                            theta = Math.PI + theta_n - Math.abs(theta); 
                                        } else if (cas == 4){
                                            theta = Math.PI + theta_n + Math.abs(theta); 
                                        }
                                    } else if (dx >= 0 && dy >= 0){ // case 4
                                        if (cas == 1){
                                            theta = 2*Math.PI - theta_n - Math.abs(theta);
                                        } else if (cas == 2){
                                            if (Math.abs(theta) > theta_n){
                                                theta = 2*Math.PI + theta_n - Math.abs(theta);
                                            } else {
                                                theta = 2*Math.PI - theta_n + Math.abs(theta);
                                            }
                                            
                                        } else if (cas == 3){
                                            theta = Math.abs(theta) + theta_n + Math.PI; 
                                        } else if (cas == 4){
                                            theta = Math.PI - theta_n + Math.abs(theta); 
                                        }
                                    }
                                                                
                                    if ((theta) < (theta_min)){
                                        theta_min = theta;
                                        index = j;
                                        var dx2 = dx;
                                        var dy2 = dy;
                                    }
                                }
                            }                           
                        }
                        
                    }
                    if (connect.indexOf(index) == -1 || index == connect[0]){
                        if (connect.length != 2 || connect.indexOf(index) == -1){
                            connect.push(index);
                            xprev = parseFloat(hits[index].getAttribute("cx"));
                            yprev = parseFloat(hits[index].getAttribute("cy"));
                            theta0 = theta_min;
                            theta_min = 10000000;
                            theta_n = Math.abs(Math.atan(Math.abs(dy2/dx2)));
                            if (dx2 <= 0 && dy2 >= 0){
                                cas = 1;                            
                            } else if (dx2 <= 0 && dy2 <= 0){
                                cas = 2;
                            } else if (dx2 >= 0 && dy2 <= 0){
                                cas = 3;
                            } else if (dx2 >= 0 && dy2 >= 0){
                                cas = 4;
                            }                       
                        }
                    }   
​
                    if (index == connect[0] && connect.length != 2){
                        done = 1;
                    }
                }
            }
            var points = "";
            for (var i = 0; i < connect.length; i++){
                var cx = parseFloat(hits[connect[i]].getAttribute("cx"));
                var cy = parseFloat(hits[connect[i]].getAttribute("cy"));
                points = points + cx + "," + cy + " ";
            }
            svg.append("polygon")
                .attr("points", points)
                .attr("stroke-width", 2)
                .attr("fill", "blue")
                .attr("opacity", "0.2");
            VisDock.finishChrome();
        }
        BirdView.init(viewport, 1200, 800)
        d3.select(self.frameElement).style("height", "800px");
        d3.select(self.frameElement).style("width", "1200px");      
    </script>
​
​
    
</html>
    