Pack Layout with Transitions

Experimenting with transitions using a pack layout.

forked from matt81m's block: Pack Layout with Transitions

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body {
      background-color: #e9e9e9;
      margin:0;
      padding:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
    }
    figure { margin-top: 45px; height: 100%; }
    svg { width:100%; height: 100% }
    .flex-container {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      height: 30px;
    }
    h3 {
      margin: 0;
      flex: 1;
      height: 100%;
      cursor: pointer;
      font-family: 'Helvetica';
      padding-top:15px;
      padding-bottom: 10px;
      background-color: white;
      color: #666666;
      letter-spacing: 0.5;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      text-align:center;
    }
    h3:hover {
      color: #F06060;
      background-color: #f5f5f5;
    }
    
  </style>
</head>

<body>
  <div class="flex-container">
  	<h3 class="state">State</h3>
  	<h3 class="national">National</h3>
  </div>
  <figure></figure>
  <script>
    
    var margin = {top: 20, right: 20, bottom: 20, left: 20};
    var svg = d3.select("figure").append("svg");
    
    var svgNode = d3.select('svg').node();
    var g = svg.append('g')
    	.attr('transform', 'translate(' + (svgNode.clientWidth/2 - 200) + ',0)')
    
    var ease = 'cubic';
    var diameter = 400;

var pack = d3.layout.pack()
    	.sort(function(a, b) { console.log(a); return a.category < b.cateogory; })
    	.size([diameter, diameter])
    	.padding(20);
    
    var color = d3.scale.ordinal()
    	.range(['#5C4B51', '#8CBEB2', '#F3B562', '#F06060']);
    
    var fontSize = d3.scale.linear()
    	.domain([1, 10])
    	.range([12, 50]);

d3.json('packData.json', function(err, data) {
      
      var nested = d3.nest()
    		.key(function(v) { return v.region; })
    		.entries(data)
      	.map(function(v) {
        	return {
          	region: v['key'],
          	children: v['values']
        	}
      	});
      
      update(nested[0]);
      
      d3.select('.state').on('click', function() {
        update(nested[0])
      });
      
      d3.select('.national').on('click', function() {
        update(nested[1]);
      });
      
    });
    
    function update(data) {
      
			var node = g.selectAll('.node')
      	.data(pack.nodes(data), function(d) { return d.category; });
            
			var enterNodes = node.enter().append('g')
      	.classed('node', true);
      
      enterNodes.append('circle')
      	.classed('circle', true)
      	.attr('fill', function(d) { return color(d.category); })
      	.each(function(d, i) {
        	if (i === 0) { 
        		d3.select(this).attr('fill', 'white');
        	}
      	});
      
      enterNodes.append('text')
      	.text(function(d) { return d.category ? d.category.toUpperCase() : ''; })
      	.attr({
        	fill: 'white',
        	'font-weight': 'bold',
        	'text-anchor': 'middle',
        	'font-family': 'sans-serif'
      	});
      	
      
      node.transition().attr('transform', function(d) {
        return 'translate(' + d.x + ',' + d.y + ')';
      });
      
      node.select('.circle')
      	.transition()
      	.duration(600)
      	.ease(ease)
      	.attr('r', function(d) { return d.r; });
      
      node.select('text')
      	.transition()
      	.duration(600)
      	.ease(ease)
      	.attr('font-size', function(d) { return fontSize(d.value); })
      	.attr('transform', function(d) {
        	return 'translate(0,' + (fontSize(d.value) / 3) + ')';
      	});
      	
      
    }
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js