### Example25 - layouts
Built with blockbuilder.org
Last active
March 9, 2016 18:49
-
-
Save jjelosua/93dd38fba6098391c37b to your computer and use it in GitHub Desktop.
d3intro_ex25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Intro d3js example</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| rect:hover { | |
| cursor: pointer; | |
| } | |
| svg text { | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Intro d3js - example25</h1> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 500; | |
| var h = 300; | |
| //Original data | |
| var dataset = { | |
| nodes: [ | |
| { name: "Adam" }, | |
| { name: "Bob" }, | |
| { name: "Carrie" }, | |
| { name: "Donovan" }, | |
| { name: "Edward" }, | |
| { name: "Felicity" }, | |
| { name: "George" }, | |
| { name: "Hannah" }, | |
| { name: "Iris" }, | |
| { name: "Jerry" } | |
| ], | |
| edges: [ | |
| { source: 0, target: 1 }, | |
| { source: 0, target: 2 }, | |
| { source: 0, target: 3 }, | |
| { source: 0, target: 4 }, | |
| { source: 1, target: 5 }, | |
| { source: 2, target: 5 }, | |
| { source: 2, target: 5 }, | |
| { source: 3, target: 4 }, | |
| { source: 5, target: 8 }, | |
| { source: 5, target: 9 }, | |
| { source: 6, target: 7 }, | |
| { source: 7, target: 8 }, | |
| { source: 8, target: 9 } | |
| ] | |
| }; | |
| //Initialize a default force layout, using the nodes and edges in dataset | |
| var force = d3.layout.force() | |
| .nodes(dataset.nodes) | |
| .links(dataset.edges) | |
| .size([w, h]) | |
| .linkDistance([50]) | |
| .charge([-100]) | |
| .start(); | |
| var colors = d3.scale.category10(); | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Create edges as lines | |
| var edges = svg.selectAll("line") | |
| .data(dataset.edges) | |
| .enter() | |
| .append("line") | |
| .style("stroke", "#ccc") | |
| .style("stroke-width", 1); | |
| //Create nodes as circles | |
| var nodes = svg.selectAll("circle") | |
| .data(dataset.nodes) | |
| .enter() | |
| .append("circle") | |
| .attr("r", 10) | |
| .style("fill", function(d, i) { | |
| return colors(i); | |
| }) | |
| .call(force.drag); | |
| //Every time the simulation "ticks", this will be called | |
| force.on("tick", function() { | |
| edges.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; }); | |
| nodes.attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment