Skip to content

Instantly share code, notes, and snippets.

@anuwatb

anuwatb/data.csv

Last active September 7, 2016 12:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anuwatb/b8d0c748441d81006103 to your computer and use it in GitHub Desktop.
Save anuwatb/b8d0c748441d81006103 to your computer and use it in GitHub Desktop.
Download ZIP
Chord Diagram from a Web Application That Can Combine Data Records
Raw
readme.md

This chord diagram is a result of code that can be used to parse tabular data, no matter what the column names are, and treat rows as a divided row. It shows relationships between two attributes of citations documents by an institute received in 2015—subject areas the citing journals are associated with and who in the institute authored the documents.

Data files that are compatible with the code follow the following rules:

  • Data is stored in CSV format and the file was named data.csv.
  • The first line of the file is a header.
  • Rows of the same name (data in the first column) are the same thing and will be counted as 1 divided row—the value, i.e. 1, will be divided among the rows.
  • Data to be shown is in the second and third column.
  • Data in each field doesn't exceed 14 characters.
Raw
data.csv
CitingArticle Cited Subject
Locke et al., 2015 Laosinchai, P. Agricultural and Biological Sciences
Locke et al., 2015 Laosinchai, P. Biochemistry, Genetics and Molecular Biology
Yasri, 2015 Yasri, P. Social Sciences
Yang et al., 2015 Panjaburee, P. Computer Science
Yang et al., 2015 Panjaburee, P. Social Sciences
Chu et al., 2015 Panjaburee, P. Computer Science
Chu et al., 2015 Panjaburee, P. Social Sciences
Yang et al., 2015 Panjaburee, P. Computer Science
Yang et al., 2015 Panjaburee, P. Social Sciences
Chu et al., 2015 Panjaburee, P. Computer Science
Chu et al., 2015 Panjaburee, P. Social Sciences
Buaraphan & Abedin Forhad, 2015 Buaraphan, K. Social Sciences
Kim & Choi, 2015 Yodyingyong, S. Chemical Engineering
Kim & Choi, 2015 Yodyingyong, S. Chemistry
Kim & Choi, 2015 Yodyingyong, S. Engineering
Kim & Choi, 2015 Yodyingyong, S. Materials Science
Kim & Choi, 2015 Yodyingyong, S. Physics and Astronomy
Bretz & McClary, 2015 Ratanaroutai, T. Chemistry
Bretz & McClary, 2015 Ratanaroutai, T. Social Sciences
Panijpan et al., 2015 Sriwattanarothai, N. Biochemistry, Genetics and Molecular Biology
Panijpan et al., 2015 Sriwattanarothai, N. Medicine
Durand & Borsa, 2015 Sriwattanarothai, N. Agricultural and Biological Sciences
Durand & Borsa, 2015 Sriwattanarothai, N. Biochemistry, Genetics and Molecular Biology
Durand & Borsa, 2015 Sriwattanarothai, N. Immunology and Microbiology
Durand & Borsa, 2015 Sriwattanarothai, N. Medicine
Vu et al., 2015 Yodyingyong, S. Chemical Engineering
Vu et al., 2015 Yodyingyong, S. Environmental Science
Chang et al., 2015 Yodyingyong, S. Materials Science
Zhang et al., 2015 Ketpichainarong, W. Social Sciences
Buaraphan & Abedin Forhad, 2015 Buaraphan, K. Social Sciences
Cil, 2015 Buaraphan, K. Social Sciences
Buaraphan & Abedin Forhad, 2015 Buaraphan, K. Social Sciences
Di Russo et al., 2015 Chenprakhon, P. Biochemistry, Genetics and Molecular Biology
De Sancho et al., 2015 Chenprakhon, P. Chemistry
De Sancho et al., 2015 Chenprakhon, P. Computer Science
Cazade et al., 2015 Chenprakhon, P. Chemistry
Cazade et al., 2015 Chenprakhon, P. Medicine
Cazade et al., 2015 Chenprakhon, P. Physics and Astronomy
Raw
index.html
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<svg width="960" height="960"></svg>
<script>
d3.text("data.csv", function(error, datas) {
var dataf = d3.csv.parseRows(datas);
dataf.shift();
var text = [];
var nest = d3.nest()
.key(function(d) { return d[1]; })
.entries(dataf)
.sort(function(a, b) { return a.key < b.key ? -1 : 1; });
nest.forEach(function(d) {
text.push(d.key);
});
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(480, 480)");
var fill = d3.scale.category20();
var g = svg.selectAll(".group")
.data(chord.groups)
.enter()
.append("g")
.attr("class", "group");
g.append("path")
.attr("d", d3.svg.arc().innerRadius(350).outerRadius(370))
.style("fill", function(d) { return fill(d.index); })
.on("mouseover", standOut(0.1))
.on("mouseout", standOut(1));
g.append("text")
.attr("transform", function(d) {
return "rotate("+(((d.startAngle+d.endAngle)/2) * (180/Math.PI) - 90)+")"
+ "translate(376)" + (((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]; });
svg.selectAll(".chord")
.data(chord.chords)
.enter()
.append("path")
.attr("class", "chord")
.attr("d", d3.svg.chord().radius(350))
.style("fill", function(d) { return fill(d.source.index); })
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); });
function standOut(o) {
return function(d, i) {
var gstandout = [];
svg.selectAll(".chord")
.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", o);
svg.selectAll(".group")
.filter(function(e, j) { return gstandout.indexOf(j) == -1 && j != i; })
.style("opacity", o);
};
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment