Skip to content

Instantly share code, notes, and snippets.

@fernandogelin

fernandogelin/index.html

Last active August 29, 2015 14:24
Show Gist options
  • Save fernandogelin/dddf53fcc57b0546f2ae to your computer and use it in GitHub Desktop.
Save fernandogelin/dddf53fcc57b0546f2ae to your computer and use it in GitHub Desktop.
Download ZIP
Chord Diagram
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.chord path {
fill-opacity: .67;
stroke: #000;
stroke-width: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgit.com/gghh/d3/master/d3.js" type="text/javascript"></script>
<script src="http://rawgit.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
# Returns an array of tick angles and labels, given a group.
groupTicks = (d) ->
k = (d.endAngle - (d.startAngle)) / d.value
d3.range(0, d.value, 1000).map (v, i) ->
{
angle: v * k + d.startAngle
label: if i % 5 then null else v / 1000 + 'k'
}
groupLabels = (d) ->
[ {
angle: (d.startAngle + d.endAngle) / 2
label: labels[d.index]
} ]
# Returns an event handler for fading a given chord group.
fade = (opacity) ->
(g, i) ->
svg.selectAll('.chord path').filter((d) ->
!(i + '' of d.groups)
).transition().style 'opacity', opacity
connections = [
[ {
group: 0
value: 388
category: 1
} ]
[ {
group: 1
value: 529
category: 1
} ]
[ {
group: 2
value: 423
category: 1
} ]
[ {
group: 3
value: 390
category: 1
} ]
[
{
group: 0
value: 16
category: 2
}
{
group: 1
value: 16
category: 2
}
]
[
{
group: 0
value: 81
category: 2
}
{
group: 2
value: 81
category: 2
}
]
[
{
group: 0
value: 58
category: 2
}
{
group: 3
value: 58
category: 2
}
]
[
{
group: 1
value: 30
category: 2
}
{
group: 2
value: 30
category: 2
}
]
[
{
group: 1
value: 41
category: 2
}
{
group: 3
value: 41
category: 2
}
]
[
{
group: 2
value: 72
category: 2
}
{
group: 3
value: 72
category: 2
}
]
[
{
group: 0
value: 33
category: 3
}
{
group: 1
value: 33
category: 3
}
{
group: 2
value: 33
category: 3
}
]
[
{
group: 0
value: 30
category: 3
}
{
group: 1
value: 30
category: 3
}
{
group: 3
value: 30
category: 3
}
]
[
{
group: 0
value: 66
category: 3
}
{
group: 2
value: 66
category: 3
}
{
group: 3
value: 66
category: 3
}
]
[
{
group: 1
value: 10
category: 3
}
{
group: 2
value: 10
category: 3
}
{
group: 3
value: 10
category: 3
}
]
[
{
group: 0
value: 10
category: 4
}
{
group: 1
value: 10
category: 4
}
{
group: 2
value: 10
category: 4
}
{
group: 3
value: 10
category: 4
}
]
]
labels =
0: 'ind1'
1: 'ind2'
2: 'ind3'
3: 'ind4'
chord = d3.layout.chord()
.padding(.05)
.connections(connections)
width = 960
height = 600
innerRadius = Math.min(width, height) * .30
outerRadius = innerRadius * 1.1
fill = d3.scale.ordinal()
.domain d3.range(4)
.range [ '#189396', '#2AC4CC', '#42FFC3', '#FF8E84']
svg = d3.select('body').append 'svg'
.attr 'width', width
.attr 'height', height
.append 'g'
.attr('transform', 'translate(' + width / 2 + ',' + height / 2.5 + ')')
svg.append('g').selectAll 'path'
.data(chord.groups)
.enter().append 'path'
.style 'fill', (d) -> fill d.index
.style 'stroke', (d) -> fill d.index
.attr('d', d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on 'mouseover', fade(.1)
.on 'mouseout', fade(1)
labels = svg.append("g").selectAll "g"
.data chord.groups
.enter().append("g").selectAll "g"
.data groupLabels
.enter().append "g"
.attr "transform", (d) ->
"rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + "translate(" + (outerRadius + 20) + ",0)"
labels.append "text"
.attr "x", 8
.attr "dy", ".35em"
.attr "transform", (d) -> d.angle > Math.PI ? "rotate(180)translate(-16)" : null
.style "fill", "#000"
.style "font-size", 20
.style "text-anchor", (d) -> d.angle > Math.PI ? "end" : null
.text (d) -> d.label
svg.append "g"
.attr "class", "chord"
.selectAll "path"
.data chord.chords
.enter().append "path"
.attr "d", d3.svg.chord().radius innerRadius
.style "fill", (d) -> fill d.target.index
.style "opacity", 1
</script>
Raw
shared_mutations.txt
each diagram represents a family.
values are number of mutations.
groups (arcs) are individuals.
chords link shared mutations (each point can target multiple arcs)
4 groups -> total points = 2783
group1 = 682
group2 = 699
group3 = 725
group4 = 677
groups 1 and 2 share: 89
groups 1 and 3 share: 190
groups 1 and 4 share: 164
groups 2 and 3 share: 83
groups 2 and 4 share: 91
groups 3 and 4 share: 158
groups 1, 2 and 3 share: 43
groups 1, 2 and 4 share: 40
groups 1, 3 and 4 share: 76
groups 2, 3 and 4 share: 20
groups 1, 2, 3 and 4 share: 10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment