Skip to content

Instantly share code, notes, and snippets.

@syntagmatic

syntagmatic/challenge.js

Last active October 7, 2015 09:08
Download ZIP

Revisions

  1. syntagmatic revised this gist Aug 16, 2015. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. syntagmatic renamed this gist Jul 20, 2012. 1 changed file with 0 additions and 0 deletions.
    0 challange.js → challenge.js
    View file
    File renamed without changes.
  3. syntagmatic revised this gist Jul 20, 2012. 2 changed files with 1 addition and 1 deletion.
    0 pack.js → challange.js
    View file
    File renamed without changes.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,6 @@
    </head>
    <body>
    <div id="chart"></div>
    <script type="text/javascript" src="pack.js"></script>
    <script type="text/javascript" src="challenge.js"></script>
    </body>
    </html>
  4. syntagmatic revised this gist Jul 19, 2012. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,10 +6,8 @@
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <style>
    circle {
    fill: rgba(31, 119, 180, 0.3);
    fill-opacity: .25;
    stroke: rgba(31, 119, 180, 0.5);
    stroke-width: 1px;
    fill: none;0
    stroke: none;
    }

    circle.leaf {
  5. syntagmatic revised this gist Jul 19, 2012. No changes.
  6. syntagmatic revised this gist Jul 19, 2012. No changes.
  7. syntagmatic revised this gist Jul 19, 2012. 2 changed files with 37 additions and 47 deletions.
    72 changes: 32 additions & 40 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,40 +1,32 @@
    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; });

    });
    <!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: rgba(31, 119, 180, 0.3);
    fill-opacity: .25;
    stroke: rgba(31, 119, 180, 0.5);
    stroke-width: 1px;
    }

    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="pack.js"></script>
    </body>
    </html>
    12 changes: 5 additions & 7 deletions pack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    var width = 960,
    height = 500,
    format = d3.format(",d");
    height = 500;

    var pack = d3.layout.pack()
    .size([width - 4, height - 4])
    @@ -17,7 +16,6 @@ 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)
    @@ -26,15 +24,15 @@ d3.csv("nutrients.csv", function(csv) {
    .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
    vis.data([data]).selectAll("circle")
    .data(pack.nodes)
    .transition()
    node.transition()
    .duration(3000)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("r", function(d) { return d.r; });
  8. syntagmatic revised this gist Jul 19, 2012. No changes.
  9. syntagmatic revised this gist Jul 19, 2012. 1 changed file with 40 additions and 32 deletions.
    72 changes: 40 additions & 32 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,40 @@
    <!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: rgba(31, 119, 180, 0.3);
    fill-opacity: .25;
    stroke: rgba(31, 119, 180, 0.5);
    stroke-width: 1px;
    }

    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="pack.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; });

    });
  10. syntagmatic revised this gist Jul 19, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Circle Packing</title>
    <title>Circle Packing Transition</title>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <style>
    circle {
    2 changes: 1 addition & 1 deletion readme.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Simple pack layout with buggy transition
    A simple pack layout transition
  11. syntagmatic revised this gist Jul 19, 2012. 2 changed files with 11 additions and 33 deletions.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    stroke-width: 1px;
    }

    .leaf circle {
    circle.leaf {
    fill: rgba(31, 119, 180, 0.7);
    stroke: rgb(31, 119, 180);
    stroke-width: 2px;
    42 changes: 10 additions & 32 deletions pack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,48 +17,26 @@ d3.csv("nutrients.csv", function(csv) {
    // put csv into a data structure pack layout will accept
    var data = { name: "cheeses", children: csv };

    var node = vis.data([data]).selectAll("g.node")

    // draw bubble chart
    var node = vis.data([data]).selectAll("circle")
    .data(pack.nodes)
    .enter().append("g")
    .enter().append("circle")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

    node.append("circle")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("r", function(d) { return d.r; });

    node.filter(function(d) { return !d.children; }).append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.name.substring(0, d.r / 3); });



    // change pack value
    pack.value(function(d) { return d["protein (g)"]; });

    var node = vis.data([data]).selectAll("g.node")
    .data(pack.nodes)
    .transition()
    .duration(3000)
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.selectAll("circle")
    // transition chart
    vis.data([data]).selectAll("circle")
    .data(pack.nodes)
    .transition()
    .duration(3000)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("r", function(d) { return d.r; });

    node.selectAll("title")
    .transition()
    .duration(3000)
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

    node.selectAll("text")
    .transition()
    .duration(3000)
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.name.substring(0, d.r / 3); });
    });
  12. syntagmatic revised this gist Jul 19, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    var width = 960,
    height = 960,
    height = 500,
    format = d3.format(",d");

    var pack = d3.layout.pack()
  13. syntagmatic created this gist Jul 19, 2012.
    32 changes: 32 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Circle Packing</title>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <style>
    circle {
    fill: rgba(31, 119, 180, 0.3);
    fill-opacity: .25;
    stroke: rgba(31, 119, 180, 0.5);
    stroke-width: 1px;
    }

    .leaf circle {
    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="pack.js"></script>
    </body>
    </html>
    90 changes: 90 additions & 0 deletions nutrients.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    "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
    64 changes: 64 additions & 0 deletions pack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    var width = 960,
    height = 960,
    format = d3.format(",d");

    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 };

    var node = vis.data([data]).selectAll("g.node")
    .data(pack.nodes)
    .enter().append("g")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

    node.append("circle")
    .attr("r", function(d) { return d.r; });

    node.filter(function(d) { return !d.children; }).append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.name.substring(0, d.r / 3); });



    pack.value(function(d) { return d["protein (g)"]; });

    var node = vis.data([data]).selectAll("g.node")
    .data(pack.nodes)
    .transition()
    .duration(3000)
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.selectAll("circle")
    .transition()
    .duration(3000)
    .attr("r", function(d) { return d.r; });

    node.selectAll("title")
    .transition()
    .duration(3000)
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

    node.selectAll("text")
    .transition()
    .duration(3000)
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.name.substring(0, d.r / 3); });
    });
    1 change: 1 addition & 0 deletions readme.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Simple pack layout with buggy transition