matt-bernhardt/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an attempt to reconstruct the passing matrix for soccer players. It was originally developed by the MLS website, but then abandoned more than a year ago.

  
## index.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Reconstructed Passing Chord Diagram</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link href="style.css" rel="stylesheet" type='text/css' />
</head>
<body>
	<div id="chart"></div>
	<script src="passing.js" charset="utf-8"></script>
</body>
</html>

## passing.js
var cWidth = 720,
    cHeight = 720,
    cOuterRadius = Math.min(cWidth, cHeight) / 2 - 10,
    cInnerRadius = cOuterRadius - 24;

var formatPercent = d3.format(".1%");

var arc = d3.svg.arc()
    .innerRadius(cInnerRadius)
    .outerRadius(cOuterRadius);

var layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(cInnerRadius);

var svgChord = d3.select("#chart").append("svg")
    .attr("width", cWidth)
    .attr("height", cHeight)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + cWidth / 2 + "," + cHeight / 2 + ")");

svgChord.append("circle")
    .attr("r", cOuterRadius)
    .attr("fill","#fff");

d3.csv("players.csv", function(cities) {
  d3.json("players.json", function(matrix) {

    // Compute the chord layout.
    layout.matrix(matrix);

    // Add a group per neighborhood.
    var group = svgChord.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) {
      console.log(d);
      return cities[i].name + ":\n"
        + Math.round(d.value) + " passes completed";
    });

    // 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) {
          console.log(i);
          console.log(d);
          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].abbv; });

    // 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 = svgChord.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 + ": " + Math.round(d.source.value) + " passes to " + cities[d.target.index].abbv + "\n"
          + cities[d.target.index].name + ": " + Math.round(d.target.value) + " passes to " + cities[d.source.index].abbv;
    });

    function mouseover(d, i) {
      chord.classed("fade", function(p) {
        return p.source.index != i
            && p.target.index != i;
      });
    }
  });
});

## players.csv

          
            name
            abbv
            color

            
              Steve Clark
              Clark
              rgba(255,212,7,0.7)

            
              Harrison Afful
              Afful
              rgba(255,212,7,0.7)

            
              Michael Parkhurst
              Parkhurst
              rgba(255,212,7,0.7)

            
              Tyson Wahl
              Wahl
              rgba(255,212,7,0.7)

            
              Corey Ashe
              Ashe
              rgba(255,212,7,0.7)

            
              Mohammed Saeid
              Saeid
              rgba(255,212,7,0.7)

            
              Wil Trapp
              Trapp
              rgba(255,212,7,0.7)

            
              Ethan Finlay
              Finlay
              rgba(255,212,7,0.7)

            
              Federico Higuain
              Higuain
              rgba(255,212,7,0.7)

            
              Justin Meram
              Meram
              rgba(255,212,7,0.7)

            
              Kei Kamara
              Kamara
              rgba(255,212,7,0.7)

            
              Waylon Francis
              Franics
              rgba(255,212,7,0.7)

## players.json
[
[0,3,5,6,0,2,1,0,0,1,2,0],
[0,0,10,2,0,9,8,6,14,1,2,0],
[5,6,0,5,1,7,1,1,0,3,1,0],
[5,1,3,0,8,10,8,0,2,3,2,2],
[0,0,0,8,0,8,1,0,3,5,5,0],
[0,7,2,8,8,0,8,2,14,7,3,1],
[0,9,3,8,0,4,0,5,6,5,4,0],
[0,6,0,0,0,2,3,0,6,3,3,0],
[0,16,0,0,2,12,8,6,0,8,1,0],
[0,0,0,3,6,3,4,1,12,0,3,2],
[0,2,0,0,1,1,2,1,2,4,0,1],
[0,0,0,2,0,2,1,0,1,1,0,0]
]

## style.css
body {
  font: 12px sans-serif;
}

path.fade {
	opacity: 0.5 !important;
}
path:hover {
	opacity: 1 !important;
	stroke-width: 1px;
	stroke: black;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Reconstructed Passing Chord Diagram</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link href="style.css" rel="stylesheet" type='text/css' />
	</head>
	<body>
	<div id="chart"></div>
	<script src="passing.js" charset="utf-8"></script>
	</body>
	</html>
	var cWidth = 720,
	cHeight = 720,
	cOuterRadius = Math.min(cWidth, cHeight) / 2 - 10,
	cInnerRadius = cOuterRadius - 24;

	var formatPercent = d3.format(".1%");

	var arc = d3.svg.arc()
	.innerRadius(cInnerRadius)
	.outerRadius(cOuterRadius);

	var layout = d3.layout.chord()
	.padding(.04)
	.sortSubgroups(d3.descending)
	.sortChords(d3.ascending);

	var path = d3.svg.chord()
	.radius(cInnerRadius);

	var svgChord = d3.select("#chart").append("svg")
	.attr("width", cWidth)
	.attr("height", cHeight)
	.append("g")
	.attr("id", "circle")
	.attr("transform", "translate(" + cWidth / 2 + "," + cHeight / 2 + ")");

	svgChord.append("circle")
	.attr("r", cOuterRadius)
	.attr("fill","#fff");

	d3.csv("players.csv", function(cities) {
	d3.json("players.json", function(matrix) {

	// Compute the chord layout.
	layout.matrix(matrix);

	// Add a group per neighborhood.
	var group = svgChord.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) {
	console.log(d);
	return cities[i].name + ":\n"
	+ Math.round(d.value) + " passes completed";
	});

	// 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) {
	console.log(i);
	console.log(d);
	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].abbv; });

	// 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 = svgChord.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 + ": " + Math.round(d.source.value) + " passes to " + cities[d.target.index].abbv + "\n"
	+ cities[d.target.index].name + ": " + Math.round(d.target.value) + " passes to " + cities[d.source.index].abbv;
	});

	function mouseover(d, i) {
	chord.classed("fade", function(p) {
	return p.source.index != i
	&& p.target.index != i;
	});
	}
	});
	});
name	abbv	color
Steve Clark	Clark	rgba(255,212,7,0.7)
Harrison Afful	Afful	rgba(255,212,7,0.7)
Michael Parkhurst	Parkhurst	rgba(255,212,7,0.7)
Tyson Wahl	Wahl	rgba(255,212,7,0.7)
Corey Ashe	Ashe	rgba(255,212,7,0.7)
Mohammed Saeid	Saeid	rgba(255,212,7,0.7)
Wil Trapp	Trapp	rgba(255,212,7,0.7)
Ethan Finlay	Finlay	rgba(255,212,7,0.7)
Federico Higuain	Higuain	rgba(255,212,7,0.7)
Justin Meram	Meram	rgba(255,212,7,0.7)
Kei Kamara	Kamara	rgba(255,212,7,0.7)
Waylon Francis	Franics	rgba(255,212,7,0.7)
	[
	[0,3,5,6,0,2,1,0,0,1,2,0],
	[0,0,10,2,0,9,8,6,14,1,2,0],
	[5,6,0,5,1,7,1,1,0,3,1,0],
	[5,1,3,0,8,10,8,0,2,3,2,2],
	[0,0,0,8,0,8,1,0,3,5,5,0],
	[0,7,2,8,8,0,8,2,14,7,3,1],
	[0,9,3,8,0,4,0,5,6,5,4,0],
	[0,6,0,0,0,2,3,0,6,3,3,0],
	[0,16,0,0,2,12,8,6,0,8,1,0],
	[0,0,0,3,6,3,4,1,12,0,3,2],
	[0,2,0,0,1,1,2,1,2,4,0,1],
	[0,0,0,2,0,2,1,0,1,1,0,0]
	]
	body {
	font: 12px sans-serif;
	}

	path.fade {
	opacity: 0.5 !important;
	}
	path:hover {
	opacity: 1 !important;
	stroke-width: 1px;
	stroke: black;
	}