Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/index.html

Last active December 22, 2015 11:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GerardoFurtado/8ea58464c839386fa8f4 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/8ea58464c839386fa8f4 to your computer and use it in GitHub Desktop.
Download ZIP
All the champions, all the goals
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>All the champions, all the goals</title>
<style type="text/css">
body {
background-color: white;
font-family: 'PT Serif', serif;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 1px 10px 10px 10px;
background-color: white;
box-shadow: 1px 1px 1px 1px #fff;
}
h1 {
font-weight: 400;
color: black;
font-family: 'PT Sans', sans-serif;
font-size: 60px;
margin-bottom: 10px;
margin-top: 30px;
padding-left: 90px;
}
h2 {
font-weight: 400;
color: black;
font-family: 'PT Sans', sans-serif;
font-size: 24px;
margin-bottom: 10px;
margin-top: 30px;
padding-left: 90px;
}
p {
font-size: 18px;
width: 820px;
margin-top: 10px;
padding-left: 90px;
margin-bottom: 10px;
}
a {
color: steelblue;
}
a:hover {
color: darkslategray;
}
.footer {
font-size: 14px;
margin-top: 0px;
}
svg {
background-color: white;
margin-left: auto;
margin-right: auto;
display: block;
}
.chord path {
fill-opacity: .67;
stroke: #000;
stroke-width: .5px;
}
.textlabel {
pointer-events: none;
}
div.tooltip {
position: absolute;
text-align: center;
white-space: normal;
padding: 2px;
font-size: 14px;
background: whitesmoke;
border: 1px solid gray;
border-radius: 4px;
pointer-events: none;
cursor: none;
font-family: "Roboto";
font-size: 16px;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div id="container">
<h1>All the champions, all the goals</h1>
<p>This chord diagram shows all the goals scored and conceded by all the World Cup winners, in all matches held between them (not only on World Cups). Hover over any team to see the total of goals scored and conceded by that team. Hover over any chord to see the relationship between two teams.</p>
<div id="svganchor"></div>
<p>This chord diagram was inspired by the stunning Martin Krzywinski’s <a href="http://circos.ca">Circos</a>, which I used to make my first, <a href="https://oidamen.wordpress.com/2014/06/15/all-the-champions-all-the-goals/">non-interactive version</a> of this diagram. Almost all the code here was written by <a href="http://bl.ocks.org/mbostock/4062006">Mike Bostock</a>, I only changed the data (of course!), the colors, the number of ticks, the transparencies for the chords, the tooltips for the teams and the tooltips for the chords.</p>
<h2>How to read this diagram?</h2>
<p>The diagram shows all the 2427 goals scored on all matches held between the World Cup winners (Brazil, Spain, Germany, Italy, France, Argentina, England, Uruguay). The very first thing you’ll notice are the external arcs, where the names of the teams are written. The ticks outside the arcs show the number of goals scored by a given team:</p>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="55.149mm" width="80.684mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 285.88907 195.4087" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g transform="translate(-87.483 -124.95)">
<path id="a" fill="#7f7f7f" d="m99.509 300.11a360.8 360.8 0 0 1 271.7 -145.33l1.6393 32.759a328 328 0 0 0 -247 132.12z" stroke="#7f7f7f"/>
<text x="6" dy="22" transform="translate(-1.242 -.063151)" class="textlabel">
<textPath font-size="18px" xlink:href="#a" startOffset="15.000001%" font-family="Roboto" fill="#000000">Uruguay</textPath>
</text>
<g transform="translate(389.24 515.13)">
<g transform="matrix(-.80303 -.59594 .59594 -.80303 -289.73 -215.02)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">0</text>
</g>
<g transform="matrix(-.78835 -.61523 .61523 -.78835 -284.44 -221.98)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.77320 -.63416 .63416 -.77320 -278.97 -228.8)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.75760 -.65271 .65271 -.75760 -273.34 -235.5)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.74156 -.67089 .67089 -.74156 -267.56 -242.06)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.72508 -.68866 .68866 -.72508 -261.61 -248.47)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">50</text>
</g>
<g transform="matrix(-.70818 -.70603 .70603 -.70818 -255.51 -254.74)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.69086 -.72299 .72299 -.69086 -249.26 -260.86)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.67313 -.73952 .73952 -.67313 -242.87 -266.82)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.65501 -.75562 .75562 -.65501 -236.33 -272.63)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.63650 -.77128 .77128 -.63650 -229.65 -278.28)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">100</text>
</g>
<g transform="matrix(-.61762 -.78648 .78648 -.61762 -222.84 -283.76)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.59837 -.80122 .80122 -.59837 -215.89 -289.08)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.57878 -.81549 .81549 -.57878 -208.82 -294.23)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.55884 -.82927 .82927 -.55884 -201.63 -299.2)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.53858 -.84258 .84258 -.53858 -194.32 -304)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">150</text>
</g>
<g transform="matrix(-0.518 -.85538 .85538 -0.518 -186.89 -308.62)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.49711 -.86769 .86769 -.49711 -179.36 -313.06)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.47593 -.87948 .87948 -.47593 -171.72 -317.32)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.45448 -.89076 .89076 -.45448 -163.98 -321.39)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.43275 -.90151 .90151 -.43275 -156.14 -325.27)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">200</text>
</g>
<g transform="matrix(-.41078 -.91174 .91174 -.41078 -148.21 -328.95)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.38856 -.92143 .92143 -.38856 -140.19 -332.45)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.36611 -.93057 .93057 -.36611 -132.09 -335.75)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.34345 -.93917 .93917 -.34345 -123.92 -338.85)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.32058 -.94722 .94722 -.32058 -115.67 -341.76)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">250</text>
</g>
<g transform="matrix(-.29753 -.95471 .95471 -.29753 -107.35 -344.46)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.27430 -.96164 .96164 -.27430 -98.967 -346.96)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.25091 -.96801 .96801 -.25091 -90.529 -349.26)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.22737 -.97381 .97381 -.22737 -82.037 -351.35)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.20370 -.97903 .97903 -.20370 -73.496 -353.23)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">300</text>
</g>
<g transform="matrix(-.17991 -.98368 .98368 -.17991 -64.913 -354.91)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.15602 -.98775 .98775 -.15602 -56.291 -356.38)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.13203 -.99125 .99125 -.13203 -47.637 -357.64)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.10797 -.99415 .99415 -.10797 -38.954 -358.69)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.083838 -.99648 .99648 -.083838 -30.249 -359.53)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">350</text>
</g>
<g transform="matrix(-.059661 -.99822 .99822 -.059661 -21.526 -360.16)">
<line x1="1" stroke="#000" x2="4"/>
<text style="text-anchor:end" font-size="12px" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
</g>
</g>
</svg>
<br>
<p>Uruguay scored 364 goals, just a little more than the 350 on the label (each tick represents 10 goals). If you hover over Uruguay, you’ll see that Uruguay conceded 499 goals. Now let’s go to the chords. Each chord goes from one team to other. The width at each base represents the number of goals that that team scored (and that the other one conceded). The color of the chord is that of the team that scored more goals (that is, where the width is bigger). Let's see the data regarding England versus Spain:</p>
<br>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="232.15" width="770.87" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<marker id="a" refY="0" refX="0" orient="auto" overflow="visible">
<path stroke-linejoin="round" d="m8.7186 4.0337-10.926-4.0177 10.926-4.0177c-1.7455 2.3721-1.7354 5.6175-6e-7 8.0354z" fill-rule="evenodd" transform="matrix(-1.1,0,0,-1.1,-1.1,0)" stroke="#000" stroke-width=".625"/>
</marker>
<marker id="b" refY="0" refX="0" orient="auto" overflow="visible">
<path stroke-linejoin="round" d="m8.7186 4.0337-10.926-4.0177 10.926-4.0177c-1.7455 2.3721-1.7354 5.6175-6e-7 8.0354z" fill-rule="evenodd" transform="matrix(-1.1,0,0,-1.1,-1.1,0)" stroke="#000" stroke-width=".625"/>
</marker>
</defs>
<path d="m702.48 54.32a360.8 360.8 0 0 1 38.957 147.71l-32.767 1.4606a328 328 0 0 0 -35.41 -134.28z" stroke="#ff7f0e" fill="#ff7f0e"/>
<path id="c" fill="#e377c2" stroke="#e377c2" d="m21.64 231.44a360.8 360.8 0 0 1 60.438 -213.61l27.282 18.21a328 328 0 0 0 -54.942 194.18z"/>
<path fill="#e377c2" d="m67.69 124.98a328 328 0 0 1 10.194 -29.27q304.31 122.39 622.26 41.825a328 328 0 0 1 4.1465 18.623q-322.1 61.94-636.6-31.18z"/>
<g transform="translate(382.19 218.1)">
<g transform="matrix(.89103 -.45394 .45394 .89103 321.48 -163.78)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0">0</text>
</g>
<g transform="matrix(.90177 -.43221 .43221 .90177 325.36 -155.94)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.91199 -.41022 .41022 .91199 329.04 -148.01)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.92166 -0.388 0.388 .92166 332.54 -139.99)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.93079 -.36554 .36554 .93079 335.83 -131.89)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.93938 -.34288 .34288 .93938 338.93 -123.71)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0">50</text>
</g>
<g transform="matrix(.94742 -.32001 .32001 .94742 341.83 -115.46)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.95489 -.29695 .29695 .95489 344.53 -107.14)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.96181 -.27372 .27372 .96181 347.02 -98.757)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.96816 -.25032 .25032 .96816 349.31 -90.317)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.97395 -.22678 .22678 .97395 351.4 -81.824)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0">100</text>
</g>
<g transform="matrix(.97916 -.20311 .20311 .97916 353.28 -73.282)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.98379 -.17932 .17932 .98379 354.95 -64.698)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.98785 -.15542 .15542 .98785 356.42 -56.075)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.99133 -.13143 .13143 .99133 357.67 -47.42)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.99422 -.10736 .10736 .99422 358.71 -38.737)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0">150</text>
</g>
<g transform="matrix(.99653 -.083234 .083234 .99653 359.55 -30.031)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
<g transform="matrix(.99825 -.059056 .059056 .99825 360.17 -21.307)">
<line x2="4" stroke="#000" x1="1"/>
<text x="8" font-size="12px" dy="0"/>
</g>
</g>
<g transform="translate(382.19 218.1)">
<g transform="matrix(-.99932 .036958 -.036958 -.99932 -360.55 13.335)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">0</text>
</g>
<g transform="matrix(-.99992 .012726 -.012726 -.99992 -360.77 4.5915)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.99993 -.011514 .011514 -.99993 -360.78 -4.1543)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.99936 -.035747 .035747 -.99936 -360.57 -12.898)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.99820 -.059959 .059959 -.99820 -360.15 -21.633)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.99645 -.084136 .084136 -.99645 -359.52 -30.356)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">50</text>
</g>
<g transform="matrix(-.99412 -.10826 .10826 -.99412 -358.68 -39.062)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.99121 -.13233 .13233 -.99121 -357.63 -47.744)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.98771 -.15631 .15631 -.98771 -356.36 -56.398)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.98363 -.18021 .18021 -.98363 -354.89 -65.019)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.97897 -0.204 0.204 -.97897 -353.21 -73.602)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">100</text>
</g>
<g transform="matrix(-.97374 -.22767 .22767 -.97374 -351.33 -82.142)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.96794 -.25120 .25120 -.96794 -349.23 -90.633)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.96156 -.27459 .27459 -.96156 -346.93 -99.071)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.95462 -.29781 .29781 -.95462 -344.43 -107.45)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.94713 -.32086 .32086 -.94713 -341.72 -115.77)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">150</text>
</g>
<g transform="matrix(-.93907 -.34373 .34373 -.93907 -338.82 -124.02)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.93046 -.36639 .36639 -.93046 -335.71 -132.19)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.92131 -.38883 .38883 -.92131 -332.41 -140.29)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.91161 -.41105 .41105 -.91161 -328.91 -148.31)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.90138 -.43302 .43302 -.90138 -325.22 -156.23)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">200</text>
</g>
<g transform="matrix(-.89062 -.45474 .45474 -.89062 -321.34 -164.07)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.87934 -.47620 .47620 -.87934 -317.27 -171.81)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.86754 -.49737 .49737 -.86754 -313.01 -179.45)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.85523 -.51825 .51825 -.85523 -308.57 -186.99)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8"/>
</g>
<g transform="matrix(-.84241 -.53883 .53883 -.84241 -303.94 -194.41)">
<line x2="4" stroke="#000" x1="1"/>
<text font-size="12px" style="text-anchor:end" transform="matrix(-1,0,0,-1,16,0)" dy="0" x="8">250</text>
</g>
</g>
<text style="word-spacing:0px;letter-spacing:0px" xml:space="preserve" font-size="15px" y="35.155697" x="168.98671" font-family="sans-serif" line-height="125%" fill="#000000"><tspan x="168.98671" y="35.155697">Larger here...</tspan></text>
<text style="word-spacing:0px;letter-spacing:0px" xml:space="preserve" font-size="15px" y="48.013382" x="559.30927" font-family="sans-serif" line-height="125%" fill="#000000"><tspan x="559.30927" y="48.013382">...than here</tspan></text>
<path marker-end="url(#b)" d="m77.929 111.36 87.021-75.328" stroke="#000" stroke-width="1px" fill="none"/>
<path marker-end="url(#a)" d="m640.32 54.215 50.654 90.918" stroke="#000" stroke-width="1px" fill="none"/>
<text style="word-spacing:0px;letter-spacing:0px" xml:space="preserve" transform="matrix(.97291 .23119 -.23119 .97291 77.57 -69.34)" font-size="15px" y="-70.52018" x="33.467205" font-family="sans-serif" line-height="125%" fill="#000000"><textPath xlink:href="#c"><tspan>England</tspan></textPath></text>
<text style="word-spacing:0px;letter-spacing:0px" xml:space="preserve" transform="rotate(75.857)" font-size="15px" y="-656.15594" x="275.93759" font-family="sans-serif" line-height="125%" fill="#000000"><tspan x="275.93759" y="-656.15594">Spain</tspan></text>
</svg>
<br>
<p>The chord width is bigger at England’s end than at Spain’s end, meaning that England scored more goals against Spain than Spain scored against England. This can be easily seen by the color of the chord, which follows the color of England. Actually, even easier if you hover over the cord and see the tooltip.</p>
<p>Brazil is the only team with all the chords on its color, meaning that it’s the only team that, for each opponent, scored more goals than conceded. But there is a catch: The data is not up-to-date, I’m using the same data that I used for creating my non-interactive version, on June 2014. This means that the epic 7-1 is not here! If I update the data I’ll upload a new version of the diagram.</p>
<p>Source of the data: <a href="http://www.11v11.com">www.11v11.com</a></p>
<p class="footer">Created by Gerardo Furtado.</p>
</div>
<script type="text/javascript">
var w = 800;
var h = 800;
var padding = [ 10, 10, 10, 10 ]; //Top, right, bottom, left
//countries' order is: Brazil, Spain, Germany, Italy, France, Argentina, England, Uruguay
var matrix = [
[0,15,42,30,21,162,34,129],
[8,0,23,31,61,13,24,16],
[24,27,0,36,42,28,42,28],
[23,30,48,0,75,22,29,7],
[17,36,41,44,0,7,36,3],
[160,17,28,13,12,0,15,306],
[23,39,67,31,67,21,0,10],
[96,8,8,7,3,229,13,0]
];
//this creates the names on the arcs
var teams = ["Brazil", "Spain", "Germany", "Italy", "France", "Argentina", "England", "Uruguay"];
//the chord layout
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
var innerRadius = Math.min(w, h) * .41,
outerRadius = innerRadius * 1.1;
var fill = d3.scale.category10();
//the tooltips
var tt = d3.select("#svganchor").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("#svganchor")
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
svg.append("g").selectAll("path")
.data(chord.groups)
.enter().append("path")
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr("id", function(d, i) { return teams[i]})
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("mouseover", fade(.1))
.on("mousemove", toolt)
.on("mouseout", function() {
d3.selectAll(".chord path")
.style("opacity", 1);
tt.style("opacity", 0);
});
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) {
if (d.source.value >= d.target.value) {
return fill(d.source.index);
} else {
return fill(d.target.index);
}
})
.style("opacity", 1)
.on("mousemove", chordtip)
.on("mouseout", function(){
tt.style("opacity", 0)
d3.selectAll(".chord path")
.style("opacity", 1);
});
svg.append("g").selectAll("text")
.data(chord.groups)
.enter()
.append("text")
.attr("x", 6)
.attr("dy", 22)
.attr("class", "textlabel")
.append("textPath")
.attr("fill", "black")
.attr("startOffset", "15%")
.attr("font-family", "Roboto")
.attr("font-size", 18)
.attr("xlink:href", function(d, i){return "#"+teams[i];})
.text(function(d,i) {return teams[i];});
var ticks = svg.append("g").selectAll("g")
.data(chord.groups)
.enter().append("g").selectAll("g")
.data(groupTicks)
.enter().append("g")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + outerRadius + ",0)";
});
ticks.append("line")
.attr("x1", 1)
.attr("y1", 0)
.attr("x2", 4)
.attr("y2", 0)
.style("stroke", "#000");
ticks.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.attr("font-size", 12)
.text(function(d) { return d.label; });
function groupTicks(d) {
var k = (d.endAngle - d.startAngle) / d.value;
return d3.range(0, d.value, 10).map(function(v, i) {
return {
angle: v * k + d.startAngle,
label: i % 5 ? null : v
};
});
}
function fade(opacity) {
return function(g, i) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.style("opacity", opacity);
};
}
//the tooltip for the arcs
function toolt(d) {
var sum = function(arr) {
return arr.reduce(function(a, b){
return a + b;
}, 0);
};
var conced = sum(matrix.map(function(row) {
return row[d.index];
}));
tt.html("In total, " + this.id + " scored " + d.value + " goals<br>and conceded " + conced + " goals")
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 0.9);
}
//and the tooltip for the chords
function chordtip(d) {
tt.html("In matches between " + teams[d.source.index] + " and " + teams[d.target.index] + ",<br>" + teams[d.source.index] + " scored " + d.source.value + " goals,<br>while " + teams[d.target.index] + " scored " + d.target.value + " goals")
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 0.9);
d3.selectAll(".chord path")
.style("opacity", .1);
d3.select(this)
.style("opacity", 1);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment