A simple pack layout transition
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Circle Packing Transition</title>
<script type="text/javascript" src="//d3js.org/d3.v2.js"></script>
<style>
circle {
fill: none;0
stroke: none;
}
circle.leaf {
fill: rgba(31, 119, 180, 0.7);
stroke: rgb(31, 119, 180);
stroke-width: 2px;
fill-opacity: 1;
}
text {
fill: #fff;
font: bold 10px sans-serif;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="challenge.js"></script>
</body>
</html>var width = 960,
height = 500;
var pack = d3.layout.pack()
.size([width - 4, height - 4])
.value(function(d) { return d["water (g)"]; });
var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "pack")
.append("g")
.attr("transform", "translate(2, 2)");
d3.csv("nutrients.csv", function(csv) {
// put csv into a data structure pack layout will accept
var data = { name: "cheeses", children: csv };
// draw bubble chart
var node = vis.data([data]).selectAll("circle")
.data(pack.nodes)
.enter().append("circle")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("r", function(d) { return d.r; });
// change pack value
pack.value(function(d) { return d["protein (g)"]; });
// rebind data
vis.data([data]).selectAll("circle")
.data(pack.nodes);
// transition chart
node.transition()
.duration(3000)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("r", function(d) { return d.r; });
});"name","group","protein (g)","calcium (g)","sodium (g)","fiber (g)","vitaminc (g)","potassium (g)","carbohydrate (g)","sugars (g)","fat (g)","water (g)","calories","saturated (g)","monounsat (g)","polyunsat (g)","id"
"Cheese fondue","Dairy and Egg Products",14.23,0.476,0.132,,0,0.105,3.77,,13.47,61.61,229,8.721,3.563,0.484,27488
"Cheese food, cold pack, american","Dairy and Egg Products",19.66,0.497,0.966,,0,0.363,8.32,,24.46,43.12,331,15.355,7.165,0.719,27489
"Cheese food, imitation","Dairy and Egg Products",22.4,0.552,1.239,,0,0.336,8.8,8.21,1.3,63.8,137,0.81,0.38,0.048,27490
"Cheese food, pasteurized process, american, with di sodium phosphate","Dairy and Egg Products",19.61,0.574,1.596,,0,0.279,7.29,7.43,24.6,43.15,328,15.443,7.206,0.723,27491
"Cheese food, pasteurized process, american, without di sodium phosphate","Dairy and Egg Products",18.4,0.57,1.265,,0,0.291,7.83,7.43,25.18,43.21,330,14.895,7.214,1.108,27492
"Cheese food, pasteurized process, swiss","Dairy and Egg Products",21.92,0.723,1.552,,0,0.284,4.5,,24.14,43.67,323,15.487,6.801,0.6,27493
"Cheese product, pasteurized process, american, reduced fat, fortified with vitamin D","Dairy and Egg Products",17.6,0.529,1.587,,0,0.33,10.6,8.02,14.1,51.8,240,8.85,4.13,0.41,27494
"Cheese product, pasteurized process, cheddar or american, reduced fat","Dairy and Egg Products",17.6,0.529,1.587,,0,0.33,10.6,8.02,14.1,51.8,240,8.85,4.13,0.41,27495
"Cheese sauce, prepared from recipe","Dairy and Egg Products",10.33,0.311,0.493,0.1,0.0006,0.142,5.48,0.19,14.92,66.86,197,8.034,4.735,1.397,27496
"Cheese spread, cream cheese base","Dairy and Egg Products",7.1,0.071,0.673,,0,0.112,3.5,3.5,28.6,58.5,295,18.02,8.071,1.033,27497
"Cheese spread, pasteurized process, american, with di sodium phosphate","Dairy and Egg Products",16.41,0.562,1.625,,0,0.242,8.73,,21.23,47.65,290,13.327,6.219,0.624,27498
"Cheese spread, pasteurized process, american, without di sodium phosphate","Dairy and Egg Products",16.41,0.562,1.345,,0,0.242,8.73,7.32,21.23,47.65,290,13.327,6.219,0.624,27499
"Cheese substitute, mozzarella","Dairy and Egg Products",11.47,0.61,0.685,,0.0001,0.455,23.67,23.67,12.22,47.36,248,3.711,6.243,1.738,27500
"Cheese, Mexican, blend, reduced fat","Dairy and Egg Products",24.69,1.146,0.776,,0,0.093,3.41,0.56,19.4,48.2,282,11.58,5.02,0.75,27501
"Cheese, american cheddar, imitation","Dairy and Egg Products",16.7,0.562,1.345,,0,0.242,11.6,7.74,14,53.1,239,8.79,4.102,0.409,27502
"Cheese, blue","Dairy and Egg Products",21.4,0.528,1.395,,0,0.256,2.34,0.5,28.74,42.41,353,18.669,7.778,0.8,27503
"Cheese, brick","Dairy and Egg Products",23.24,0.674,0.56,,0,0.136,2.79,0.51,29.68,41.11,371,18.764,8.598,0.784,27504
"Cheese, brie","Dairy and Egg Products",20.75,0.184,0.629,,0,0.152,0.45,0.45,27.68,48.42,334,17.41,8.013,0.826,27505
"Cheese, camembert","Dairy and Egg Products",19.8,0.388,0.842,,0,0.187,0.46,0.46,24.26,51.8,300,15.259,7.023,0.724,27506
"Cheese, caraway","Dairy and Egg Products",25.18,0.673,0.69,,0,0.093,3.06,,29.2,39.28,376,18.584,8.275,0.83,27507
"Cheese, cheddar","Dairy and Egg Products",24.9,0.721,0.621,,0,0.098,1.28,0.52,33.14,36.75,403,21.092,9.391,0.942,27508
"Cheese, cheshire","Dairy and Egg Products",23.37,0.643,0.7,,0,0.095,4.78,,30.6,37.65,387,19.475,8.671,0.87,27509
"Cheese, colby","Dairy and Egg Products",23.76,0.685,0.604,,0,0.127,2.57,0.52,32.11,38.2,394,20.218,9.28,0.953,27510
"Cheese, cottage, creamed, large or small curd","Dairy and Egg Products",11.12,0.083,0.364,,0,0.104,3.38,2.67,4.3,79.79,98,1.718,0.778,0.123,27511
"Cheese, cottage, creamed, with fruit","Dairy and Egg Products",10.69,0.053,0.344,0.2,0.0014,0.09,4.61,2.38,3.85,79.64,97,2.311,1.036,0.124,27512
"Cheese, cottage, lowfat, 1% milkfat","Dairy and Egg Products",12.39,0.061,0.406,,0,0.086,2.72,2.72,1.02,82.48,72,0.645,0.291,0.031,27513
"Cheese, cottage, lowfat, 1% milkfat, lactose reduced","Dairy and Egg Products",12.4,0.053,0.22,0.6,0,0.086,3.2,2.6,1,82.5,74,0.64,0.29,0.03,27514
"Cheese, cottage, lowfat, 1% milkfat, no sodium added","Dairy and Egg Products",12.4,0.061,0.013,,0,0.086,2.7,2.7,1,83.5,72,0.632,0.284,0.031,27515
"Cheese, cottage, lowfat, 1% milkfat, with vegetables","Dairy and Egg Products",10.9,0.056,0.403,,0.004,0.086,3,3,1,83.5,67,0.619,0.282,0.039,27516
"Cheese, cottage, lowfat, 2% milkfat","Dairy and Egg Products",11.83,0.091,0.33,,0,0.084,3.66,3.67,2.45,80.69,86,0.979,0.443,0.07,27517
"Cheese, cottage, nonfat, uncreamed, dry, large or small curd","Dairy and Egg Products",10.34,0.086,0.33,,0,0.137,6.66,1.85,0.29,81.01,72,0.169,0.079,0.003,27518
"Cheese, cottage, with vegetables","Dairy and Egg Products",10.9,0.056,0.403,0.1,0.004,0.086,3,0.37,4.2,80.3,95,2.646,1.189,0.14,27519
"Cheese, cream","Dairy and Egg Products",5.93,0.098,0.321,,0,0.138,4.07,3.21,34.24,54.44,342,19.292,8.62,1.437,27520
"Cheese, cream, fat free","Dairy and Egg Products",15.69,0.351,0.702,,0,0.278,7.66,5.48,1,71.87,105,0.644,0.25,0.057,27521
"Cheese, cream, low fat","Dairy and Egg Products",7.85,0.148,0.47,,0,0.247,8.13,5.82,15.28,66.72,201,9.098,3.996,0.658,27522
"Cheese, dry white, queso seco","Dairy and Egg Products",24.51,0.661,1.808,,0,0.116,2.04,0.55,24.35,42.17,325,13.718,6.418,1.244,27523
"Cheese, edam","Dairy and Egg Products",24.99,0.731,0.965,,0,0.188,1.43,1.43,27.8,41.56,357,17.572,8.125,0.665,27524
"Cheese, feta","Dairy and Egg Products",14.21,0.493,1.116,,0,0.062,4.09,4.09,21.28,55.22,264,14.946,4.623,0.591,27525
"Cheese, fontina","Dairy and Egg Products",25.6,0.55,0.8,,0,0.064,1.55,1.55,31.14,37.92,389,19.196,8.687,1.654,27526
"Cheese, fresh, queso fresco","Dairy and Egg Products",18.09,0.566,0.751,,0,0.129,2.98,2.32,23.82,51.42,299,12.94,5.966,1.106,27527
"Cheese, gjetost","Dairy and Egg Products",9.65,0.4,0.6,,0,1.409,42.65,,29.51,13.44,466,19.16,7.879,0.938,27528
"Cheese, goat, hard type","Dairy and Egg Products",30.52,0.895,0.346,,0,0.048,2.17,2.17,35.59,29.01,452,24.609,8.117,0.845,27529
"Cheese, goat, semisoft type","Dairy and Egg Products",21.58,0.298,0.515,,0,0.158,2.54,2.54,29.84,45.52,364,20.639,6.808,0.709,27530
"Cheese, goat, soft type","Dairy and Egg Products",18.52,0.14,0.368,,0,0.026,0.89,0.89,21.08,60.75,268,14.575,4.807,0.501,27531
"Cheese, gouda","Dairy and Egg Products",24.94,0.7,0.819,,0,0.121,2.22,2.22,27.44,41.46,356,17.614,7.747,0.657,27532
"Cheese, gruyere","Dairy and Egg Products",29.81,1.011,0.336,,0,0.081,0.36,0.36,32.34,33.19,413,18.913,10.043,1.733,27533
"Cheese, limburger","Dairy and Egg Products",20.05,0.497,0.8,,0,0.128,0.49,0.49,27.25,48.42,327,16.746,8.606,0.495,27534
"Cheese, low fat, cheddar or colby","Dairy and Egg Products",24.35,0.415,0.612,,0,0.066,1.91,0.52,7,63.1,173,4.342,2.082,0.222,27535
"Cheese, low-sodium, cheddar or colby","Dairy and Egg Products",24.35,0.703,0.021,,0,0.112,1.91,0.49,32.62,38.98,398,20.768,9.189,0.972,27536
"Cheese, mexican, queso anejo","Dairy and Egg Products",21.44,0.68,1.131,,0,0.087,4.63,4.63,29.98,38.06,373,19.033,8.528,0.901,27537
"Cheese, mexican, queso asadero","Dairy and Egg Products",22.6,0.661,0.655,,0,0.086,2.87,2.87,28.26,42.16,356,17.939,8.038,0.85,27538
"Cheese, mexican, queso chihuahua","Dairy and Egg Products",21.56,0.651,0.617,,0,0.052,5.56,5.56,29.68,39.13,374,18.843,8.443,0.892,27539
"Cheese, monterey","Dairy and Egg Products",24.48,0.746,0.536,,0,0.081,0.68,0.5,30.28,41.01,373,19.066,8.751,0.899,27540
"Cheese, monterey, low fat","Dairy and Egg Products",28.2,0.705,0.564,,0,0.081,0.7,0.56,21.6,46,310,14.04,5.64,0.84,27541
"Cheese, mozzarella, low sodium","Dairy and Egg Products",27.5,0.731,0.016,,0,0.095,3.1,1.23,17.1,49.9,280,10.867,4.844,0.509,27542
"Cheese, mozzarella, nonfat","Dairy and Egg Products",31.7,0.961,0.743,1.8,0,0.106,3.5,1.48,,60.2,141,,,,27543
"Cheese, mozzarella, part skim milk","Dairy and Egg Products",24.26,0.782,0.619,,0,0.084,2.77,1.13,15.92,53.78,254,10.114,4.51,0.472,27544
"Cheese, mozzarella, part skim milk, low moisture","Dairy and Egg Products",25.96,0.731,0.652,,0,0.095,3.83,0.6,20.03,46.46,302,10.877,4.85,0.508,27545
"Cheese, mozzarella, whole milk","Dairy and Egg Products",22.17,0.505,0.627,,0,0.076,2.19,1.03,22.35,50.01,300,13.152,6.573,0.765,27546
"Cheese, mozzarella, whole milk, low moisture","Dairy and Egg Products",21.6,0.575,0.415,,0,0.075,2.47,1.01,24.64,48.38,318,15.561,7.027,0.778,27547
"Cheese, muenster","Dairy and Egg Products",23.41,0.717,0.628,,0,0.134,1.12,1.12,30.04,41.77,368,19.113,8.711,0.661,27548
"Cheese, muenster, low fat","Dairy and Egg Products",24.7,0.529,0.6,,0,0.134,3.5,3.5,17.6,50.5,271,10.95,5.09,0.65,27549
"Cheese, neufchatel","Dairy and Egg Products",9.15,0.117,0.334,,0,0.152,3.59,3.19,22.78,63.11,253,12.79,5.784,0.97,27550
"Cheese, parmesan, dry grated, reduced fat","Dairy and Egg Products",20,1.109,1.529,,0,0.125,1.37,,20,50.6,265,13.317,6.098,0.462,27551
"Cheese, parmesan, grated","Dairy and Egg Products",38.46,1.109,1.529,,0,0.125,4.06,0.9,28.61,20.84,431,17.301,8.375,1.173,27552
"Cheese, parmesan, hard","Dairy and Egg Products",35.75,1.184,1.602,,0,0.092,3.22,0.8,25.83,29.16,392,16.41,7.515,0.569,27553
"Cheese, parmesan, low sodium","Dairy and Egg Products",41.6,1.376,0.063,,0,0.107,3.7,0.85,29.99,22.2,451,19.051,8.721,0.659,27554
"Cheese, parmesan, shredded","Dairy and Egg Products",37.86,1.253,1.696,,0,0.097,3.41,0.9,27.34,25,415,17.37,8.734,0.661,27555
"Cheese, pasteurized process, american, low fat","Dairy and Egg Products",24.6,0.684,1.43,,0,0.18,3.5,0.59,7,58.9,180,4.41,2.005,0.222,27556
"Cheese, pasteurized process, american, with di sodium phosphate","Dairy and Egg Products",22.15,0.552,1.254,,0,0.169,1.6,0.51,31.25,39.16,375,19.694,8.951,0.99,27557
"Cheese, pasteurized process, american, without di sodium phosphate","Dairy and Egg Products",22.15,0.616,0.65,,0,0.162,1.6,0.51,31.25,39.16,375,19.694,8.951,0.99,27558
"Cheese, pasteurized process, cheddar or american, fat-free","Dairy and Egg Products",22.5,0.689,1.528,,0,0.288,13.4,9.95,0.8,56.9,148,0.504,0.229,0.025,27559
"Cheese, pasteurized process, cheddar or american, low sodium","Dairy and Egg Products",22.2,0.616,0.007,,0,0.162,1.6,0.45,31.19,42.8,376,19.651,8.932,0.988,27560
"Cheese, pasteurized process, pimento","Dairy and Egg Products",22.13,0.614,1.428,0.1,0.0023,0.162,1.73,0.62,31.2,39.08,375,19.663,8.937,0.988,27561
"Cheese, pasteurized process, swiss, low fat","Dairy and Egg Products",25.5,0.684,1.43,,0,0.18,4.3,1.35,5.1,59.1,165,3.303,1.351,0.18,27562
"Cheese, pasteurized process, swiss, with di sodium phosphate","Dairy and Egg Products",24.73,0.772,1.37,,0,0.216,2.1,1.23,25.01,42.31,334,16.045,7.046,0.622,27563
"Cheese, pasteurized process, swiss, without di sodium phosphate","Dairy and Egg Products",24.73,0.772,0.681,,0,0.216,2.1,,25.01,42.31,334,16.045,7.046,0.622,27564
"Cheese, port de salut","Dairy and Egg Products",23.78,0.65,0.534,,0,0.136,0.57,0.57,28.2,45.45,352,16.691,9.338,0.729,27565
"Cheese, provolone","Dairy and Egg Products",25.58,0.756,0.876,,0,0.138,2.14,0.56,26.62,40.95,351,17.078,7.393,0.769,27566
"Cheese, provolone, reduced fat","Dairy and Egg Products",24.7,0.756,0.876,,0,0.138,3.5,0.55,17.6,50.6,274,11.3,4.89,0.51,27567
"Cheese, ricotta, part skim milk","Dairy and Egg Products",11.39,0.272,0.125,,0,0.125,5.14,0.31,7.91,74.41,138,4.927,2.314,0.26,27568
"Cheese, ricotta, whole milk","Dairy and Egg Products",11.26,0.207,0.084,,0,0.105,3.04,0.27,12.98,71.7,174,8.295,3.627,0.385,27569
"Cheese, romano","Dairy and Egg Products",31.8,1.064,1.2,,0,0.086,3.63,0.73,26.94,30.91,387,17.115,7.838,0.593,27570
"Cheese, roquefort","Dairy and Egg Products",21.54,0.662,1.809,,0,0.091,2,,30.64,39.38,369,19.263,8.474,1.32,27571
"Cheese, swiss","Dairy and Egg Products",26.93,0.791,0.192,,0,0.077,5.38,1.32,27.8,37.12,380,17.779,7.274,0.972,27572
"Cheese, swiss, low fat","Dairy and Egg Products",28.4,0.961,0.26,,0,0.111,3.4,1.33,5.1,59.6,173,3.304,1.351,0.18,27573
"Cheese, swiss, low sodium","Dairy and Egg Products",28.4,0.961,0.014,,0,0.111,3.4,1.31,27.4,37.8,374,17.744,7.256,0.968,27574
"Cheese, tilsit","Dairy and Egg Products",24.41,0.7,0.753,,0,0.065,1.88,,25.98,42.86,340,16.775,7.136,0.721,27575
"Cheese, white, queso blanco","Dairy and Egg Products",20.38,0.69,0.704,,0,0.126,2.53,1.76,24.31,48.7,310,13.661,6.459,1.149,27576