Permalink
Browse files

Refactor Chord Diagram

Structure according to [Towards Reusable
Charts](http://bost.ocks.org/mike/chart/)

White space is a little wonky in order to simplify this commit's diff.
The next commit will address this.
  • Loading branch information...
jugglinmike committed Mar 2, 2013
1 parent c9b0882 commit 603a9b3b6135c9a99f7eda26899225e281093f58
Showing with 64 additions and 23 deletions.
  1. +1 −1 index.html
  2. +11 −0 scripts/app.js
  3. +52 −22 scripts/chord-diagram.js
View
@@ -6,10 +6,10 @@
<script src="scripts/lib/d3.v3.js"></script>
<script src="scripts/datasrc.js"></script>
<script src="scripts/bar-chart.js"></script>
<script src="scripts/chord-diagram.js"></script>
<link rel="stylesheet" href="styles/index.css"></link>
</head>
<body>
<script src="scripts/app.js"></script>
<script src="scripts/chord-diagram.js"></script>
</body>
</html>
View
@@ -5,6 +5,14 @@
var d3 = window.d3;
var DataSrc = window.DataSrc;
var BarChart = window.BarChart;
var Chord = window.Chord;
// From http://mkweb.bcgsc.ca/circos/guide/tables/
var matrix = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
var dataSrc = new DataSrc();
var myBarChart = BarChart({ data: dataSrc.data });
@@ -14,4 +22,7 @@
myBarChart();
}, 1500);
var myChord = Chord();
myChord(matrix);
}(this));
View
@@ -1,35 +1,26 @@
(function(window, undefined) {
window.Chord = function(options) {
"use strict";
var d3 = window.d3;
// From http://mkweb.bcgsc.ca/circos/guide/tables/
var matrix = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
options = options || {};
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
var d3 = window.d3;
var width = 960,
height = 500,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;
var width, height, innerRadius, outerRadius;
var fill = d3.scale.ordinal()
.domain(d3.range(4))
.range(["#000000", "#FFDD89", "#957244", "#F26223"]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
.append("g");
function chord(matrix) {
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
svg.append("g").selectAll("path")
.data(chord.groups)
@@ -73,6 +64,8 @@
.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 1);
}
// Returns an array of tick angles and labels, given a group.
function groupTicks(d) {
var k = (d.endAngle - d.startAngle) / d.value;
@@ -94,4 +87,41 @@
};
}
}(this));
chord.width = function(newWidth) {
if (!arguments.length) {
return width;
}
width = newWidth;
svg.attr("width", width);
chord.setRadius();
return this;
};
chord.height = function(newHeight) {
if (!arguments.length) {
return height;
}
height = newHeight;
svg.attr("height", height);
chord.setRadius();
return this;
};
chord.setRadius = function(radius) {
if (!arguments.length) {
radius = Math.min(chord.width(), chord.height()) * 0.41;
}
outerRadius = radius;
innerRadius = radius / 1.1;
return this;
};
chord.width(options.width || 800);
chord.height(options.height || 500);
chord.setRadius();
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
return chord;
};

0 comments on commit 603a9b3

Please sign in to comment.