Created — forked from mbostock/index.html

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist
View index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
<!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;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
path {
fill: lightsteelblue;
stroke: steelblue;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [
{name:'jane', connections: ['bob', 'sue']},
{name:'sue', connections: ['tom', 'bob', 'jane', 'tom']},
{name: 'sally', connections: ['bob', 'bob', 'jane', 'tom']},
{name: 'tom', connections: []},
{name: 'bob', connections: []}
]
var w = 300,
h = 300,
angle = d3.scale.ordinal()
.domain(d3.range(0, data.length))
.rangeBands([0, 2 * Math.PI]),
arc = 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 })
line = d3.svg.chord()
.startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
.endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
.radius(h / 2 - 20),
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", arc);
vis.selectAll('path.c')
.data(connections)
.enter().append('svg:path')
.attr('d', function(d) { return line(d); })
.attr('class', 'c')
vis.selectAll('labels')
.data(data)
.enter().append('svg:text')
.attr('transform', function(d) {
var ct = arc.centroid(d);
return "translate(" + ct + ")"
}).text(function(d) { console.log(d); return d.name })
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.