Skip to content

Instantly share code, notes, and snippets.

@syntagmatic

syntagmatic/challenge.js

Last active October 7, 2015 09:08
Show Gist options
  • Save syntagmatic/3140140 to your computer and use it in GitHub Desktop.
Save syntagmatic/3140140 to your computer and use it in GitHub Desktop.
Download ZIP
Pack Layout Transition Challenge
Raw
readme.MD

A simple pack layout transition

Raw
challenge.js
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; });
});
Raw
index.html
<!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="http://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>
Raw
nutrients.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment