In response to a Stack Overflow question, How to convert to D3's JSON format?.
Last active
November 8, 2019 07:43
-
-
Save mbostock/2949937 to your computer and use it in GitHub Desktop.
Force Layout from CSV
This file contains 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
| license: gpl-3.0 |
This file contains 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
| source | target | |
|---|---|---|
| A1 | A2 | |
| A2 | A3 | |
| A2 | A4 |
This file contains 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> | |
| <meta charset="utf-8"> | |
| <style> | |
| .link { | |
| stroke: #000; | |
| } | |
| .node { | |
| stroke: #fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></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(error, links) { | |
| if (error) throw error; | |
| 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(nodesByName); | |
| // 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) | |
| .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; }); | |
| } | |
| function nodeByName(name) { | |
| return nodesByName[name] || (nodesByName[name] = {name: name}); | |
| } | |
| }); | |
| </script> |
This is pretty much exactly what I've been looking for to begin my project of mapping my learning in a concise and meaningful way.
All I need is 1 addition and that is the capacity to include text in the nodes, this is a great starting point thanks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I've search for sample to show only source nodes when loading the graph. When click on the source node, then the target node will be display. Do you have sample code for that and willing to share.