Skip to content

Instantly share code, notes, and snippets.

@eugeneiiim

eugeneiiim/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save eugeneiiim/11240996 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save eugeneiiim/11240996 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. eugeneiiim revised this gist Apr 24, 2014. 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
    @@ -17,8 +17,8 @@
    <script>

    var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = '80%';
    height = '80%';
    width = 100;
    height = 100;

    var tree = d3.layout.tree()
    .size([height, width]);
  2. eugeneiiim revised this gist Apr 24, 2014. 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
    @@ -17,8 +17,8 @@
    <script>

    var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    width = '80%';
    height = '80%';

    var tree = d3.layout.tree()
    .size([height, width]);
  3. @mbostock mbostock revised this gist Oct 12, 2012. 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.
  4. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    In response to a Stack Overflow question, [How to convert to D3's JSON format?](http://stackoverflow.com/questions/11088303/how-to-convert-to-d3s-json-format/11089330#11089330).
  5. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,7 @@
    });

    // Extract the root node and compute the layout.
    var nodes = tree.nodes(nodeByName(links[0].source));
    var nodes = tree.nodes(links[0].source);

    // Create the link lines.
    svg.selectAll(".link")
  6. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,8 +37,8 @@

    // Create nodes for each unique source and target.
    links.forEach(function(link) {
    var parent = nodeByName(link.source),
    child = nodeByName(link.target);
    var parent = link.source = nodeByName(link.source),
    child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
    });
    @@ -48,7 +48,7 @@

    // Create the link lines.
    svg.selectAll(".link")
    .data(tree.links(nodes))
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);
  7. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,7 @@
    <style>

    .link {
    fill: none;
    stroke: #000;
    }

  8. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,8 +36,8 @@

    // Create nodes for each unique source and target.
    links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
    child = link.target = nodeByName(link.target);
    var parent = nodeByName(link.source),
    child = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
    });
    @@ -47,7 +47,7 @@

    // Create the link lines.
    svg.selectAll(".link")
    .data(links)
    .data(tree.links(nodes))
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);
  9. @mbostock mbostock revised this gist Jun 18, 2012. 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
    @@ -36,8 +36,8 @@

    // Create nodes for each unique source and target.
    links.forEach(function(link) {
    var parent = nodeByName(link.source),
    child = nodeByName(link.target);
    var parent = link.source = nodeByName(link.source),
    child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
    });
  10. @mbostock mbostock revised this gist Jun 18, 2012. 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
    @@ -2,11 +2,11 @@
    <meta charset="utf-8">
    <style>

    line {
    .link {
    stroke: #000;
    }

    circle {
    .node {
    stroke: #fff;
    }

  11. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 27 additions and 34 deletions.
    61 changes: 27 additions & 34 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,62 +15,55 @@
    <script src="http://d3js.org/d3.v2.js?2.9.3"></script>
    <script>

    var width = 960,
    height = 500;
    var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    var tree = d3.layout.tree()
    .size([height, width]);

    var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

    var force = d3.layout.force()
    .size([width, height]);
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("graph.csv", function(links) {
    var nodesByName = {};

    // Create nodes for each unique source and target.
    links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
    var parent = nodeByName(link.source),
    child = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
    });

    // Extract the array of nodes from the map by name.
    var nodes = d3.values(nodesByName);
    // Extract the root node and compute the layout.
    var nodes = tree.nodes(nodeByName(links[0].source));

    // Create the link lines.
    var link = svg.selectAll(".link")
    svg.selectAll(".link")
    .data(links)
    .enter().append("line")
    .attr("class", "link");
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

    // Create the node circles.
    var node = svg.selectAll(".node")
    svg.selectAll(".node")
    .data(nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 4.5)
    .call(force.drag);

    // Start the force layout.
    force
    .nodes(nodes)
    .links(links)
    .on("tick", tick)
    .start();

    function tick() {
    link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    }
    .attr("cx", function(d) { return d.y; })
    .attr("cy", function(d) { return d.x; });

    function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
    }
    });

    </script>
    </script>
  12. @mbostock mbostock revised this gist Jun 18, 2012. 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
    @@ -48,7 +48,8 @@
    .data(nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 4.5);
    .attr("r", 4.5)
    .call(force.drag);

    // Start the force layout.
    force
  13. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@
    });

    // Extract the array of nodes from the map by name.
    var nodes = d3.values(nodeByName);
    var nodes = d3.values(nodesByName);

    // Create the link lines.
    var link = svg.selectAll(".link")
  14. @mbostock mbostock revised this gist Jun 18, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -58,7 +58,7 @@
    .start();

    function tick() {
    line.attr("x1", function(d) { return d.source.x; })
    link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });
  15. @mbostock mbostock created this gist Jun 18, 2012.
    4 changes: 4 additions & 0 deletions graph.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    source,target
    A1,A2
    A2,A3
    A2,A4
    75 changes: 75 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    line {
    stroke: #000;
    }

    circle {
    stroke: #fff;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.js?2.9.3"></script>
    <script>

    var width = 960,
    height = 500;

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    var force = d3.layout.force()
    .size([width, height]);

    d3.csv("graph.csv", function(links) {
    var nodesByName = {};

    // Create nodes for each unique source and target.
    links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
    });

    // Extract the array of nodes from the map by name.
    var nodes = d3.values(nodeByName);

    // Create the link lines.
    var link = svg.selectAll(".link")
    .data(links)
    .enter().append("line")
    .attr("class", "link");

    // Create the node circles.
    var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 4.5);

    // Start the force layout.
    force
    .nodes(nodes)
    .links(links)
    .on("tick", tick)
    .start();

    function tick() {
    line.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    }

    function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
    }
    });

    </script>