D3 Examples - Briesemeister projection

Briesemeister projection
This Briesemeister projection is a projection of the world map onto the 2D space using deformation mostly in the oceans. The VisDock toolkit has been integrated into this Briesemeister example built with D3.js (found here) by Ilya Boyandin. Using selection and other toolkits, users can query distorted lands represented as path elements, and explore the visualization with Pan & Zoom and Rotate. For more information about VisDock, please cick on the link.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.background {
  fill: #a4bac7;
}
​
.foreground {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
}
​
.graticule {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
​
.graticule:nth-child(2n) {
  stroke-dasharray: 2,2;
}
​
.land {
  fill: #d7c7ad;
  stroke: #766951;
}
​
.boundary {
  fill: none;
  stroke: #a5967e;
}
​
</style>
<body>
<link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<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>
<script>
​
var width = 960,
    height = 500;
​
VisDock.init("body", {width: 960, height: 700});
var viewport = VisDock.getViewport();
​
// "Flattening the Earth: Two Thousand Years of Map Projections"
// By John P. Snyder page 240
// https://bit.ly/Uaq6O1
​
var briesemeister = (function() {
  var R = 1; 
  var q = Math.sqrt(1.75);
  return function(λ, φ) {
    var D = 2/(1 + Math.cos(φ) * Math.cos(λ/2));
    var x = R * Math.sqrt(3.5 * D) * Math.cos(φ) * Math.sin(λ/2);
    var y = R * Math.sqrt(2 * D) * Math.sin(φ) / q;
    return [x, y];
  }
})();
​
briesemeister.invert = function(x, y) {
  // TODO
  return d3.geo.hammer.raw.invert(x, y);
};
​
d3.geo.briesemeister = function() {
  return d3.geo.projection(briesemeister);
};
​
​
var projection = d3.geo.briesemeister()
    .rotate([-10, -45])
​
var path = d3.geo.path()
    .projection(projection);
​
var graticule = d3.geo.graticule();
​
var svg = viewport;
VisDock.startChrome();
​
svg.append("path")
    .datum(graticule.outline)
    .attr("class", "background")
    .attr("d", path);
​
svg.selectAll(".graticule")
    .data(graticule.lines)
  .enter().append("path")
    .attr("class", "graticule")
    .attr("d", path);
​
svg.append("path")
    .datum(graticule.outline)
    .attr("class", "foreground")
    .attr("d", path);
VisDock.finishChrome();
​
d3.json("/VisDockHub/raw/9082845/world-110m.json", function(error, world) {
  VisDock.startChrome();
  svg.insert("path", ".graticule")
      .datum(topojson.object(world, world.objects.land))
      .attr("class", "massland")
      .attr("d", path);
​
  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; }))
      .attr("class", "boundary")
      .attr("d", path);
      
    var country = svg.selectAll(".countries")
      .data(topojson.object(world, world.objects.countries).geometries)
    .enter().append("g")
      .attr("class", "countries")        
  country.append("path")
      .attr("class", "land")
      .attr("d", path);    
  VisDock.finishChrome();
});
​
​
VisDock.eventHandler = {
    getHitsPolygon : function(points, inclusive) {
        var shapebound = new createPolygon(points);
        return shapebound.intersectPath(d3.selectAll(".land")[0], inclusive)
    },
    getHitsLine : function(points, inclusive) {
        var shapebound = new createLine(points);
        return shapebound.intersectPath(d3.selectAll(".land")[0], inclusive)
    },
    getHitsEllipse : function(points, inclusive) {
        var shapebound = new createEllipse(points);
        return shapebound.intersectPath(d3.selectAll(".land")[0], inclusive)
    },
    setColor : function(hits) {
        QueryManager.layers[num - 1] = [];
        for (var i = 0; i < hits.length; i++) {
            var str = hits[i].getAttributeNS(null, "transform");
            var d = hits[i].getAttributeNS(null, "d")
            QueryManager.layers[num - 1][i] = d3.select(hits[i].parentNode).append("path").attr("transform", str)
                .attr("d", d)
                .attr("style", "fill: " + VisDock.color[num-1] + "; stroke:" + VisDock.color[num - 1] + "; opacity: 0.5; pointer-events: none")
                .attr("class", "VisDockPathLayer")
        }
    },
    changeColor : function(color, query, index) {
        var vis = VisDock.utils.getQueryVisibility(index);
        for (var i = 0; i < query.length; i++) {
            query[i][0][0].setAttributeNS(null, "style", "stroke: " + color + "; fill:none; opacity: " + vis)
        }
    },
    changeVisibility : function(vis, query, index) {
        for (var i = 0; i < query.length; i++) {
            var color = query[i][0][0].getAttributeNS(null, "style").split(";")[1]
            query[i][0][0].setAttributeNS(null, "style", "fill: none;" + color + "; opacity: " + vis)
        }
    },
    removeColor : function(hits, index) {
        for (var i = 0; i < hits.length; i++) {
            hits[i].remove();
        }
    },
    QueryClick : function(query, index) {
​
    }
}
BirdView.init(viewport, 960, 700)
d3.select(self.frameElement).style("width", "960px")
d3.select(self.frameElement).style("height", "700px")
</script>
    