put colors in chromatic order

Author: mpoegel

chord.js

@@ -246,8 +246,8 @@ function createGraph(chord_matrix, clusters, labels, heatmap, title) {
 			.on("mouseout", fade(1.0));
 
 	g.append("svg:path")
-			.style("stroke", function(d) { return fill(clusters[d.index]); })
-			.style("fill", function(d) { return fill(clusters[d.index]); })
+			.style("stroke", function(d) { return d3Cat10Colors(clusters[d.index]); })
+			.style("fill", function(d) { return d3Cat10Colors(clusters[d.index]); })
 			.attr("d", arc);
 
 	// add gene labels
@@ -311,7 +311,7 @@ function createGraph(chord_matrix, clusters, labels, heatmap, title) {
 				.endAngle(function(d) { return d.endAngle + chord_padding/2; })
 			)
 			.attr("class", "cluster_arc")
-			.attr("fill", function(d) { return fill(d.cluster); })
+			.attr("fill", function(d) { return d3Cat10Colors(d.cluster); })
 			.on("mouseover", fadeCluster(fade_opacity))
 			.on("mouseout", fadeCluster(1.0));
 
@@ -330,8 +330,8 @@ function createGraph(chord_matrix, clusters, labels, heatmap, title) {
 				d.target.cluster = clusters[d.target.index];
 				d.pathString = d3.svg.chord().radius(innerRadius)(d);
 			})
-			.style("stroke", function(d) { return d3.rgb(fill(clusters[d.source.index])).darker(); })
-			.style("fill", function(d) { return fill(clusters[d.source.index]); })
+			.style("stroke", function(d) { return d3.rgb(d3Cat10Colors(clusters[d.source.index])).darker(); })
+			.style("fill", function(d) { return d3Cat10Colors(clusters[d.source.index]); })
 			.attr("d", d3.svg.chord().radius(innerRadius));
 
 	// draw a legend for the clusters in the upper right corner
@@ -381,7 +381,7 @@ function drawClusterLegend(clusterLegend) {
 					.attr("y", i*20)
 					.attr("width", 10)
 					.attr("height", 10)
-					.style("fill", fill(d));
+					.style("fill", d3Cat10Colors(d));
 				g.append("text")
 					.attr("x", 40)
 					.attr("y", i*20 + 10)
@@ -666,8 +666,8 @@ function drawGradientPath(path, i) {
 			deltapi = 0,
 			mask = [],
 			colorGradient = d3.scale.linear()
-				.range([fill( path.source.cluster ),
-							 fill( path.target.cluster )])
+				.range([d3Cat10Colors( path.source.cluster ),
+							 d3Cat10Colors( path.target.cluster )])
 				.domain([0,n]);
 
 	for (var i = 1; i < n; i++) {

config.js

@@ -13,11 +13,18 @@ var margin = {top: 180, right: 160, bottom: 160, left: 160},
 			.innerRadius(innerRadius)
 			.outerRadius(outerRadius),
 
-		fill = d3.scale.category10(),
 		colorScale = d3.scale.linear()
 			.range(["#232323", "green", "red"]),
 		heatmapLegendScale = d3.scale.linear()
 			.domain([0,3]),
+			
+		matlabColors = function(i) {
+			return (['#F00', '#FF0', '#0F0', '#0FF', '#00F', '#F0F'])[(i-1)%6];
+		},
+		d3Cat10Colors = function(i) {
+			return (['#D62728', '#FF7F0E', '#2CA02C', '#1F77B4', '#9467BD',
+				'#8C564B'])[(i-1)%6];
+		},
 
 		colorGradientPrecision = 20,
 

events.js

@@ -251,15 +251,10 @@ $(".additional-settings").click(function() {
 $('.chord-fill-btns').click(function() {
 	switch ($(this).attr('data-action')) {
 		case 'setD310Colors':
-			recolor(function(i) {
-				return (['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD',
-					'#8C564B'])[(i-1)%6];
-			});
+			recolor(d3Cat10Colors);
 			break;
 		case 'setMatlabColors':
-			recolor(function(i) {
-				return (['#F00', '#FF0', '#0F0', '#0FF', '#00F', '#F0F'])[(i-1)%6];
-			});
+			recolor(matlabColors);
 		default:
 			break;
 	}