Skip to content

Instantly share code, notes, and snippets.

@danharr
Last active August 29, 2015 13:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/9833333 to your computer and use it in GitHub Desktop.
Save danharr/9833333 to your computer and use it in GitHub Desktop.
Passes during a game
name latitude longitude population color
Aguero 37.7244 -122.421 0.083884 #3BB9FF
Barry 37.7107 -122.4372 0.058439 #3BB9FF
Cahill 37.697 -122.4534 0.032994 #0000A0
Davies 37.6833 -122.4696 0.007549 #0000A0
Dzeko 37.6696 -122.4858 -0.017896 #3BB9FF
Eagles 37.6559 -122.502 -0.043341 #0000A0
Hart 37.6422 -122.5182 -0.068786 #3BB9FF
Jaaskelainen 37.6285 -122.5344 -0.094231 #0000A0
Johnson 37.6148 -122.5506 -0.119676 #3BB9FF
Klasnic 37.6011 -122.5668 -0.145121 #0000A0
Knight 37.5874 -122.583 -0.170566 #0000A0
Kolarov 37.5737 -122.5992 -0.196011 #3BB9FF
Kompany 37.56 -122.6154 -0.221456 #3BB9FF
Lescott 37.5463 -122.6316 -0.246901 #3BB9FF
Milner 37.5326 -122.6478 -0.272346 #3BB9FF
Muamba 37.5189 -122.664 -0.297791 #0000A0
Petrov 37.5052 -122.6802 -0.323236 #0000A0
Pratley 37.4915 -122.6964 -0.348681 #0000A0
Reo-Coker 37.4778 -122.7126 -0.374126 #0000A0
Richards 37.4641 -122.7288 -0.399571 #3BB9FF
Robinson 37.4504 -122.745 -0.425016 #0000A0
Silva 37.4367 -122.7612 -0.450461 #3BB9FF
Steinsson 37.423 -122.7774 -0.475906 #0000A0
Tevez 37.4093 -122.7936 -0.501351 #3BB9FF
Toure 37.3956 -122.8098 -0.526796 #3BB9FF
Zabaleta 37.3819 -122.826 -0.552241 #3BB9FF
<!DOCTYPE html>
<meta charset="utf-8">
<title>MCFC Analytics with d3.js</title>
<style>
@import url(style.css);
@font-face{font-family:danx;src:url('http://www.24-the-movie.com/Barclays Premier League.ttf')}
#circle circle {
fill: none;
pointer-events: all;
}
.group path {
fill-opacity: .2;
}
path.chord {
stroke: #000;
stroke-width: .25px;
}
#circle:hover path.fade {
display: none;
}
</style>
<header>
<a href="http://bost.ocks.org/mike/uberdata/" rel="author">Based on previous work by Mike Bostock</a>
</header>
<h1>Passing Analysis using d3.js</h1>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script>
var width = 720,
height = 720,
outerRadius = Math.min(width, height) / 2 - 10,
innerRadius = outerRadius - 24;
var formatPercent = d3.format(".1%");
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("cities.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) + " of passes";
});
// 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) { 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 chod.
chord.append("title").text(function(d) {
return cities[d.source.index].name
+ " to " + cities[d.target.index].name
+ ": " + formatPercent(d.source.value)
+ "\n" + cities[d.target.index].name
+ " 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>
<footer>
<aside>Sept 16 2012</aside>
Dan J Harrington - @danjharrington
</footer>
</br>
[[ 0,0.0043,0,0,0,0,0,0,0,0,0,0.0014,0.0014,0,0.0043,0,0,0,0,0,0,0.0158,0,0,0.0029,0 ],
[ 0.0057,0,0,0,0.0029,0,0.0014,0,0,0,0,0.0072,0.0029,0.0043,0.0144,0,0,0,0,0.0043,0,0.0115,0,0.0043,0.0043,0 ],
[ 0,0,0.0014,0.0043,0,0.0029,0,0.0029,0,0.0029,0.0029,0,0,0,0,0.0014,0.0014,0,0.0029,0,0.0057,0,0.0014,0,0,0 ],
[ 0,0,0.0014,0.0029,0,0.0043,0,0,0,0.0115,0.0014,0,0,0,0,0.0029,0.0043,0.0014,0.0029,0,0.0057,0,0.0014,0,0,0 ],
[ 0.0072,0.0014,0,0,0,0,0,0,0,0,0,0.0014,0,0.0014,0.0057,0,0,0,0,0.0029,0,0.0072,0,0,0.0014,0 ],
[ 0,0,0.0029,0.0086,0,0,0,0,0,0.0086,0.0014,0,0,0,0,0.0043,0.0014,0,0.0057,0,0.0043,0,0.0043,0,0,0 ],
[ 0,0,0,0,0.0029,0,0,0,0,0,0,0.0029,0.0072,0.0029,0.0029,0,0,0,0,0,0,0,0,0.0014,0.0014,0 ],
[ 0,0,0,0.0187,0,0.0014,0,0,0,0.0014,0,0,0,0,0,0,0.0014,0.0014,0.0014,0,0.0029,0,0,0,0,0 ],
[ 0,0,0,0,0,0,0,0,0,0,0,0.0014,0,0,0,0,0,0,0,0,0,0,0,0.0014,0,0.0014 ],
[ 0,0,0,0.0072,0,0.0086,0,0,0,0,0,0,0,0,0,0,0.0101,0.0014,0.0072,0,0.0014,0,0,0,0,0 ],
[ 0,0,0.0029,0,0,0,0,0.0043,0,0.0029,0,0,0,0,0,0,0.0029,0,0.0029,0,0.0043,0,0,0,0,0 ],
[ 0,0.0043,0,0,0.0043,0,0.0043,0,0,0,0,0,0.0057,0.0029,0.0101,0,0,0,0,0.0014,0,0.0072,0,0.0072,0.0029,0 ],
[ 0.0029,0.0043,0,0,0,0,0.0101,0,0.0014,0,0,0.0014,0,0.0057,0,0,0,0,0,0.0057,0,0.0057,0,0,0.0115,0 ],
[ 0,0.0014,0,0,0.0014,0,0.0014,0,0,0,0,0.0115,0.0057,0,0.0086,0,0,0,0,0,0,0.0014,0,0,0.0086,0 ],
[ 0.0072,0.0129,0,0,0.0115,0,0.0014,0,0,0,0,0.0086,0,0.0029,0,0,0,0,0,0.0043,0,0.0172,0,0.0029,0.0129,0 ],
[ 0,0,0.0029,0.0029,0,0.0029,0,0,0,0.0014,0.0029,0,0,0,0,0,0.0014,0,0.0029,0,0.0014,0,0,0,0,0 ],
[ 0,0,0,0.0057,0,0.0072,0,0,0,0.0072,0.0014,0,0,0,0,0.0014,0,0,0.0172,0,0.0101,0,0,0,0,0 ],
[ 0,0,0,0.0014,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0014,0,0.0014,0,0,0 ],
[ 0,0,0.0029,0.0101,0,0.0029,0,0.0014,0,0.0129,0.0029,0,0,0,0,0.0072,0.0086,0,0,0,0.0043,0,0.0029,0,0,0 ],
[ 0.0029,0.0029,0,0,0.0072,0,0.0014,0,0,0,0,0,0.0029,0,0.0043,0,0,0,0,0,0,0.0072,0,0.0014,0.0101,0 ],
[ 0,0,0.0014,0.0029,0,0,0,0.0029,0,0.0057,0.0043,0,0,0,0,0,0.0259,0,0.0072,0,0,0,0.0014,0,0,0 ],
[ 0.0129,0.0086,0,0,0.0072,0,0,0,0,0,0,0.0072,0.0014,0,0.0216,0,0,0,0,0.0072,0,0,0,0.0029,0.0144,0 ],
[ 0,0,0.0029,0.0086,0,0.0043,0,0,0,0.0014,0,0,0,0,0,0,0,0,0.0043,0,0,0,0,0,0,0 ],
[ 0,0,0,0,0,0,0,0,0.0014,0,0,0.0043,0,0.0014,0.0043,0,0,0,0,0,0,0.0043,0,0,0,0.0014 ],
[ 0.0115,0.0115,0,0,0.0043,0,0.0014,0,0,0,0,0.0043,0.0115,0.0086,0.0101,0,0,0,0,0.0086,0,0.0115,0,0.0014,0,0.0014 ],
[ 0,0.0014,0,0,0,0,0,0,0.0014,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0014,0,0 ]]
html {
min-width: 1040px;
}
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 1em auto 4em auto;
position: relative;
width: 960px;
}
h1 {
font-family: danx,"Helvetica Neue", Helvetica, sans-serif;
font-size: 52px;
font-weight: 300;
letter-spacing: -2px;
margin: .3em 0 .1em 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;
right: 0;
position: absolute;
width: 180px;
}
.attribution {
font-size: small;
margin-bottom: 2em;
}
body > p, li > p {
line-height: 1.5em;
}
body > p {
width: 720px;
}
body > blockquote {
width: 640px;
}
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,
blockquote:before {
content: "“";
}
q:after,
blockquote: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