Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Last active August 29, 2015 14:12
Show Gist options
  • Save Pabloska/02defbc80b6017c45d57 to your computer and use it in GitHub Desktop.
Save Pabloska/02defbc80b6017c45d57 to your computer and use it in GitHub Desktop.
Download ZIP
Languages
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" type = "text/css" href="css/style.css">
<style>
#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>
</head>
<header>
<h1>Similarity of European Languages </h1>
</header>
<p1>Built with <a href="http://d3js.org/">d3.js</a> by<a href="https://www.linkedin.com/profile/public-profile-settings?trk=prof-edit-edit-public_profile"> Pablo Gallego</a></p1>
<p1>.Source data by <a href="http://jordic.com/langsim/">Jordi Colomer Matutano</a></p1>
<aside>This chord diagram shows the degree of similarity between some European languages according to data provided by <a href="http://jordic.com/langsim/"> Jordi Colomer</a>. Notice that, despite the similarity rate in some cases is insignificant each laguage shows certain grade of similarity with all the rest. Nevertheless, values of less than 30% of similarity have been ignored in order to show only important features.
Although some relationhips could be arguable, the diagram shows wellknown conexions such as Bosnian and Croatian with a 90% of similarity, or the lack of similarity between Hungarian and the rest of the European languges.
(*)Mouseover to focus on a particular language.</aside>
<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<script>
var width = 575,
height = 575,
outerRadius = Math.min(width, height) / 2 - 50,
innerRadius = outerRadius - 24;
var formatPercent = d3.format("%");
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var layout = d3.layout.chord()
.padding(.01)
.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("languages_names.csv", function(cities) {
d3.json("languages_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) + " of origins";
// });
// 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")
//Use this parameters to control labels when they go around the circle
//.attr("x", 5)
//.attr("dy", 15)
.attr("text-anchor", function(d) { return ((d.startAngle + d.endAngle) / 2) > Math.PI ? "end" : null; })
.attr("transform", function(d) {
return "rotate(" + (((d.startAngle + d.endAngle) / 2) * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 30) + ")"
+ (((d.startAngle + d.endAngle) / 2) > Math.PI ? "rotate(180)" : "");
})
.text(function(d, i) { return cities[i].name; });
// Remove the labels that don't fit. ( Use it when labels are located around the cirle )
//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/100)+ " of Similarity"
//+ "/n" + " according to"
//+ " → " + cities[d.source.index].name
//+ ": " + formatPercent(d.target.value);
});
function mouseover(d, i) {
chord.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
});
});
</script>
Raw
languages_matrix.json
[
[0,68,0,35,0,77,42,0,0,0,0,31,0,32,32,35,0,30,0,43,33,44],
[68,0,0,34,0,62,39,0,0,0,0,30,0,30,33,35,0,0,0,40,30,41],
[0,0,0,49,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[35,34,49,0,0,32,30,0,0,0,0,0,0,0,0,33,0,0,0,0,0,31],
[0,0,0,0,0,0,0,30,0,0,0,0,32,0,35,37,0,0,0,0,0,0],
[77,62,0,32,0,0,40,0,0,0,0,0,0,30,31,33,0,0,0,42,32,43],
[42,39,0,30,0,40,0,0,0,0,0,35,0,39,32,32,0,37,37,35,42,39],
[0,0,0,0,30,0,0,0,40,44,0,0,38,0,43,45,0,0,0,0,0,0],
[0,0,0,0,0,0,0,40,0,70,0,0,46,0,48,51,0,0,0,0,0,0],
[0,0,0,0,0,0,0,44,70,0,0,0,51,0,50,54,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,30,0,0,0,0,0,0],
[31,30,0,0,0,0,35,0,0,0,0,0,0,44,32,35,0,41,41,0,40,0],
[0,0,0,0,32,0,0,38,46,51,0,0,0,0,66,66,0,0,0,0,0,0],
[32,30,0,0,0,30,39,0,0,0,0,44,0,0,31,32,0,56,55,0,46,0],
[32,33,0,0,35,31,32,43,48,50,0,32,66,31,0,91,0,30,31,0,0,0],
[35,35,0,33,37,33,32,45,51,54,30,35,66,32,91,0,31,31,31,0,0,31],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,31,0,0,0,0,0,0],
[30,0,0,0,0,0,37,0,0,0,0,41,0,56,30,31,0,0,66,0,44,0],
[0,0,0,0,0,0,37,0,0,0,0,41,0,55,31,31,0,66,0,0,44,0],
[43,40,0,0,0,42,35,0,0,0,0,0,0,0,0,0,0,0,0,0,0,44],
[33,30,0,0,0,32,42,0,0,0,0,40,0,46,0,0,0,44,44,0,0,31],
[44,41,0,31,0,43,39,0,0,0,0,0,0,0,0,31,0,0,0,44,31,0]
]
Raw
languages_names.csv
name color
Norwegian #F303FC
Swedish #B503FC
Finnish #6203FC
Estonian #1804C9
Lithuanian #066BF8
Danish #06A7F8
English #06F8F8
Polish #06F897
Czech #06F842
Slovak #63F806
Hungarian #8BF806
Romanian #B7F806
Slovene #E0F806
Italian #F8E806
Croatian #F8CC06
Bosnian #F89F06
Turkish #F88706
Spanish #F84E06
Portuguese #D74629
German #FF0000
French #FF0080
Dutch #FF00B3
Raw
style.css
html {
min-width: 1040px;
}
body {
background: #fcfcfa;
color: #333;
font-family: "PT Serif", serif;
margin: 1em auto 4em auto;
position: relative;
top:100;
width: 960px;
}
header,
footer,
h1,
h2,
h3,
h4,
aside {
color: #000;
font-family: "PT Sans", sans-serif;
}
h1 {
font-size: 50px;
font-weight: 300;
letter-spacing: -2px;
margin: 0 0 0 0;
}
h2 {
margin-top: 2em;
}
h1, h2 {
text-rendering: optimizeLegibility;
}
h2 a {
color: #ccc;
left: -20px;
position: absolute;
width: 740px;
}
footer {
font-size: small;
margin-top: 8em;
}
header aside {
margin-top: 88px;
}
header aside,
footer aside {
color: #636363;
text-align: right;
}
aside {
font-size: small;
text-align: justify;
right: 50px;
position: absolute;
top:100px;
width: 200px;
}
p1 {
font-size: small;
}
}
.attribution {
font-size: small;
margin-bottom: 2em;
}
body > p, li > p {
line-height: 1.5em;
}
body > p {
width: 600px;
}
body > blockquote {
width: 600px;
}
blockquote q {
display: block;
font-style: oblique;
}
li {
width: 680px;
}
a {
color: steelblue;
}
a:not(:hover) {
text-decoration: none;
}
pre, code, textarea {
font-family: "Menlo", monospace;
}
code {
line-height: 1em;
}
textarea {
font-size: 100%;
}
body > pre {
border-left: solid 2px #ccc;
padding-left: 18px;
margin: 2em 0 2em -20px;
}
.html .value,
.javascript .string,
.javascript .regexp {
color: #756bb1;
}
.html .tag,
.css .tag,
.javascript .keyword {
color: #3182bd;
}
.comment {
color: #636363;
}
.html .doctype,
.javascript .number {
color: #31a354;
}
.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
color: #e6550d;
}
svg {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
sup, sub {
line-height: 0;
}
q:before {
content: "“";
}
q:after {
content: "”";
}
blockquote:before {
position: absolute;
left: 2em;
}
blockquote:after {
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment