Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active Nov 8, 2019
Embed
What would you like to do?
Force Layout from CSV
license: gpl-3.0
source target
A1 A2
A2 A3
A2 A4
<!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>
@jeiman-zz

This comment has been minimized.

Copy link

@jeiman-zz jeiman-zz commented Mar 27, 2013

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.

@StuartJAtkinson

This comment has been minimized.

Copy link

@StuartJAtkinson StuartJAtkinson commented Jul 15, 2016

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
You can’t perform that action at this time.