Skip to content

Instantly share code, notes, and snippets.

@mwhitaker mwhitaker/force.csv
Last active Aug 29, 2015

Embed
What would you like to do?
Force-directed graph of website visitors with sessions from multiple US States
source target value
North Carolina Tennessee 136
Virginia District of Columbia 132
North Carolina Georgia 130
District of Columbia Virginia 124
Georgia North Carolina 123
Oklahoma Louisiana 116
Wisconsin Illinois 111
Louisiana Oklahoma 103
Tennessee North Carolina 103
Texas Louisiana 91
Illinois Wisconsin 88
Louisiana Texas 87
Tennessee Georgia 84
Georgia Tennessee 76
Oklahoma Texas 72
Oklahoma Arkansas 70
Missouri Illinois 65
Kentucky Alabama 62
North Carolina South Carolina 62
South Carolina North Carolina 62
Florida Georgia 61
Georgia Florida 59
Illinois Missouri 59
Texas Oklahoma 59
North Carolina Wisconsin 57
Alabama Georgia 55
Georgia Alabama 51
Kentucky Tennessee 51
Arkansas Tennessee 50
Arkansas Oklahoma 49
Wisconsin North Carolina 47
Indiana Illinois 46
Kentucky Georgia 46
Kentucky Indiana 46
Alabama Kentucky 43
Mississippi Kentucky 43
Tennessee Arkansas 43
Indiana Kentucky 42
Washington Oregon 42
Illinois Indiana 41
Missouri Kansas 41
Tennessee Kentucky 40
Texas California 38
California Oregon 37
Georgia South Carolina 37
Louisiana Arkansas 37
Pennsylvania New Jersey 37
Virginia North Carolina 37
Arkansas Louisiana 36
Georgia Kentucky 36
Tennessee Louisiana 36
California Texas 34
Massachusetts New York 34
North Dakota Minnesota 34
Iowa Minnesota 33
Louisiana Tennessee 33
Minnesota North Dakota 33
Oregon Washington 33
Pennsylvania Michigan 33
Pennsylvania Virginia 33
Kansas Missouri 32
Maryland District of Columbia 32
Massachusetts Virginia 32
New Jersey Pennsylvania 32
North Carolina Virginia 32
South Carolina Georgia 32
Texas Illinois 32
Iowa Nebraska 30
Nebraska Iowa 30
New York Massachusetts 30
Oregon California 30
Pennsylvania Ohio 30
Michigan Pennsylvania 29
Oklahoma Colorado 29
Colorado Utah 28
Minnesota Iowa 28
Ohio Michigan 28
Ohio Pennsylvania 28
California Florida 26
California Washington 26
Kentucky Mississippi 26
Oklahoma Tennessee 26
South Carolina Tennessee 26
Virginia Tennessee 26
Illinois Texas 25
Michigan Ohio 25
Missouri California 25
Virginia Pennsylvania 25
Washington California 25
District of Columbia Maryland 24
Illinois Iowa 24
Michigan Illinois 24
Nebraska Minnesota 24
North Carolina Illinois 24
Pennsylvania District of Columbia 24
Tennessee Oklahoma 24
Tennessee Virginia 24
Virginia Maryland 24
Virginia Massachusetts 24
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js"></script>
<style>
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
path.link.twofive {
opacity: 0.25;
}
path.link.fivezero {
opacity: 0.50;
}
path.link.sevenfive {
opacity: 0.75;
}
path.link.onezerozero {
opacity: 1.0;
}
circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
</style>
<body>
<script>
// get the data
d3.csv("force.csv", function(error, links) {
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] ||
(nodes[link.source] = {name: link.source});
link.target = nodes[link.target] ||
(nodes[link.target] = {name: link.target});
link.value = +link.value;
});
var width = 960,
height = 700,
color = d3.scale.category20c();
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(100)
.charge(-600)
.on("tick", tick)
.start();
// Set the range
var v = d3.scale.linear().range([0, 100]);
// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);
// asign a type per value to encode opacity
links.forEach(function(link) {
if (v(link.value) <= 25) {
link.type = "twofive";
} else if (v(link.value) <= 50 && v(link.value) > 25) {
link.type = "fivezero";
} else if (v(link.value) <= 75 && v(link.value) > 50) {
link.type = "sevenfive";
} else if (v(link.value) <= 100 && v(link.value) > 75) {
link.type = "onezerozero";
}
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// build the arrow.
svg.append("svg:defs").selectAll("marker")
.data(["end"]) // Different link/path types can be defined here
.enter().append("svg:marker") // This section adds in the arrows
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", "url(#end)");
// define the nodes
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("click", click)
.on("dblclick", dblclick)
.call(force.drag);
// add the nodes
node.append("circle")
.attr("r", 5)
.style("fill", function(d) { return color(d.name); });
// add the text
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
// add the curvy lines
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" +
d.source.x + "," +
d.source.y + "A" +
dr + "," + dr + " 0 0,1 " +
d.target.x + "," +
d.target.y;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
}
// action to take on mouse click
function click() {
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 22)
.style("stroke", "lightsteelblue")
.style("stroke-width", ".5px")
.style("font", "20px sans-serif");
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
// action to take on mouse double click
function dblclick() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 6);
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 12)
.style("stroke", "none")
.style("fill", "black")
.style("stroke", "none")
.style("font", "10px sans-serif");
}
});
</script>
</body>
</html>
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.