Skip to content

Instantly share code, notes, and snippets.

@matt-mcdaniel
Created January 30, 2016 02:31
Show Gist options
  • Save matt-mcdaniel/77e86eee16343ff286ed to your computer and use it in GitHub Desktop.
Save matt-mcdaniel/77e86eee16343ff286ed to your computer and use it in GitHub Desktop.
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>
[
{
"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"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment