Skip to content

Instantly share code, notes, and snippets.

@plcgi1

plcgi1/bubble.js

Forked from enjalot/bubble.js
Created June 10, 2016 07:39
Show Gist options
  • Save plcgi1/d0eb25c1df1705e6407a30531a49b614 to your computer and use it in GitHub Desktop.
Save plcgi1/d0eb25c1df1705e6407a30531a49b614 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @enjalot enjalot revised this gist Oct 7, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -57,7 +57,7 @@ console.log(snode);

    snode.select("text")
    .transition()
    .delay()
    .delay(100)
    .duration(500)
    .text(function(d) {
    var s = d.className + ": " + format(d.value);
    @@ -67,7 +67,7 @@ console.log(snode);

    snode.select("circle")
    .transition()
    .delay()
    .delay(100)
    .duration(500)
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return fill(d.packageName); });
  2. @enjalot enjalot revised this gist Oct 7, 2011. 1 changed file with 2 additions and 8 deletions.
    10 changes: 2 additions & 8 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -51,17 +51,11 @@ function switchIt() {

    var snode = vis.selectAll("g.node")
    .data(nodes, function(d,i) {
    console.log("data: " + i + " " + d.className);
    return d.className; });

    console.log(snode);

    var snode2 = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; })).enter();
    console.log(snode2);

    snode.selectAll("title")
    snode.select("text")
    .transition()
    .delay()
    .duration(500)
    @@ -71,7 +65,7 @@ console.log(snode2);
    return s;
    });

    snode.selectAll("circle")
    snode.select("circle")
    .transition()
    .delay()
    .duration(500)
  3. @enjalot enjalot revised this gist Oct 7, 2011. 1 changed file with 10 additions and 7 deletions.
    17 changes: 10 additions & 7 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -41,16 +41,19 @@ console.log(node);


    function switchIt() {
    console.log("switching");
    for (i=0;i <= keeper.children.length-1;i++) {
    keeper.children[i].size = keeper.children[i].size/2;
    keeper.children[i].name = "" + i;
    };
    var nodes = bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; });
    nodes.forEach(function(n,i) {
    n.r/= 2;
    });



    var snode = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }));
    .data(nodes, function(d,i) {
    console.log("data: " + i + " " + d.className);
    return d.className; });

    console.log(snode);

    var snode2 = vis.selectAll("g.node")
  4. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -54,7 +54,8 @@ function switchIt() {
    console.log(snode);

    var snode2 = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper)).enter();
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; })).enter();
    console.log(snode2);

    snode.selectAll("title")
  5. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -54,8 +54,7 @@ function switchIt() {
    console.log(snode);

    var snode2 = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .enter();
    .data(bubble.nodes(classes(keeper)).enter();
    console.log(snode2);

    snode.selectAll("title")
  6. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -50,12 +50,12 @@ function switchIt() {

    var snode = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }))
    .filter(function(d) { return !d.children; }));
    console.log(snode);

    var snode2 = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .enter()
    .enter();
    console.log(snode2);

    snode.selectAll("title")
  7. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 12 additions and 6 deletions.
    18 changes: 12 additions & 6 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ var vis = d3.select("#chart").append("svg:svg")

    // keeper = json;
    console.log(keeper);
    node = vis.selectAll("g.node")
    var node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }))
    .enter().append("svg:g")
    @@ -41,18 +41,24 @@ console.log(node);


    function switchIt() {

    console.log("switching");
    for (i=0;i <= keeper.children.length-1;i++) {
    keeper.children[i].size = keeper.children[i].size/2;
    keeper.children[i].name = "" + i;
    };


    node = vis.selectAll("g.node")
    var snode = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }))
    console.log(snode);

    var snode2 = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .enter()
    console.log(snode2);

    node.selectAll("title")
    snode.selectAll("title")
    .transition()
    .delay()
    .duration(500)
    @@ -62,14 +68,14 @@ function switchIt() {
    return s;
    });

    node.selectAll("circle")
    snode.selectAll("circle")
    .transition()
    .delay()
    .duration(500)
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return fill(d.packageName); });

    console.log(node);

    };

    // Returns a flattened hierarchy containing all leaf nodes under the root.
  8. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 8 additions and 3 deletions.
    11 changes: 8 additions & 3 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -43,8 +43,9 @@ console.log(node);
    function switchIt() {

    for (i=0;i <= keeper.children.length-1;i++) {
    keeper.children[i].size
    = keeper.children[i].size/2;};
    keeper.children[i].size = keeper.children[i].size/2;
    keeper.children[i].name = "" + i;
    };


    node = vis.selectAll("g.node")
    @@ -55,7 +56,11 @@ function switchIt() {
    .transition()
    .delay()
    .duration(500)
    .text(function(d) { return d.className + ": " + format(d.value); });
    .text(function(d) {
    var s = d.className + ": " + format(d.value);
    console.log(s);
    return s;
    });

    node.selectAll("circle")
    .transition()
  9. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,8 @@
    <div id="chart"></div>
    <input type="button" id="knop" class="buttons" value=">1>">

    <script type="text/javascript" src="bubble.js"></script>
    <script type="text/javascript" src="flaretest.json"></script>
    <script type="text/javascript" src="bubble.js"></script>

    </body>
    </html>
  10. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@ var vis = d3.select("#chart").append("svg:svg")
    //d3.json("../data/flaretest.json", function(json) {

    // keeper = json;

    console.log(keeper);
    node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }))
  11. @enjalot enjalot revised this gist Oct 6, 2011. 3 changed files with 5 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions bubble.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,9 +13,9 @@ var vis = d3.select("#chart").append("svg:svg")
    .attr("height", r)
    .attr("class", "bubble");

    d3.json("../data/flaretest.json", function(json) {
    //d3.json("../data/flaretest.json", function(json) {

    keeper = json;
    // keeper = json;

    node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    @@ -82,4 +82,4 @@ function classes(root) {

    d3.select("#knop").on("click", switchIt);

    });
    //});
    2 changes: 1 addition & 1 deletion flaretest.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    {
    var keeper = {
    "naam": "things",
    "children": [
    {
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,5 +12,6 @@
    <input type="button" id="knop" class="buttons" value=">1>">

    <script type="text/javascript" src="bubble.js"></script>
    <script type="text/javascript" src="flaretest.json"></script>
    </body>
    </html>
  12. @enjalot enjalot revised this gist Oct 6, 2011. 2 changed files with 1 addition and 1 deletion.
    0 bubble met transitie.js → bubble.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
    @@ -11,6 +11,6 @@
    <div id="chart"></div>
    <input type="button" id="knop" class="buttons" value=">1>">

    <script type="text/javascript" src="bubble met transitie.js"></script>
    <script type="text/javascript" src="bubble.js"></script>
    </body>
    </html>
  13. @enjalot enjalot revised this gist Oct 6, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,8 @@
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Bubble Chart</title>
    <script type="text/javascript" src="../../D3/d3.js"></script>
    <script type="text/javascript" src="../../D3/d3.layout.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.3.0"></script>
    <link type="text/css" rel="stylesheet" href="bubble.css"/>
    </head>
    <body>
  14. @invalid-email-address Anonymous created this gist Oct 6, 2011.
    85 changes: 85 additions & 0 deletions bubble met transitie.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    var r = 480,
    format = d3.format(",d"),
    fill = d3.scale.category20c();

    var keeper;

    var bubble = d3.layout.pack()
    .sort(null)
    .size([r, r]);

    var vis = d3.select("#chart").append("svg:svg")
    .attr("width", r)
    .attr("height", r)
    .attr("class", "bubble");

    d3.json("../data/flaretest.json", function(json) {

    keeper = json;

    node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }))
    .enter().append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("svg:title")
    .text(function(d) { return d.className + ": " + format(d.value); });

    node.append("svg:circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return fill(d.packageName); });

    node.append("svg:text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.className.substring(0, d.r / 3); });

    console.log(node);



    function switchIt() {

    for (i=0;i <= keeper.children.length-1;i++) {
    keeper.children[i].size
    = keeper.children[i].size/2;};


    node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(keeper))
    .filter(function(d) { return !d.children; }))

    node.selectAll("title")
    .transition()
    .delay()
    .duration(500)
    .text(function(d) { return d.className + ": " + format(d.value); });

    node.selectAll("circle")
    .transition()
    .delay()
    .duration(500)
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return fill(d.packageName); });

    console.log(node);
    };

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
    var classes = [];

    function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
    }

    recurse(null, root);
    return {children: classes};
    }

    d3.select("#knop").on("click", switchIt);

    });
    17 changes: 17 additions & 0 deletions flaretest.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    {
    "naam": "things",
    "children": [
    {
    "name": "bloeb",
    "size": 310023
    },
    {
    "name": "poef",
    "size": 1874900
    },
    {
    "name": "dapp",
    "size": 412440
    }
    ]
    }
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Bubble Chart</title>
    <script type="text/javascript" src="../../D3/d3.js"></script>
    <script type="text/javascript" src="../../D3/d3.layout.js"></script>
    <link type="text/css" rel="stylesheet" href="bubble.css"/>
    </head>
    <body>
    <div id="chart"></div>
    <input type="button" id="knop" class="buttons" value=">1>">

    <script type="text/javascript" src="bubble met transitie.js"></script>
    </body>
    </html>