matt-mcdaniel/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Experimenting with transitions using a pack layout.
forked from matt81m's block: Pack Layout with Transitions

  
## index.html
<!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>

## packData.json
[
  {
    "category": "walk",
    "region": "national",
    "value": "3.08392"
  },
  {
    "category": "walk",
    "region": "state",
    "value": "8.56503"
  },
  {
    "category": "bike",
    "region": "national",
    "value": "8.65901"
  },
  {
    "category": "bike",
    "region": "state",
    "value": "3.41099"
  },
  {
    "category": "run",
    "region": "national",
    "value": "1.51538"
  },
  {
    "category": "run",
    "region": "state",
    "value": "7.79517"
  },
  {
    "category": "swim",
    "region": "national",
    "value": "8.16451"
  },
  {
    "category": "swim",
    "region": "state",
    "value": "4.41115"
  }
]
	<!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>
	[
	{
	"category": "walk",
	"region": "national",
	"value": "3.08392"
	},
	{
	"category": "walk",
	"region": "state",
	"value": "8.56503"
	},
	{
	"category": "bike",
	"region": "national",
	"value": "8.65901"
	},
	{
	"category": "bike",
	"region": "state",
	"value": "3.41099"
	},
	{
	"category": "run",
	"region": "national",
	"value": "1.51538"
	},
	{
	"category": "run",
	"region": "state",
	"value": "7.79517"
	},
	{
	"category": "swim",
	"region": "national",
	"value": "8.16451"
	},
	{
	"category": "swim",
	"region": "state",
	"value": "4.41115"
	}
	]