In response to a Stack Overflow question, How to convert to D3's JSON format?.
forked from mbostock's block: Force Layout from CSV
license: gpl-3.0 |
In response to a Stack Overflow question, How to convert to D3's JSON format?.
forked from mbostock's block: Force Layout from CSV
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> |