D3 Examples - VisDock in Blue Earth

VisDock in Blue Earth

This Blue Earth example was originally created by Marc Neuwirth and is one of his examples to render objects in a realistic manner using CSS. The original work can be found here. The VisDock toolkit has been integrated into the Blue Earth example built with Marc Neuwirth's custom D3.js library. Using selection, users can query countries while using the pointer tool, they can still use the zooming event provided in d3 library. VisDock rotation and Pan & Zoom tools work independently of the built-in zoom functions. For more information about VisDock, cick on the link.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <svg id="defs">
        <defs>
            <linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#005C99;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#0099FF;stop-opacity:1" />
            </linearGradient>
            <filter id="glow">
                <feColorMatrix type="matrix"
                    values=
                    "0 0 0 0   0
                     0 0 0 0.9 0 
                     0 0 0 0.9 0 
                     0 0 0 1   0"/>
                <feGaussianBlur stdDeviation="5.5" result="coloredBlur"/>
                <feMerge>
                    <feMergeNode in="coloredBlur"/>
                    <feMergeNode in="SourceGraphic"/>
                </feMerge>
            </filter>
        </defs>
    </svg>
    <link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
    <script src="https://marcneuwirth.com/experiments/globe/d3.custom.js"></script>
   
    <script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
    
    <script>
        var zoom;
        VisDock.init("body", {width: 1000, height: 700});
        AnnotatedByData.layerTypes = [".feature"]
        var viewport = VisDock.getViewport();
        
        VisDock.eventHandler = {
            getHitsPolygon : function(points, inclusive) {
                var shapebound = new createPolygon(points);
                return shapebound.intersectPath(d3.selectAll(".feature")[0], inclusive)
            },
            getHitsLine : function(points, inclusive) {
                var shapebound = new createLine(points);
                return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
            },
            getHitsEllipse : function(points, inclusive) {
                var shapebound = new createEllipse(points);
                return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
            },
            setColor : function(hits) {
                QueryManager.layers[num - 1] = [];
                for (var i = 0; i < hits.length; i++) {
                    var d = hits[i].getAttributeNS(null, "d")
                    var opacity = (parseFloat(hits[i].getAttributeNS(null, "opacity")) >= 0) ? hits[i].getAttributeNS(null, "opacity") : 0
                    QueryManager.layers[num - 1][i] = viewport.append("path")
                        .attr("d", d)
                        .attr("style", "fill: " + VisDock.color[num - 1] + "; opacity:" + 1+ "; pointer-events: none")
                        .attr("id", "_" + hits[i].getAttributeNS(null, "id"))
                        .attr("class", "VisDockPathLayer")
                }
            },
            changeColor : function(color, query, index) {
                for (var i = 0; i < query.length; i++) {
                    var vis = query[i][0][0].getAttributeNS(null, "style").split("opacity:")[1].split(";")[0]//.split(":")[1]
                    query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis + "; pointer-events: none")
                }
            },
            changeVisibility : function(vis, query, index) {
                for (var i = 0; i < query.length; i++) {
                    var color = query[i][0][0].getAttributeNS(null, "style").split("fill: ")[1].split(";")[0]//.split(":")[1]
                    query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis + "; pointer-events: none")
                }                   
            },
            removeColor : function(hits, index) {
                for (var i = 0; i < hits.length; i++) {
                    hits[i].remove();
            }
        }
    }   
    BirdView.init(viewport, 1000, 700)
    d3.select(self.frameElement).style("width", "1000px");
    d3.select(self.frameElement).style("height", "700px");          
    </script>
    <script src="script.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>
</html>
    