Skip to content

Instantly share code, notes, and snippets.

@eesur

eesur/README.md

Last active August 29, 2015 13:58
Download ZIP

Revisions

  1. eesur revised this gist Apr 3, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    ### Aim
    Produce a tree layout that will display json data from spreedsheet data

  2. Sundar Singh revised this gist Apr 3, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@
    ### Aim
    Produce a tree layout that will display json data from spreedsheet data


    ROOT
    ```
    ROOT
    |
    ·―― A
    | |
    @@ -62,7 +62,7 @@ ROOT
    ·―― D 03.1
    |
    ·―― D 03.2

    ```

    ### Info and sources
    Based on [From tree to cluster and radial projectionn](http://javadude.wordpress.com/2012/06/20/d3-js-from-tree-to-cluster-and-radial-projection/#more-2292)
  3. Sundar Singh revised this gist Apr 3, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,9 @@ ROOT
    | |
    | ·―― C 01.5
    | |
    ·―― D ·―― D 01
    ·―― D
    | |
    ·―― D 01
    |
    ·―― D 02
    |
  4. Sundar Singh revised this gist Apr 3, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,7 @@ ROOT
    | |
    | ·―― B 05
    | |
    ·―― C |
    ·―― C
    | |
    | ·―― C 01
    | |
  5. Sundar Singh revised this gist Apr 3, 2014. 1 changed file with 56 additions and 56 deletions.
    112 changes: 56 additions & 56 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,62 +4,62 @@ Produce a tree layout that will display json data from spreedsheet data


    ROOT
    |
    ·―― A
    | |
    | ·―― A 01
    | |
    | ·―― A 02
    | |
    | ·―― A 03
    | |
    | ·―― A 04
    | |
    | ·―― A 05
    |
    ·―― B
    | |
    | ·―― B 01
    | |
    | ·―― B 02
    | |
    | ·―― B 02.1
    | |
    | ·―― B 02.2
    | |
    | ·―― B 02.3
    | |
    | ·―― B 02.4
    | |
    | ·―― B 03
    | |
    | ·―― B 04
    | |
    | ·―― B 05
    | |
    ·―― C |
    | |
    | ·―― C 01
    | |
    | ·―― C 01.1
    | |
    | ·―― C 01.2
    | |
    | ·―― C 01.3
    | |
    | ·―― C 01.4
    | |
    | ·―― C 01.5
    | |
    ·―― D ·―― D 01
    |
    ·―― D 02
    |
    ·―― D 03
    |
    ·―― D 03.1
    |
    ·―― D 03.2
    |
    ·―― A
    | |
    | ·―― A 01
    | |
    | ·―― A 02
    | |
    | ·―― A 03
    | |
    | ·―― A 04
    | |
    | ·―― A 05
    |
    ·―― B
    | |
    | ·―― B 01
    | |
    | ·―― B 02
    | |
    | ·―― B 02.1
    | |
    | ·―― B 02.2
    | |
    | ·―― B 02.3
    | |
    | ·―― B 02.4
    | |
    | ·―― B 03
    | |
    | ·―― B 04
    | |
    | ·―― B 05
    | |
    ·―― C |
    | |
    | ·―― C 01
    | |
    | ·―― C 01.1
    | |
    | ·―― C 01.2
    | |
    | ·―― C 01.3
    | |
    | ·―― C 01.4
    | |
    | ·―― C 01.5
    | |
    ·―― D ·―― D 01
    |
    ·―― D 02
    |
    ·―― D 03
    |
    ·―― D 03.1
    |
    ·―― D 03.2


    ### Info and sources
  6. Sundar Singh created this gist Apr 3, 2014.
    68 changes: 68 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@

    ### Aim
    Produce a tree layout that will display json data from spreedsheet data


    ROOT
    |
    ·―― A
    | |
    | ·―― A 01
    | |
    | ·―― A 02
    | |
    | ·―― A 03
    | |
    | ·―― A 04
    | |
    | ·―― A 05
    |
    ·―― B
    | |
    | ·―― B 01
    | |
    | ·―― B 02
    | |
    | ·―― B 02.1
    | |
    | ·―― B 02.2
    | |
    | ·―― B 02.3
    | |
    | ·―― B 02.4
    | |
    | ·―― B 03
    | |
    | ·―― B 04
    | |
    | ·―― B 05
    | |
    ·―― C |
    | |
    | ·―― C 01
    | |
    | ·―― C 01.1
    | |
    | ·―― C 01.2
    | |
    | ·―― C 01.3
    | |
    | ·―― C 01.4
    | |
    | ·―― C 01.5
    | |
    ·―― D ·―― D 01
    |
    ·―― D 02
    |
    ·―― D 03
    |
    ·―― D 03.1
    |
    ·―― D 03.2


    ### Info and sources
    Based on [From tree to cluster and radial projectionn](http://javadude.wordpress.com/2012/06/20/d3-js-from-tree-to-cluster-and-radial-projection/#more-2292)

    [Collapsible Tree](http://bl.ocks.org/mbostock/4339083)
    145 changes: 145 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,145 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>JSON into tree layout</title> <!-- http://bl.ocks.org/anotherjavadude/2964485 -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <style>

    body {font-family: monospace; line-height: 160%; font-size: 18px; }

    svg {
    font: 14px monospace;
    fill : #333;
    }
    .link {
    fill: none;
    stroke: #eee;
    stroke-width: 1.5px;
    }
    button {border: 1px dotted #ccc; background: white; font-family: monospace; padding: 10px 20px; font-size: 18px; margin: 20px 10px 20px 0; color: red;}
    button:focus { background-color:yellow; outline: none;}
    nav {display: block; position: fixed; left: 10px; top: 10px; background: transparent; ;}

    </style>

    </head>

    <body>

    <nav>
    <button id="tree">Tree</button>
    <button id="cluster">Cluster</button>
    </nav>

    <div id="viz"></div>

    <script type="text/javascript">

    //JSON object with the data
    var treeData = {"name" : "ROOT", "info" : "test", "children" : [
    {"name" : "A", "children" : [
    {"name" : "A 01" },
    {"name" : "A 02" },
    {"name" : "A 03" },
    {"name" : "A 04" },
    {"name" : "A 05" }
    ] },
    {"name" : "B", "children" : [
    {"name" : "B 01" },
    {"name" : "B 02", "children" : [
    {"name" : "B 02.1" },
    {"name" : "B 02.2" },
    {"name" : "B 02.3" },
    {"name" : "B 02.4" }
    ]},
    {"name" : "B 03" },
    {"name" : "B 04" },
    {"name" : "B 05" }] },
    {"name" : "C", "children": [
    {"name" : "C 01", "children" :[
    {"name" : "C 01.1" },
    {"name" : "C 01.2" },
    {"name" : "C 01.3" },
    {"name" : "C 01.4" },
    {"name" : "C 01.5" }
    ]}] },
    {"name" : "D", "children" : [
    {"name" : "D 01" },
    {"name" : "D 02" },
    {"name" : "D 03", "children" : [
    {"name" : "D 03.1" },
    {"name" : "D 03.2" }
    ]},
    {"name" : "D 04" }
    ] }
    ]};

    // width and height
    var w = 900;
    var h = 500;

    update(2);

    d3.select("#tree")
    .on("click", function(d,i) {
    update(2)});
    d3.select("#cluster")
    .on("click", function(d,i) {
    update(1)});


    function update(type) {

    d3.select("svg")
    .remove();

    // Create a svg canvas
    var vis = d3.select("#viz").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(60, 0)");


    if (type==1)
    var layout = d3.layout.cluster().size([h,w-100]);
    else
    var layout = d3.layout.tree().size([h,w-100]);

    var diagonal = d3.svg.diagonal()
    // change x and y (for the left to right tree)
    .projection(function(d) { return [d.y, d.x]; });

    // Preparing the data for the tree layout, convert data into an array of nodes
    var nodes = layout.nodes(treeData);
    // Create an array with all the links
    var links = layout.links(nodes);

    var link = vis.selectAll("pathlink")
    .data(links)
    .enter().append("svg:path")
    .attr("class", "link")
    .attr("d", diagonal)

    var node = vis.selectAll("g.node")
    .data(nodes)
    .enter().append("svg:g")
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

    // Add the dot at every node
    node.append("svg:circle")
    .attr("r", 1.5);

    // place the name attribute left or right depending if children
    node.append("svg:text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });
    }

    </script>
    </body>
    </html>
    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.