Skip to content

Instantly share code, notes, and snippets.

@caged
Created April 24, 2011 21:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save caged/939901 to your computer and use it in GitHub Desktop.
Save caged/939901 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://github.com/Caged/d3/raw/master/d3.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
path {
fill: lightsteelblue;
stroke: steelblue;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [
{name:'bob', connections: ['jane', 'tom', 'sue']},
{name:'jane', connections: ['bob', 'sue']},
{name:'sue', connections: ['tom', 'bob', 'jane', 'tom']},
{name: 'tom', connections: []}
]
var w = 300,
h = 300,
angle = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, 2 * Math.PI]),
line = d3.svg.diagonal()
.source(function(d) { return { x: 0, y: 0 }})
.target(function(d) { return { x: 0, y: 0 }})
angles = {},
connections = []
data.forEach(function(d, i) {
var a = angle(i)
angles[d.name] = {
startAngle: a,
endAngle: a + angle.rangeBand() / 2
}
})
data.forEach(function(p) {
p.connections.forEach(function(c) {
connections.push({
source: angles[p.name],
target: angles[c]
})
})
})
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
vis.selectAll("path")
.data(data)
.enter().append("svg:path")
.attr("d", d3.svg.arc()
.innerRadius(h / 2 - 20)
.outerRadius(h / 2 - 10)
.startAngle(function(d, i) { return angles[d.name].startAngle })
.endAngle(function(d, i) { return angles[d.name].endAngle; }));
vis.selectAll('path.c')
.data(connections)
.enter().append('svg:path')
.attr('d', line)
.attr('class', 'c')
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment