D3 Examples - VisDock in Zoomable Circle Packing

VisDock in Zoomable Circle Packing
The VisDock toolkit has been integrated into this Zoomable Circle Packet example built with D3.js (found here) by Mike Bostock. Selection tools can be used to query circle node elements in the diagram. Annotations, Pan & Zoom tools and VisDock lenses can be used to help explore the interactive visualization. For more information about VisDock, cick on the link.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.node {
  cursor: pointer;
}
​
.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}
​
.node--root {
  stroke: #777;
  stroke-width: 2px;
}
​
.node--leaf {
  fill: white;
}
​
.label {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
​
.label,
.node--root,
.node--leaf {
  
}
​
</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://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>
​
VisDock.init("body", {width: 1000, height: 1000});
AnnotatedByData.layerTypes = [".node.node--leaf"];
var viewport = VisDock.getViewport();
​
var margin = 10,
    outerDiameter = 960,
    innerDiameter = outerDiameter - margin - margin;
​
var x = d3.scale.linear()
    .range([0, innerDiameter]);
​
var y = d3.scale.linear()
    .range([0, innerDiameter]);
​
var color = d3.scale.linear()
    .domain([-1, 5])
    .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
    .interpolate(d3.interpolateHcl);
​
var pack = d3.layout.pack()
    .padding(2)
    .size([innerDiameter, innerDiameter])
    .value(function(d) { return d.size; })
​
var svg = viewport;
Panel.x = margin;
Panel.y = margin;
Panel.setTransform();
​
d3.json("flare.json", function(error, root) {
  VisDock.startChrome();
  var focus = root,
      nodes = pack.nodes(root);
​
  svg.append("g").selectAll("circle")
      .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return d.children ? color(d.depth) : null; })
      .on("mousedown", function(d) {
        if (this.getAttributeNS(null, "class") != "node node--leaf") 
        return zoom(focus == d ? root : d); });
  var id = 0;
  svg.selectAll(".node.node--leaf").attr("id", function(){
    return "c" + id++;
  })
  svg.append("g").selectAll("text")
      .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? null : "none"; })
      .text(function(d) { return d.name; });
​
  VisDock.finishChrome();
  function zoom(d, i) {
    VisDock.startChrome();
    var focus0 = focus;
    focus = d;
​
    var k = innerDiameter / d.r / 2;
    x.domain([d.x - d.r, d.x + d.r]);
    y.domain([d.y - d.r, d.y + d.r]);
    d3.event.stopPropagation();
​
    var transition = viewport.selectAll("text,.node.node--root,.node.node--leaf,.node").transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .attr("transform", function(d) { 
            return "translate(" + x(d.x) + "," + y(d.y) + ")"; 
            });
​
    transition.filter("circle")
        .attr("r", function(d) { return k * d.r; });
​
    transition.filter("text")
      .filter(function(d) { return d.parent === focus || d.parent === focus0; })
        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
        .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
    VisDock.finishChrome();
  }
});
d3.timer(function(){
    VisDock.startChrome();
    var layers = Panel.panel.selectAll(".VisDockEllipseLayer")[0]
    for (var i = 0; i < layers.length; i++){
        var id = layers[i].getAttribute("id").split("_")[1];
        var t = Panel.panel.select("#"+id).attr("transform");
        var r = Panel.panel.select("#"+id).attr("r")
        layers[i].setAttribute("transform", t)
        layers[i].setAttribute("r", r)
        layers[i].setAttribute("pointer-events", "none")
    }
    AnnotatedByData.update();
    VisDock.finishChrome();
})
​
VisDock.eventHandler = {
    getHitsPolygon: function(points, inclusive){
    
        var shapebound = new createPolygon(points);
        return shapebound.intersectEllipse(d3.selectAll(".node.node--leaf")[0], inclusive)
​
    },
    getHitsEllipse: function(points, inclusive){
​
        var shapebound = new createEllipse(points);
        return shapebound.intersectEllipse(d3.selectAll(".node.node--leaf")[0], inclusive)
​
    },
    getHitsLine: function(points, inclusive){
​
        var shapebound = new createLine(points);
        return shapebound.intersectEllipse(d3.selectAll(".node.node--leaf")[0], inclusive)
​
    },
    setColor: function(hits){
        if (QueryManager.layers[num-1] == undefined) QueryManager.layers[num - 1] = [];
        for (var i=0;i<hits.length;i++){
            var r = hits[i].getAttributeNS(null, "r")
            var str = hits[i].getAttributeNS(null, "transform")
            QueryManager.layers[num-1][i] = d3.select(hits[i].parentNode).append("circle")
                .attr("r", r).attr("style", "fill: " + VisDock.color[num - 1] + ";opacity: 1;")
                .attr("pointer-events", "none")
                .attr("id", "_" + hits[i].getAttribute("id")).attr("class", "VisDockEllipseLayer")
                .attr("transform", str)
        }
    },
    changeColor: function(color, query, index){
        for (var i=0;i<query.length;i++){
            var vis = query[i].attr("style").split(";")[1];
            query[i].attr("style","fill: " + color + ";" + vis)
        }
    },
    changeVisibility: function(vis, query, index){
        for (var i=0;i<query.length;i++){
            var color = query[i].attr("style").split(";")[0]
            query[i].attr("style", color + ";opacity:" + vis)
        }
    },
    removeColor: function(hits, index){
        for (var i=0;i<hits.length;i++){
            hits[i].remove();
        }
    }
}
BirdView.init(viewport, 1000, 1000)
d3.select(self.frameElement).style("height", "1000px");
d3.select(self.frameElement).style("width", "1000px");
</script>
    