LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


    
    D3 Population Pack Layout with transition and tooltips
    
    
    

    
    
    







D3 Pack Layout with transitions and tooltips

Use mouse to Zoom and Pan. Over circles to show the tooltip

CSS
body {
  background-color: #ccc;
  font-family: 'Open Sans', sans-serif;
}

svg {
  background-color: #fff;   
}


text {
    /* font-size: 11px; */ 
    font-weight: 700;
    pointer-events: none;
}

text.parent {
    fill: #222;
    /*font-size: 28px;*/
    background: #ccc;
}

circle {
    fill: #fff;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

circle.parent {
    fill: #fff;
    fill-opacity: ;
    stroke: #fff;
}

circle.parent:hover {
    stroke-width: .5px;
}


circle.child {
    fill: #ccc;
    stroke: #999;
}

circle.child:hover {
     fill: #fff;
     cursor: pointer;
}



.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  -webkit-transition: opacity 0.3s; /* For Safari 3.1 to 6.0 */
  transition: opacity 0.3s;   
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
JS
var chart = pack();

function loadData(url) {
  d3.json(url, function (nodes) {
    chart.nodes(nodes).render();
  });
}
loadData('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98887/europe.json')

// =============================================
// D3 Script
// =============================================
function pack() {
  var _chart = {};

  var _width = window.innerHeight/1.4, _height = window.innerHeight/1.4,
      _svg,
      _r = _width,
      _x = d3.scale.linear().range([0, _r]),
      _y = d3.scale.linear().range([0, _r]),
      _nodes,
      _bodyG,
      tip;

  var zoomBehavior = d3.behavior.zoom()
  .scaleExtent([1, 4])
  .translate([0,0])

  _chart.render = function () {
    if (!_svg) {
      // Create SVG
      _svg = d3.select("body").append("svg")
      .attr("height", _height)
      .attr("width", _width)
      .call(zoomBehavior.on("zoom", redraw))



      // Init tooltip
      tipCirclePack = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return "" + d.name + ":  " + (d.size) + "";
      })
      _svg.call(tipCirclePack);


    }

    renderBody(_svg);
  };


  /**
         * Zoom/Pan Handler
         */
  function redraw() {

    _bodyG.attr("transform",
                "translate(" + d3.event.translate + ")"
                + " scale(" + d3.event.scale + ")");
  }


  function renderBody(svg) {
    if (!_bodyG) {
      _bodyG = svg.append("g")
      .attr("class", "body")
      .attr("transform", function (d) {
        return "translate(" + (_width - _r) / 2 + "," + (_height - _r) / 2 + ")";
      });
    }

    var pack = d3.layout.pack()
    .size([_r, _r])
    .sort(null)
    .padding(10)
    .value(function (d) {
      return d.size;
    });

    var nodes = pack.nodes(_nodes);
    renderCircles(nodes);
    renderLabels(nodes);
  }


  function renderCircles(nodes) {

    // Select all circles and save the original radius in "rInit"
    var circles = _bodyG.selectAll("circle")
    .data(nodes)
    .attr("rInit", function(d, i) { return d.r })

    // Enter
    circles.enter().append("svg:circle")
    .attr("id", function(d, i) { return "c" + i; })
    .attr("rInit", function(d, i) { return d.r })
    .on('mouseover', function (d,i) {

      // If node has no children, show tooltip and increase the radius of the circle
      if (!d.children) {
        tipCirclePack.show(d)
        var selectedCircle = d3.select("#c" + i)
        selectedCircle.transition().duration(250)
        .attr("r", selectedCircle.attr("rInit") * 1.2);
      }
    })
    .on('mouseout', function (d,i) {
      tipCirclePack.hide(d)

      // Back to original circle radius
      var selectedCircle = d3.select("#c" + i)
      selectedCircle.transition()
      .attr("r", selectedCircle.attr("rInit") );
    })


    // Update
    circles.transition()
    .attr("r", 0)
    .attr("class", function (d) {
      return d.children ? "parent" : "child";
    })
    .transition()
    .duration(function (d, i) {
      return 300;
    })
    .delay(function (d, i) {
      return i * 30;
    })

    .attr("cx", function (d) {return d.x;})
    .attr("cy", function (d) {return d.y;})
    .attr("r", function (d) {return d.r;})


    // Exit
    circles.exit()
    .remove();


  }

  function renderLabels(nodes) {
    var labels = _bodyG.selectAll("text")
    .data(nodes)

    labels.enter().append("svg:text")
    .attr("text-anchor", "middle")

    labels.style("opacity", 0)
    .attr("class", function (d) {
      return d.children ? "parent" : "child";
    })
    .style("font-size", function(d) {
      return d.children ? "27px" : "10px";
    })

    .transition()
    .duration(function (d, i) {
      return 500;
    })
    .delay(function (d, i) {
      return 1000 + (i * 40);
    })
    .attr("x", function (d) {return d.x;})
    .attr("y", function (d) {return d.y;})

    .text(function (d) {
      return d.name;
      // or display label only when there are children
      //return d.children ? d.name : "";
    })
    .style("opacity", function (d) {
      // If node have children set opacity 0.2 otherwise
      // set opacity 1 if radius > 20
      if (d.children)
        return 0.2
        else
          return d.r > 20 ? 1 : 0;
    })

    labels.exit().remove();
  }

  _chart.width = function (w) {
    if (!arguments.length) return _width;
    _width = w;
    return _chart;
  };

  _chart.height = function (h) {
    if (!arguments.length) return _height;
    _height = h;
    return _chart;
  };

  _chart.r = function (r) {
    if (!arguments.length) return _r;
    _r = r;
    return _chart;
  };

  _chart.nodes = function (n) {
    if (!arguments.length) return _nodes;
    _nodes = n;
    return _chart;
  };

  return _chart;
}
Host Instantly Drag and Drop Website Builder

 

Description

Show populations with D3 and Pack Layout. The example includes:: transitions element by element, load json, tooltip, zoom/pan, mouse events and much more
Term
Mon, 11/27/2017 - 22:06

Related Codes

Pen ID
Pen ID
Pen ID