<commit_before><!DOCTYPE html>
<meta charset="utf-8">
<title>Similarities Visualization</title>
<style>

@import url(style.css);
 
#circle circle {
fill: none;
pointer-events: all;
}
 
.group path {
fill-opacity: .5;
}
 
path.chord {
stroke: #000;
stroke-width: .25px;
}
 
#circle:hover path.fade {
display: none;
}
 
</style>
 
<header>

</header>


 
<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<script>
 
var width = 1080,
height = 1080,
outerRadius = Math.min(width, height) / 2 ,
innerRadius = outerRadius - 20;
 
var formatPercent = d3.format(".1f");
 
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
 
var layout = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.ascending);
 
var path = d3.svg.chord()
.radius(innerRadius);
 
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "circle")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
svg.append("circle")
.attr("r", outerRadius);
 
d3.csv("Names.csv", function(cities) {
d3.json("matrix.json", function(matrix) {
 
// Compute the chord layout.
layout.matrix(matrix);
 
// Add a group per neighborhood.
var group = svg.selectAll(".group")
.data(layout.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", mouseover);
 
// Add a mouseover title.
 group.append("title").text(function(d, i) {
 return cities[i].name + ": " + formatPercent(d.value) + " ";
 });
 
// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", arc)
.style("fill", function(d, i) { return cities[i].color; });
 
// Add a text label.
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) { if (cities[i].name.split(" --- ").length > 1) return cities[i].name.split(" --- ")[1]; else return cities[i].name; });
 
// Remove the labels that don't fit. :(
groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
.remove();
 
// Add the chords.
var chord = svg.selectAll(".chord")
.data(layout.chords)
.enter().append("path")
.attr("class", "chord")
.style("fill", function(d) { return cities[d.source.index].color; })
.attr("d", path);
 
// Add an elaborate mouseover title for each chord.
 chord.append("title").text(function(d) {
 return cities[d.source.index].name
 + " → " + cities[d.target.index].name
 + ": " + formatPercent(d.source.value)
 + "\n" + cities[d.target.index].name
 + " → " + cities[d.source.index].name
 + ": " + formatPercent(d.target.value);<commit_msg>visualization changes<commit_after><!DOCTYPE html>
<meta charset="utf-8">
<title>Similarities Visualization</title>
<style>

@import url(style.css);
 
#circle circle {
fill: none;
pointer-events: all;
}
 
.group path {
fill-opacity: .5;
}
 
path.chord {
stroke: #000;
stroke-width: .25px;
}
 
#circle:hover path.fade {
display: none;
}
 
</style>
 
<header>

</header>


 
<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<script>
 
var width = 1080,
height = 1080,
outerRadius = Math.min(width, height) / 2 - 300, // make a bit smaller so that text doesn't crop
innerRadius = outerRadius - 20;
 
var formatPercent = d3.format(".f%");
 
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
 
var layout = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.ascending);
 
var path = d3.svg.chord()
.radius(innerRadius);
 
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "circle")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")"); // leave some more slack
 
svg.append("circle")
.attr("r", outerRadius);
 
d3.csv("Names.csv", function(cities) {
d3.json("matrix.json", function(matrix) {
 
// Compute the chord layout.
layout.matrix(matrix);
 
// Add a group per neighborhood.
var group = svg.selectAll(".group")
.data(layout.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", mouseover);
 
// Add a mouseover title.
 group.append("title").text(function(d, i) {
 return cities[i].name + ": " + formatPercent(d.value) + " ";
 });
 
// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", arc)
.style("fill", function(d, i) { return cities[i].color; });
 
// Add a text label.
/*
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) { if (cities[i].name.split(" --- ").length > 1) return cities[i].name.split(" --- ")[1]; else return cities[i].name; });
 
// Remove the labels that don't fit. :(
groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
.remove();
*/
  
      var groupText = group.append("text")
      .each(function(d) {
        d.angle = 0.5 * (d.startAngle + d.endAngle);            // The angle of the label
      })
      .attr("dy", "1em")                                        // ... or anything really
      .attr("transform", function(d) {
        return "rotate(" + (d.angle*180 / Math.PI - 90) + ")" + // rotate the text according to the angle
          "translate(" + (outerRadius + 10) + ")" +             // move it outside the graph
          (d.angle > Math.PI ? "rotate(180)" : "");             // make readable
      })
      .style("text-anchor", function(d) {
        return d.angle > Math.PI ? "end" : null;                // make readable pt. II
      })
      .text(function(d, i) {                                    // name same as previously
        if (cities[i].name.split(" --- ").length > 1) 
            return cities[i].name.split(" --- ")[1]; 
        else return cities[i].name; 
    });
  
  
  

 
// Add the chords.
var chord = svg.selectAll(".chord")
.data(layout.chords)
.enter().append("path")
.attr("class", "chord")
.style("fill", function(d) { return cities[d.source.index].color; })
.attr("d", path);
 
// Add an elaborate mouseover title for each chord.
 chord.append("title").text(function(d) {
 return cities[d.source.index].name
 + " → " + cities[d.target.index].name
 + ": " + formatPercent(d.source.value)
 + "\n" + cities[d.target.index].name
 + " → " + cities[d.source.index].name
 + ": " + formatPercent(d.target.value);
{'fraction_non_alphanumeric': 0.20881138136759983, 'fraction_numerical': 0.01698026617714548, 'mean_word_length': 3.355762824783478, 'pattern_counts': {'":': 6, '<': 27, '<?xml version=': 0, '>': 30, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7512062', 'n_tokens_mistral': 2434, 'n_tokens_neox': 2283, 'n_words': 514}