Skip to content

Instantly share code, notes, and snippets.

@cmaes
Last active August 29, 2015 14:27
Show Gist options
  • Save cmaes/2018b2ce4f51409030de to your computer and use it in GitHub Desktop.
Save cmaes/2018b2ce4f51409030de to your computer and use it in GitHub Desktop.
Chord layout
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 1em sans-serif;
}
.chord path {
fill-opacity: .67;
stroke: #000;
stroke-width: .5px;
}
table thead {
border-bottom: 1px solid #000;
font-size: 1em;
color: #333;
}
td {
padding-left: 1em;
}
td:first-child {
border-right: 1px solid #000;
padding-right: 1em;
padding-left: 0;
}
.tabinput {
width: 40px;
}
</style>
<body onload="ready()">
<table>
<thead>
<tr>
<td></td>
<td>Type 1</td>
<td>Type 2</td>
<td>Type 3</td>
<td>Type 4</td>
</tr>
</thead>
<tr>
<td>Type 1</td>
<td>-</td>
<td><input type="number" value="1" id="i12" class="tabinput"></td>
<td><input type="number" value="2" id="i13" class="tabinput"></td>
<td><input type="number" value="1" id="i14" class="tabinput"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="number" value="1" id="i21" class="tabinput"></td>
<td>-</td>
<td><input type="number" value="3" id="i23" class="tabinput"></td>
<td><input type="number" value="1" id="i24" class="tabinput"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="number" value="3" id="i31" class="tabinput"></td>
<td><input type="number" value="3" id="i32" class="tabinput"></td>
<td>-</td>
<td><input type="number" value="3" id="i34" class="tabinput"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="number" value="3" id="i41" class="tabinput"></td>
<td><input type="number" value="3" id="i42" class="tabinput"></td>
<td><input type="number" value="3" id="i43" class="tabinput"></td>
<td>-</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
d3.selectAll(".tabinput")
.attr("min", 0)
.on("input", function () {
console.log(this.id, this.value);
var idtxt = this.id;
var i = +idtxt[1]-1;
var j = +idtxt[2]-1;
console.log("row", i, "col", j);
matrix[i][j] = +this.value;
svg.selectAll("g").remove();
updateChord(matrix);
});
var width = 960,
height = 500,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;
var fill = d3.scale.category10()
.domain(d3.range(4))
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var matrix = [];
function ready () {
console.log("ready");
for (var i=0; i < 4; i++) {
var row = [];
for (var j=0; j < 4; j++) {
if (i !== j) {
var myid = "#i" + (i+1) + (j+1);
var sel = d3.select(myid);
console.log(myid, sel);
if (sel) {
console.log(myid, sel.attr("value"));
var elem = +sel.attr("value");
}
elem = 1;
row.push(elem);
} else {
row.push(0);
}
}
matrix.push(row);
}
console.log("matrix", matrix);
updateChord(matrix);
}
function updateChord(matrix) {
var chord = d3.layout.chord()
.padding(.05)
.matrix(matrix);
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 1);
var group = svg.selectAll(".group")
.data(chord.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", fade(.1))
.on("mouseout", fade(1));
var groupPath = group.append("path")
.attr("id", function (d, i) { return "group" + i; })
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));
var groupText = group.append("text")
.attr("x", 6)
.attr("dy", 15);
groupText.append("textPath")
.attr("xlink:href", function (d, i) { return "#group" + i; })
.text(function (d, i) { return "Type " + (i+1); });
}
// Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(g, i) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.style("opacity", opacity);
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment