anuwatb · November 30, 2016 08:49
diff --git a/data_withReference.csv b/data_withReference.csv
diff --git a/index.html b/index.html
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <body>
 <svg width="900" height="900"></svg>
 <script>
 d3.text("data_withReference.csv", function(error, datas) {
 	var dataf = d3.csv.parseRows(datas);

 	dataf.shift();

 	var text = [],
 		forref = "",
 		ref = [];
 	var nest = d3.nest()
 		.key(function(d) { return d[1]; })
 		.key(function(d) { return d[3]; })
 		.entries(dataf)
 		.sort(function(a, b) { return a.key < b.key ? -1 : 1; });
 	nest.forEach(function(d, i) {
 		text.push(d.key);
 		forref+="<div style=\"text-align: right\">Close</div>";
 		d.values.forEach(function(e, j) {
 			forref+="<p>";
 			forref+=e.key;
 			forref+="</p>";
 		});
 		ref[i] = forref;
 		forref = "";
 	});
 	nest = d3.nest()
 		.key(function(d) { return d[2]; })
 		.entries(dataf)
 		.sort(function(a, b) { return a.key < b.key ? -1 : 1; });
 	nest.forEach(function(d) {
 		text.push(d.key);
 	});
 	var textnested = [];
 	d3.nest()
 		.key(function(d) { return d; })
 		.entries(text)
 		.forEach(function(d) {
 			textnested.push(d.key);
 		});
 	if(textnested.length < text.length) {
 		var inDirection = 1;
 		text = textnested;
 		text.sort(function(a, b) { return a < b ? -1 : 1; });
 	}
 	nest = d3.nest()
 		.key(function(d) { return d[0]; })
 		.entries(dataf);
 	if(nest.length < dataf.length) {
 		nest.forEach(function(d) {
 			d.values.forEach(function(e) { e.push(1/d.values.length); });
 		});
 	}

 var matrix = [];
 text.forEach(function(d, i) {
 	matrix[i] = d3.range(text.length).map(function() { return 0; });
 });
 dataf.forEach(function(d) {
 	var x = text.indexOf(d[1]),
 		y = text.indexOf(d[2]);
 	if(nest.length < dataf.length) matrix[x][y]+=d[d.length-1];
 	else matrix[x][y]++;
 	if(!inDirection) {
 		if(nest.length < dataf.length) matrix[y][x]+=d[d.length-1];
 		else matrix[y][x]++;
 	}
 });
 var chord = d3.layout.chord()
 	.padding(.04)
 	.matrix(matrix);
 var svg = d3.select("svg")
 	.append("g")
 	.attr("transform", "translate(450, 450)");
 var fill = d3.scale.category20();
 var g = svg.selectAll(".group")
 	.data(chord.groups)
 	.enter()
 	.append("g")
 	.attr("class", "group");
 var r = 300;
 g.append("path")
 	.attr("d", d3.svg.arc().innerRadius(r).outerRadius(r+20))
 	.style("fill", function(d) { return fill(d.index); })
 	.on("mouseover", standOut(0.1, 0.1, ""));
 g.append("text")
 	.attr("transform", function(d) {
 		return "rotate("+(((d.startAngle+d.endAngle)/2) * (180/Math.PI) - 90)+")"
 			+ "translate("+(r+38)+")" + (((d.startAngle+d.endAngle)/2) > Math.PI ? "rotate(180)" : "");
 	})
 	.attr("text-anchor", function(d) { return ((d.startAngle+d.endAngle)/2) > Math.PI ? "end" : ""; })
 	.text(function(d) { return text[d.index]; });
 var lt = g.selectAll(".lt")
 	.data(function(d) {
 		var unitAngle = (d.endAngle-d.startAngle)/d.value;
 		return d3.range(d.value).map(function(step) { return { angle: d.startAngle+step*unitAngle }; });
 	})
 	.enter()
 	.append("g")
 	.attr("class", "lt")
 	.attr("transform", function(d) { return "rotate("+((d.angle*(180/Math.PI))-90)+")translate("+(r+20)+")"; });
 lt.append("line")
 	.attr("x2", 6)
 	.attr("stroke", "#000");
 lt.append("text")
 	.text(function(d, i) { return i; })
 	.attr("transform", function(d) { return d.angle > Math.PI ? "translate(7, -3)rotate(180)" : "translate(7, 3)"; })
 	.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : ""; });
 d3.select("body").selectAll(".refhtml")
 	.data(chord.groups)
 	.enter()
 	.append("div")
 	.attr("class", "refhtml")
 	.html(function(d) { return ref[d.index]; })
 	.style("position", "absolute")
 	.style("top", 500)
 	.style("right", 100)
 	.style("left", 250)
 	.style("display", "none")
 	.on("click", standOut(0.75, 1, "none"));
 svg.selectAll(".chord")
 	.data(chord.chords)
 	.enter()
 	.append("path")
 	.attr("class", "chord")
 	.attr("d", d3.svg.chord().radius(r))
 	.style("fill", function(d) { return fill(d.source.index); })
 	.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
 	.style("opacity", 0.75);
 function standOut(oc, oa, or) {
 	return function(d, i) {
 		var gstandout = [];
 		svg.selectAll(".chord")
 			.style("opacity", 0.75)
 			.each(function(e) { e.source.index == i ? gstandout.push(e.target.index) : e.target.index == i ? gstandout.push(e.source.index) : ""; })
 			.filter(function(e) { return e.source.index != i && e.target.index != i; })
 			.style("opacity", oc);
 		svg.selectAll(".group")
 			.style("opacity", 1)
 			.filter(function(e, j) { return gstandout.indexOf(j) == -1 && j != i; })
 			.style("opacity", oa);
 		d3.selectAll(".refhtml")
 			.style("display", "none")
 			.filter(function(e, j) { return j == i; })
 			.style("display", or);
 	};
 }
 });
 </script>
 </body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<body>
	<svg width="900" height="900"></svg>
	<script>
	d3.text("data_withReference.csv", function(error, datas) {
	var dataf = d3.csv.parseRows(datas);

	dataf.shift();

	var text = [],
	forref = "",
	ref = [];
	var nest = d3.nest()
	.key(function(d) { return d[1]; })
	.key(function(d) { return d[3]; })
	.entries(dataf)
	.sort(function(a, b) { return a.key < b.key ? -1 : 1; });
	nest.forEach(function(d, i) {
	text.push(d.key);
	forref+="<div style=\"text-align: right\">Close</div>";
	d.values.forEach(function(e, j) {
	forref+="<p>";
	forref+=e.key;
	forref+="</p>";
	});
	ref[i] = forref;
	forref = "";
	});
	nest = d3.nest()
	.key(function(d) { return d[2]; })
	.entries(dataf)
	.sort(function(a, b) { return a.key < b.key ? -1 : 1; });
	nest.forEach(function(d) {
	text.push(d.key);
	});
	var textnested = [];
	d3.nest()
	.key(function(d) { return d; })
	.entries(text)
	.forEach(function(d) {
	textnested.push(d.key);
	});
	if(textnested.length < text.length) {
	var inDirection = 1;
	text = textnested;
	text.sort(function(a, b) { return a < b ? -1 : 1; });
	}
	nest = d3.nest()
	.key(function(d) { return d[0]; })
	.entries(dataf);
	if(nest.length < dataf.length) {
	nest.forEach(function(d) {
	d.values.forEach(function(e) { e.push(1/d.values.length); });
	});
	}

	var matrix = [];
	text.forEach(function(d, i) {
	matrix[i] = d3.range(text.length).map(function() { return 0; });
	});
	dataf.forEach(function(d) {
	var x = text.indexOf(d[1]),
	y = text.indexOf(d[2]);
	if(nest.length < dataf.length) matrix[x][y]+=d[d.length-1];
	else matrix[x][y]++;
	if(!inDirection) {
	if(nest.length < dataf.length) matrix[y][x]+=d[d.length-1];
	else matrix[y][x]++;
	}
	});
	var chord = d3.layout.chord()
	.padding(.04)
	.matrix(matrix);
	var svg = d3.select("svg")
	.append("g")
	.attr("transform", "translate(450, 450)");
	var fill = d3.scale.category20();
	var g = svg.selectAll(".group")
	.data(chord.groups)
	.enter()
	.append("g")
	.attr("class", "group");
	var r = 300;
	g.append("path")
	.attr("d", d3.svg.arc().innerRadius(r).outerRadius(r+20))
	.style("fill", function(d) { return fill(d.index); })
	.on("mouseover", standOut(0.1, 0.1, ""));
	g.append("text")
	.attr("transform", function(d) {
	return "rotate("+(((d.startAngle+d.endAngle)/2) * (180/Math.PI) - 90)+")"
	+ "translate("+(r+38)+")" + (((d.startAngle+d.endAngle)/2) > Math.PI ? "rotate(180)" : "");
	})
	.attr("text-anchor", function(d) { return ((d.startAngle+d.endAngle)/2) > Math.PI ? "end" : ""; })
	.text(function(d) { return text[d.index]; });
	var lt = g.selectAll(".lt")
	.data(function(d) {
	var unitAngle = (d.endAngle-d.startAngle)/d.value;
	return d3.range(d.value).map(function(step) { return { angle: d.startAngle+step*unitAngle }; });
	})
	.enter()
	.append("g")
	.attr("class", "lt")
	.attr("transform", function(d) { return "rotate("+((d.angle*(180/Math.PI))-90)+")translate("+(r+20)+")"; });
	lt.append("line")
	.attr("x2", 6)
	.attr("stroke", "#000");
	lt.append("text")
	.text(function(d, i) { return i; })
	.attr("transform", function(d) { return d.angle > Math.PI ? "translate(7, -3)rotate(180)" : "translate(7, 3)"; })
	.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : ""; });
	d3.select("body").selectAll(".refhtml")
	.data(chord.groups)
	.enter()
	.append("div")
	.attr("class", "refhtml")
	.html(function(d) { return ref[d.index]; })
	.style("position", "absolute")
	.style("top", 500)
	.style("right", 100)
	.style("left", 250)
	.style("display", "none")
	.on("click", standOut(0.75, 1, "none"));
	svg.selectAll(".chord")
	.data(chord.chords)
	.enter()
	.append("path")
	.attr("class", "chord")
	.attr("d", d3.svg.chord().radius(r))
	.style("fill", function(d) { return fill(d.source.index); })
	.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
	.style("opacity", 0.75);
	function standOut(oc, oa, or) {
	return function(d, i) {
	var gstandout = [];
	svg.selectAll(".chord")
	.style("opacity", 0.75)
	.each(function(e) { e.source.index == i ? gstandout.push(e.target.index) : e.target.index == i ? gstandout.push(e.source.index) : ""; })
	.filter(function(e) { return e.source.index != i && e.target.index != i; })
	.style("opacity", oc);
	svg.selectAll(".group")
	.style("opacity", 1)
	.filter(function(e, j) { return gstandout.indexOf(j) == -1 && j != i; })
	.style("opacity", oa);
	d3.selectAll(".refhtml")
	.style("display", "none")
	.filter(function(e, j) { return j == i; })
	.style("display", or);
	};
	}
	});
	</script>
	</body>