Visualization of passes in a soccer game

A graph of passes done between players of Real Madrid in the 1st half of the 23.09.2014 game vs. Elche.

<!DOCTYPE html>
<html><head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <title>Real Madrid vs. Elche (1st half)</title>
<script src="d3.min.js"></script>
<script src="d3.rollup.v0.min.js"></script>

</head>
<style>
#tooltip {
        position: absolute;
        width: 150px;
        height: auto;
        padding: 5px;
        background-color: white;
		opacity: 0.8;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
        pointer-events: none;
}

#tooltip.hidden {
        display: none;
}

#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 12px;
        line-height: 16px;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}

</style>

<body>
<div id="tooltip" class="hidden">
        <p><strong>Player Detail</strong></p>
        <p>Name: <span id="name">100</span></p>
		<p>Number: <span id="number">100</span></p>
		<p>Position: <span id="pos">100</span></p>
</div>
	<script>
  	var scaleh = d3.scale.linear();
	var scalev = d3.scale.linear();
	var width = 1150,
	height = 720;
	
	function fx(d) { return d.x; };
	function fy(d) { return d.y; };
	
	var rollup = d3.rollup()
    .x(function(d) { return fx(d); })
    .y(function(d) { return fy(d); });

//var svg;
	
	
	
d3.xml("field.svg", function(xml) {
	svgdom = document.body.appendChild(xml.documentElement);

var svg = d3.select("svg");
	var defs = d3.select("defs");

scaleh.domain([0, width]);
	scaleh.range([0, 1268]);
	scalev.domain([0, height]);
	scalev.range([0, 808]);

d3.json("players.json", function(json) {

datap = json.nodes;

var datap_start = datap.filter( function (el){
		return el.Status == "starting"; });

json.nodes = datap_start;
	var graph = rollup(json);			
			
	var link = svg.selectAll(".link")
		.data(graph.links)
		.enter().append("g")
		.attr("class", "linkg");
    
	svg.selectAll(".linkg")
		.data(graph.links)
		.append("path")
		.attr("class", function(d) {
			return "link " + "from" + d.source.nodes[0].Number + " to" + d.target.nodes[0].Number;
		  })
		.attr("id" ,function(d) {
			return "link" + "from" + d.source.nodes[0].Number + "to" + d.target.nodes[0].Number;
		  })	  
		.attr("d", function(d) {
			var sx = d.source.x, sy = d.source.y,
			tx = d.target.x, ty = d.target.y,
			dx = tx - sx, dy = ty - sy,
			dr = 2 * Math.sqrt(dx * dx + dy * dy);
			return "M" + sx + "," + sy + "A" + dr + "," + dr + " 0 0,1 " + tx + "," + ty;
		  })
		.style("stroke", "grey")
		.style("stroke-width", function(d) { 
			return d.value * 2; 
		  });
	  
	var node = svg.selectAll(".node")
		.data(graph.nodes)
		.enter().append("g")
		.attr("class", "node")
		.style("pointer-events", "all")
		.append("circle")
		.attr("cx", function(d, i){ 
			return d.x})
		.attr("cy", function(d, i){ return d.y})
		.attr("r", 10)
		.attr("filter","url(#f3)")
		.style("fill", "white")
		.style("stroke", "grey")
		.style("stroke-width", "1")	
		.on("mouseover", function(d) {

var xPosition = scaleh(50 + parseFloat(d3.select(this).attr("cx")));
			var yPosition = scalev(10 + parseFloat(d3.select(this).attr("cy")));

d3.selectAll(".to" + d.nodes[0].Number + ":not(.pathlabel)")
			.transition()
			.duration(10)
			.style("stroke", "orange")
			.style("display", "block")
			.style("stroke-opacity", ".7")
			;
			
			d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)")
			.transition()
			.duration(10)
			.style("stroke", "blue")
			.style("display", "block")
			.style("stroke-opacity", ".7")
			;

d3.selectAll(".pathlabel.to" + d.nodes[0].Number)
			.style("fill", "orange")
			.style("stroke", "white")
			.style("display", "block");
			
			d3.selectAll(".pathlabel.from" + d.nodes[0].Number)
			.style("fill", "blue")
			.style("stroke", "white")
			.style("display", "block");
			
			d3.select(this).style("fill", "LightGoldenRodYellow");

d3.select("#tooltip")
			  .style("left", xPosition + "px")
			  .style("top", yPosition + "px")
			  .select("#name")
			  .text(d.nodes[0].name);
			 
			d3.select("#tooltip") 
			  .select("#number")
			  .text(d.nodes[0].Number);

d3.select("#tooltip")
			  .select("#pos")
			  .text(d.nodes[0].Position);

d3.select("#tooltip").classed("hidden", false);
			   
		})
		.on("mouseout", function(d) {

d3.selectAll(".to" + d.nodes[0].Number + ":not(.pathlabel)")
			.style("stroke", "grey")
			.style("stroke-opacity", ".2");

d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)")
			.style("stroke", "grey")
			.style("stroke-opacity", ".2");
			
			d3.selectAll(".pathlabel")
			.style("fill", "grey")
			.style("display", "none");

d3.select("#tooltip").classed("hidden", true);
			d3.select(this).style("fill", "white");
		});
			
		svg.selectAll(".node")
			.data(graph.nodes)
			.append("text")
		   .text(function(d, i) {   
				return d.nodes[0].Number;
		   })
		   .attr("x", function(d, i) {
				return d.x;
		   })
		   .attr("y", function(d, i) {
				return d.y ;
		   })
		   .style("font-family", "sans-serif")
		   .style("font-size", "11px")
		   .style("text-anchor", "middle")
		   .style("dominant-baseline", "central")
		   .style("stroke", "black")
		   .style("pointer-events", "none");
		 
		 svg.selectAll("textpaths")
			.data(graph.links)
			.enter()
			.append("text")			
			.style("font-size", "12px")
			.attr("class", "texts")
			.attr("x", "0")
			.attr("y", "0")
			.append("textPath")
			.attr("class", function(d) {
				return "pathlabel " + "from" + d.source.nodes[0].Number + " to" + d.target.nodes[0].Number;
			})
			.attr("xlink:href", function(d) { 
				return '#' + "link" + "from" + d.source.nodes[0].Number + "to" + d.target.nodes[0].Number 
			})
			.text(function(d) { 
				return d.value;
			})
			.attr("startOffset", "40%")
			.style("stroke", "black")
			.attr("filter","url(#f3)")
			.style("fill", "white")
			.style("font-family", "sans-serif")	
			.style("display", "none");

});
});

</script>
	</body>
</html>