dianaow · February 13, 2020 01:30
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script type="text/javascript" src="helper.js"></script>
    <style>
      body {
        font-family: 'Karla', sans-serif;
        position: relative;
        background-color: white;   
        color: black;
      }
      .wrapper {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #chart {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class='wrapper'>
      <input type="range" min="15" max="20" value="15" id="timeRange">
      <div id="chart"></div>
    </div>
    <script>
      var simulation, circle, path, g, pathG, circle, nodes1, links1
      var margin = {top: 20, right: 20, bottom: 20, left: 20},
          width = screen.width*0.9 - margin.left - margin.right,
          height = screen.height*0.9 - margin.top - margin.bottom

      var svg = d3.select("#chart").append('svg')
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)

      g = svg.append("g")
          .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')')

      path = g.append("g")
        .attr("class", "pathG")
        .selectAll(".link")

      circle = g.append("g")
        .attr("class", "circleG")
        .selectAll(".node")

      // set node, link and text colors
      var nodeFillColor = 'mediumblue'
      var nodeStrokeColor = 'mediumblue'
      var linkStrokeColor = 'mediumblue'

      // set node, link and text dimenstions
      var nodeRadius = 6
      var nodeStrokeWidth = 1
      var linkStrokeWidth = 0.6
      var linkOpacity = 1

      ////////////////////////////////////////////////////////////// 
      ////////////////////////// Data ////////////////////////////// 
      ////////////////////////////////////////////////////////////// 
      init()

      function init() {

        d3.queue()  
          .defer(d3.csv, "test_entities.csv")
          .defer(d3.csv, "test_connections.csv")
          .await(render) 

      }

      ///////////////////////////////////////////////////////////////////////////
      ///////////////////////// Render vertical tree ////////////////////////////
      ///////////////////////////////////////////////////////////////////////////
      function render(error, entities, connections) {

        if (error) throw error;

        var nodes = entities.map((d,i) => {
          return {
            id: +d["ID"],
            name: d['Name'],
            time: +d['time'],
            category: d['Region'],
            score: +d['Overall']
          } 
        })

        var links = connections.map((d,i) => {
          let objS = nodes.find(el=>(el.id == +d['Source_ID']) & (el.time == +d['time']))
          let objT = nodes.find(el=>el.id == +d['Target_ID'] & (el.time == +d['time']))
          return {
            source: objS,
            target: objT,
            time: +d['time']
          }
        })

        // create custom link strength scale based on number of connected nodes to each source
        var links_nested = d3.nest()
          .key(function(d) { return d.source; })
          .rollup(function(leaves) { return leaves.length; })
          .entries(links)

        var linkStrengths = []
        links_nested.map(function(d,i) {
          linkStrengths.push(d.value)
        })

        var strengthScale = d3.scaleLinear()
          .domain([d3.min(linkStrengths), d3.max(linkStrengths)])
          .range([0.2, 0.7])

        // node radius size is scaled based on score value
        var nodeRadiusScale = d3.scaleSqrt()
          .domain([0, 1])
          .range([0, nodeRadius*2])
  
        // node color is based on entity type
        var region = ['Europe & Central Asia', 'Latin America & Caribbean', 'Middle East & North Africa', 'North America', 'Sub-Saharan Africa', 'East Asia & Pacific']
        var colorScale = d3.scaleOrdinal()
          .range(['aqua', 'fuchsia', 'gold', 'white', 'white', 'white'])
          .domain(region)

        nodes.forEach((d,i) => {
          d.type = d.id==20801 ? 'root' : 'children'
          d.color = colorScale(d.category)
          d.strokeColor = colorScale(d.category)
          d.strokeWidth = nodeStrokeWidth
          d.radius = nodeRadiusScale(d.score)
          d.opacity = 1
        })

        links.forEach((d,i) => {
          var conn = links_nested.find(l=>l.key==d.source).value
          d.strength = strengthScale(conn) 
          d.strokeColor = 'black'
          d.strokeWidth = linkStrokeWidth
          d.opacity = 1
          d.type = d.source.id==20801 ? 'root' : 'children'
        })

        simulation = d3.forceSimulation()
          .force("link", d3.forceLink()
            .distance(function(d) { return d.source.radius*2.5 + d.target.radius })
            .strength(function(d) { return d.strength })
          )
          .force("charge", d3.forceManyBody())
          .force("collide", d3.forceCollide(function(d){ return d.radius * 1.2 }))
          //.force('center', d3.forceCenter(width/2, height/2))
          .alphaTarget(1)
          .on("tick", ticked)

        updateSlider(nodes, links, 15) 
 
        d3.select("#timeRange")
          .on("change", function(){
            let value = d3.select(this).property("value")
            updateSlider(nodes, links, value)
          })

        function updateSlider(nodes, links, selectedTime) {

          var nodes1 = nodes.filter(d=>d.time == selectedTime)
          var links1 = links.filter(d=>d.time == selectedTime)  

          // Match links to nodes (prevent stray nodes not connected to other entities from being rendered)
          nodes1.forEach((d,i) => {
            var e = links1.find(b=>b.source.id == d.id) || links1.find(b=>b.target.id == d.id)
            d.connected = e ? 'yes' : 'no'
            d.fx = d.type=='root' ? 0 : undefined
            d.fy = d.type=='root' ? 0 : undefined
          })
          nodes1 = nodes1.filter(d=>d.connected=='yes')
          
          restart(nodes1, links1)

        } 

      }

      function ticked() {
        circle.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

        path.attr("x1", function(d) { return d.source.x })
            .attr("y1", function(d) { return d.source.y })
            .attr("x2", function(d) { return d.target.x })
            .attr("y2", function(d) { return d.target.y });
      }

      ///////////////////////////////////////////////////////////////////////////
      //////////////////////////// Graph Network plot ///////////////////////////
      ///////////////////////////////////////////////////////////////////////////

      function restart(nodes, links) {

        drawNodes(nodes)
        drawLinks(links)
        
        // Update and restart the simulation.
        simulation.nodes(nodes);
        simulation.force("link").links(links);
        simulation.alpha(0.1).restart();

      }

      //////////////////////// Create node and link elements ////////////////////
      function drawNodes(nodes) {

        circle = circle.data(nodes, d=>d.id)

        circle.exit().transition()
          .attr("r", 0)
          .remove()

        circle = circle.enter().append('circle')
          .attr('class', 'node')
          .attr('id', function(d) {return d.id}) 
          .attr('stroke-width', function(d) {return d.strokeWidth})
          .attr('stroke', function(d) {return d.strokeColor})
          .attr('stroke-opacity', function(d) { return d.opacity})
          .attr('fill-opacity', function(d) { return d.opacity})
          .attr('fill', function(d) {return d.color})
          .call(function(node) { node.transition().attr('r', function(d) {return d.radius}) })
          .merge(circle)

      }

      function drawLinks(links) {

        path = path.data(links, d=>d.source.id.toString() + "-" + d.target.id.toString())

        // Keep the exiting links connected to the moving remaining nodes.
        path.exit().transition()
          .attr("stroke-opacity", 0)
          .attrTween("x1", function(d) { return function() { return d.source.x; }; })
          .attrTween("x2", function(d) { return function() { return d.target.x; }; })
          .attrTween("y1", function(d) { return function() { return d.source.y; }; })
          .attrTween("y2", function(d) { return function() { return d.target.y; }; })
          .remove()

        path = path.enter().append('line')
          .attr('class', 'link')
          .attr('id', function(d) { return d.source.toString() + "-" + d.target.toString()})
          .attr('stroke-width', function(d) {return d.strokeWidth})
          .attr('stroke', function(d) {return d.strokeColor})
          .attr('stroke-opacity', function(d) {return d.opacity})
          .call(function(path) { path.transition().attr("stroke-opacity", 1); })
          .merge(path)
    
      }

    </script>
  </body>
 </html>
diff --git a/test_connections.csv b/test_connections.csv
diff --git a/test_entities.csv b/test_entities.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script type="text/javascript" src="helper.js"></script>
	<style>
	body {
	font-family: 'Karla', sans-serif;
	position: relative;
	background-color: white;
	color: black;
	}
	.wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	#chart {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 90%;
	justify-content: center;
	}
	</style>
	</head>
	<body>
	<div class='wrapper'>
	<input type="range" min="15" max="20" value="15" id="timeRange">
	<div id="chart"></div>
	</div>
	<script>
	var simulation, circle, path, g, pathG, circle, nodes1, links1
	var margin = {top: 20, right: 20, bottom: 20, left: 20},
	width = screen.width*0.9 - margin.left - margin.right,
	height = screen.height*0.9 - margin.top - margin.bottom

	var svg = d3.select("#chart").append('svg')
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)

	g = svg.append("g")
	.attr('transform', 'translate(' + width/2 + ',' + height/2 + ')')

	path = g.append("g")
	.attr("class", "pathG")
	.selectAll(".link")

	circle = g.append("g")
	.attr("class", "circleG")
	.selectAll(".node")

	// set node, link and text colors
	var nodeFillColor = 'mediumblue'
	var nodeStrokeColor = 'mediumblue'
	var linkStrokeColor = 'mediumblue'

	// set node, link and text dimenstions
	var nodeRadius = 6
	var nodeStrokeWidth = 1
	var linkStrokeWidth = 0.6
	var linkOpacity = 1

	//////////////////////////////////////////////////////////////
	////////////////////////// Data //////////////////////////////
	//////////////////////////////////////////////////////////////
	init()

	function init() {

	d3.queue()
	.defer(d3.csv, "test_entities.csv")
	.defer(d3.csv, "test_connections.csv")
	.await(render)

	}

	///////////////////////////////////////////////////////////////////////////
	///////////////////////// Render vertical tree ////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	function render(error, entities, connections) {

	if (error) throw error;

	var nodes = entities.map((d,i) => {
	return {
	id: +d["ID"],
	name: d['Name'],
	time: +d['time'],
	category: d['Region'],
	score: +d['Overall']
	}
	})

	var links = connections.map((d,i) => {
	let objS = nodes.find(el=>(el.id == +d['Source_ID']) & (el.time == +d['time']))
	let objT = nodes.find(el=>el.id == +d['Target_ID'] & (el.time == +d['time']))
	return {
	source: objS,
	target: objT,
	time: +d['time']
	}
	})

	// create custom link strength scale based on number of connected nodes to each source
	var links_nested = d3.nest()
	.key(function(d) { return d.source; })
	.rollup(function(leaves) { return leaves.length; })
	.entries(links)

	var linkStrengths = []
	links_nested.map(function(d,i) {
	linkStrengths.push(d.value)
	})

	var strengthScale = d3.scaleLinear()
	.domain([d3.min(linkStrengths), d3.max(linkStrengths)])
	.range([0.2, 0.7])

	// node radius size is scaled based on score value
	var nodeRadiusScale = d3.scaleSqrt()
	.domain([0, 1])
	.range([0, nodeRadius*2])

	// node color is based on entity type
	var region = ['Europe & Central Asia', 'Latin America & Caribbean', 'Middle East & North Africa', 'North America', 'Sub-Saharan Africa', 'East Asia & Pacific']
	var colorScale = d3.scaleOrdinal()
	.range(['aqua', 'fuchsia', 'gold', 'white', 'white', 'white'])
	.domain(region)

	nodes.forEach((d,i) => {
	d.type = d.id==20801 ? 'root' : 'children'
	d.color = colorScale(d.category)
	d.strokeColor = colorScale(d.category)
	d.strokeWidth = nodeStrokeWidth
	d.radius = nodeRadiusScale(d.score)
	d.opacity = 1
	})

	links.forEach((d,i) => {
	var conn = links_nested.find(l=>l.key==d.source).value
	d.strength = strengthScale(conn)
	d.strokeColor = 'black'
	d.strokeWidth = linkStrokeWidth
	d.opacity = 1
	d.type = d.source.id==20801 ? 'root' : 'children'
	})

	simulation = d3.forceSimulation()
	.force("link", d3.forceLink()
	.distance(function(d) { return d.source.radius*2.5 + d.target.radius })
	.strength(function(d) { return d.strength })
	)
	.force("charge", d3.forceManyBody())
	.force("collide", d3.forceCollide(function(d){ return d.radius * 1.2 }))
	//.force('center', d3.forceCenter(width/2, height/2))
	.alphaTarget(1)
	.on("tick", ticked)

	updateSlider(nodes, links, 15)

	d3.select("#timeRange")
	.on("change", function(){
	let value = d3.select(this).property("value")
	updateSlider(nodes, links, value)
	})

	function updateSlider(nodes, links, selectedTime) {

	var nodes1 = nodes.filter(d=>d.time == selectedTime)
	var links1 = links.filter(d=>d.time == selectedTime)

	// Match links to nodes (prevent stray nodes not connected to other entities from being rendered)
	nodes1.forEach((d,i) => {
	var e = links1.find(b=>b.source.id == d.id) \|\| links1.find(b=>b.target.id == d.id)
	d.connected = e ? 'yes' : 'no'
	d.fx = d.type=='root' ? 0 : undefined
	d.fy = d.type=='root' ? 0 : undefined
	})
	nodes1 = nodes1.filter(d=>d.connected=='yes')

	restart(nodes1, links1)

	}

	}

	function ticked() {
	circle.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

	path.attr("x1", function(d) { return d.source.x })
	.attr("y1", function(d) { return d.source.y })
	.attr("x2", function(d) { return d.target.x })
	.attr("y2", function(d) { return d.target.y });
	}

	///////////////////////////////////////////////////////////////////////////
	//////////////////////////// Graph Network plot ///////////////////////////
	///////////////////////////////////////////////////////////////////////////

	function restart(nodes, links) {

	drawNodes(nodes)
	drawLinks(links)

	// Update and restart the simulation.
	simulation.nodes(nodes);
	simulation.force("link").links(links);
	simulation.alpha(0.1).restart();

	}

	//////////////////////// Create node and link elements ////////////////////
	function drawNodes(nodes) {

	circle = circle.data(nodes, d=>d.id)

	circle.exit().transition()
	.attr("r", 0)
	.remove()

	circle = circle.enter().append('circle')
	.attr('class', 'node')
	.attr('id', function(d) {return d.id})
	.attr('stroke-width', function(d) {return d.strokeWidth})
	.attr('stroke', function(d) {return d.strokeColor})
	.attr('stroke-opacity', function(d) { return d.opacity})
	.attr('fill-opacity', function(d) { return d.opacity})
	.attr('fill', function(d) {return d.color})
	.call(function(node) { node.transition().attr('r', function(d) {return d.radius}) })
	.merge(circle)

	}

	function drawLinks(links) {

	path = path.data(links, d=>d.source.id.toString() + "-" + d.target.id.toString())

	// Keep the exiting links connected to the moving remaining nodes.
	path.exit().transition()
	.attr("stroke-opacity", 0)
	.attrTween("x1", function(d) { return function() { return d.source.x; }; })
	.attrTween("x2", function(d) { return function() { return d.target.x; }; })
	.attrTween("y1", function(d) { return function() { return d.source.y; }; })
	.attrTween("y2", function(d) { return function() { return d.target.y; }; })
	.remove()

	path = path.enter().append('line')
	.attr('class', 'link')
	.attr('id', function(d) { return d.source.toString() + "-" + d.target.toString()})
	.attr('stroke-width', function(d) {return d.strokeWidth})
	.attr('stroke', function(d) {return d.strokeColor})
	.attr('stroke-opacity', function(d) {return d.opacity})
	.call(function(path) { path.transition().attr("stroke-opacity", 1); })
	.merge(path)

	}

	</script>
	</body>
	</html>
	Season	Source_ID	Source_Name	Target_ID	Target_Name	time
1	15	1	Real Madrid	173731	G. Bale	15
2	15	1	Real Madrid	155862	Sergio Ramos	15
3	15	1	Real Madrid	177003	L. Modrić	15
4	15	1	Real Madrid	198710	J. Rodríguez	15
5	15	1	Real Madrid	182521	T. Kroos	15
6	15	1	Real Madrid	165153	K. Benzema	15
7	15	1	Real Madrid	179846	S. Khedira	15
8	15	1	Real Madrid	5479	Casillas	15
9	15	1	Real Madrid	197781	Isco	15
10	15	1	Real Madrid	120533	Pepe	15
11	15	1	Real Madrid	176676	Marcelo	15
12	15	1	Real Madrid	201535	R. Varane	15
13	15	1	Real Madrid	178224	J. Hernández	15
14	15	1	Real Madrid	190584	Illarramendi	15
15	15	1	Real Madrid	204963	Carvajal	15
16	15	1	Real Madrid	171688	Fábio Coentrão	15
17	15	1	Real Madrid	193041	K. Navas	15
18	15	1	Real Madrid	146741	Arbeloa	15
19	15	1	Real Madrid	202515	Jesé Rodríguez	15
20	15	1	Real Madrid	200724	Nacho Fernández	15
21	15	1	Real Madrid	212602	Llorente	15
22	15	1	Real Madrid	210110	Derik	15
23	15	1	Real Madrid	215644	Burgui	15
24	15	1	Real Madrid	210315	De Tomás	15
25	15	1	Real Madrid	221511	E. Markkanen	15
26	15	1	Real Madrid	212476	Medrán	15
27	15	1	Real Madrid	219836	Rubén Yáñez	15
28	15	1	Real Madrid	219837	Aguza	15
29	15	1	Real Madrid	209960	Pacheco	15
30	15	1	Real Madrid	211234	Enzo Fernández	15
31	15	1	Real Madrid	219914	G. Varela	15
32	15	1	Real Madrid	216755	Abner	15
0	15	20801	Cristiano Ronaldo	1	Real Madrid	15
1	16	1	Real Madrid	198710	J. Rodríguez	16
2	16	1	Real Madrid	173731	G. Bale	16
3	16	1	Real Madrid	182521	T. Kroos	16
4	16	1	Real Madrid	155862	Sergio Ramos	16
5	16	1	Real Madrid	177003	L. Modrić	16
6	16	1	Real Madrid	165153	K. Benzema	16
7	16	1	Real Madrid	197781	Isco	16
8	16	1	Real Madrid	120533	Pepe	16
9	16	1	Real Madrid	176676	Marcelo	16
10	16	1	Real Madrid	201535	R. Varane	16
11	16	1	Real Madrid	204963	Carvajal	16
12	16	1	Real Madrid	177644	Kiko Casilla	16
13	16	1	Real Madrid	199304	Danilo	16
14	16	1	Real Madrid	193041	K. Navas	16
15	16	1	Real Madrid	146741	Arbeloa	16
16	16	1	Real Madrid	207410	M. Kovačić	16
17	16	1	Real Madrid	202515	Jesé	16
18	16	1	Real Madrid	206225	D. Cheryshev	16
19	16	1	Real Madrid	200145	Casemiro	16
20	16	1	Real Madrid	208618	Lucas Vázquez	16
21	16	1	Real Madrid	200724	Nacho Fernández	16
22	16	1	Real Madrid	222665	M. Ødegaard	16
23	16	1	Real Madrid	208137	Lucas Torró	16
24	16	1	Real Madrid	226161	Marcos Llorente	16
25	16	1	Real Madrid	228635	Borja Mayoral	16
26	16	1	Real Madrid	216755	Abner	16
27	16	1	Real Madrid	226157	Javi Muñoz	16
28	16	1	Real Madrid	211234	Enzo Fernández	16
29	16	1	Real Madrid	219836	Rubén Yáñez	16
30	16	1	Real Madrid	229631	Lazo	16
0	16	20801	Cristiano Ronaldo	1	Real Madrid	16
1	17	1	Real Madrid	173731	G. Bale	17
2	17	1	Real Madrid	155862	Sergio Ramos	17
3	17	1	Real Madrid	177003	L. Modrić	17
4	17	1	Real Madrid	182521	T. Kroos	17
5	17	1	Real Madrid	120533	Pepe	17
6	17	1	Real Madrid	198710	J. Rodríguez	17
7	17	1	Real Madrid	165153	K. Benzema	17
8	17	1	Real Madrid	176676	Marcelo	17
9	17	1	Real Madrid	193041	K. Navas	17
10	17	1	Real Madrid	201535	R. Varane	17
11	17	1	Real Madrid	197781	Isco	17
12	17	1	Real Madrid	204963	Carvajal	17
13	17	1	Real Madrid	200145	Casemiro	17
14	17	1	Real Madrid	201153	Morata	17
15	17	1	Real Madrid	220834	Marco Asensio	17
16	17	1	Real Madrid	208618	Lucas Vázquez	17
17	17	1	Real Madrid	199304	Danilo	17
18	17	1	Real Madrid	171688	Fábio Coentrão	17
19	17	1	Real Madrid	207410	M. Kovačić	17
20	17	1	Real Madrid	177644	Kiko Casilla	17
21	17	1	Real Madrid	200724	Nacho Fernández	17
22	17	1	Real Madrid	209749	Lucas Silva	17
23	17	1	Real Madrid	221639	Mariano	17
24	17	1	Real Madrid	222665	M. Ødegaard	17
25	17	1	Real Madrid	235522	Aleix Febas	17
26	17	1	Real Madrid	235024	S. Díaz	17
27	17	1	Real Madrid	211234	E. Fernández	17
28	17	1	Real Madrid	231366	P. Lienhart	17
29	17	1	Real Madrid	222540	N. Vergos	17
30	17	1	Real Madrid	219836	Rubén Yáñez	17
31	17	1	Real Madrid	235212	A. Hakimi	17
32	17	1	Real Madrid	231856	Álvaro Tejero	17
0	17	20801	Cristiano Ronaldo	1	Real Madrid	17
1	18	1	Real Madrid	155862	Sergio Ramos	18
2	18	1	Real Madrid	182521	T. Kroos	18
3	18	1	Real Madrid	173731	G. Bale	18
4	18	1	Real Madrid	177003	L. Modrić	18
5	18	1	Real Madrid	176676	Marcelo	18
6	18	1	Real Madrid	197781	Isco	18
7	18	1	Real Madrid	165153	K. Benzema	18
8	18	1	Real Madrid	201535	R. Varane	18
9	18	1	Real Madrid	200145	Casemiro	18
10	18	1	Real Madrid	193041	K. Navas	18
11	18	1	Real Madrid	220834	Marco Asensio	18
12	18	1	Real Madrid	204963	Carvajal	18
13	18	1	Real Madrid	207410	M. Kovačić	18
14	18	1	Real Madrid	208618	Lucas Vázquez	18
15	18	1	Real Madrid	200724	Nacho Fernández	18
16	18	1	Real Madrid	177644	Kiko Casilla	18
17	18	1	Real Madrid	222509	Dani Ceballos	18
18	18	1	Real Madrid	226161	Marcos Llorente	18
19	18	1	Real Madrid	225161	Vallejo	18
20	18	1	Real Madrid	232656	T. Hernández	18
21	18	1	Real Madrid	228635	Borja Mayoral	18
22	18	1	Real Madrid	235212	A. Hakimi	18
23	18	1	Real Madrid	239335	Óscar	18
24	18	1	Real Madrid	231856	Álvaro Tejero	18
25	18	1	Real Madrid	240311	L. Zidane	18
0	18	20801	Cristiano Ronaldo	1	Real Madrid	18
1	18	1	Real Madrid	155862	Sergio Ramos	19
2	18	1	Real Madrid	182521	T. Kroos	19
3	18	1	Real Madrid	173731	G. Bale	19
4	18	1	Real Madrid	177003	L. Modrić	19
5	18	1	Real Madrid	176676	Marcelo	19
6	18	1	Real Madrid	197781	Isco	19
7	18	1	Real Madrid	165153	K. Benzema	19
8	18	1	Real Madrid	201535	R. Varane	19
9	18	1	Real Madrid	200145	Casemiro	19
10	18	1	Real Madrid	193041	K. Navas	19
11	18	1	Real Madrid	220834	Marco Asensio	19
12	18	1	Real Madrid	204963	Carvajal	19
13	18	1	Real Madrid	207410	M. Kovačić	19
14	18	1	Real Madrid	208618	Lucas Vázquez	19
15	18	1	Real Madrid	200724	Nacho Fernández	19
16	18	1	Real Madrid	177644	Kiko Casilla	19
17	18	1	Real Madrid	222509	Dani Ceballos	19
18	18	1	Real Madrid	226161	Marcos Llorente	19
19	18	1	Real Madrid	225161	Vallejo	19
20	18	1	Real Madrid	232656	T. Hernández	19
21	18	1	Real Madrid	228635	Borja Mayoral	19
22	18	1	Real Madrid	235212	A. Hakimi	19
23	18	1	Real Madrid	239335	Óscar	19
24	18	1	Real Madrid	231856	Álvaro Tejero	19
25	18	1	Real Madrid	240311	L. Zidane	19
27	19	2	Juventus	211110	P. Dybala	19
28	19	2	Juventus	138956	G. Chiellini	19
29	19	2	Juventus	177509	M. Benatia	19
30	19	2	Juventus	180206	M. Pjanić	19
31	19	2	Juventus	184344	L. Bonucci	19
32	19	2	Juventus	190483	Douglas Costa	19
33	19	2	Juventus	191043	Alex Sandro	19
34	19	2	Juventus	170890	B. Matuidi	19
35	19	2	Juventus	179846	S. Khedira	19
36	19	2	Juventus	198009	M. Perin	19
37	19	2	Juventus	186153	W. Szczęsny	19
38	19	2	Juventus	137186	A. Barzagli	19
39	19	2	Juventus	181783	M. Mandžukić	19
40	19	2	Juventus	193082	J. Cuadrado	19
41	19	2	Juventus	212404	F. Bernardeschi	19
42	19	2	Juventus	211320	D. Rugani	19
43	19	2	Juventus	210514	João Cancelo	19
44	19	2	Juventus	208333	E. Can	19
45	19	2	Juventus	206058	M. De Sciglio	19
46	19	2	Juventus	202884	L. Spinazzola	19
47	19	2	Juventus	227535	R. Bentancur	19
48	19	2	Juventus	236610	M. Kean	19
49	19	2	Juventus	189342	C. Pinsoglio	19
50	19	2	Juventus	245491	P. Beruatto	19
0	18	20801	Cristiano Ronaldo	1	Real Madrid	19
26	19	20801	Cristiano Ronaldo	2	Juventus	19
1	18	1	Real Madrid	155862	Sergio Ramos	20
2	18	1	Real Madrid	182521	T. Kroos	20
3	18	1	Real Madrid	173731	G. Bale	20
4	18	1	Real Madrid	177003	L. Modrić	20
5	18	1	Real Madrid	176676	Marcelo	20
6	18	1	Real Madrid	197781	Isco	20
7	18	1	Real Madrid	165153	K. Benzema	20
8	18	1	Real Madrid	201535	R. Varane	20
9	18	1	Real Madrid	200145	Casemiro	20
10	18	1	Real Madrid	193041	K. Navas	20
11	18	1	Real Madrid	220834	Marco Asensio	20
12	18	1	Real Madrid	204963	Carvajal	20
13	18	1	Real Madrid	207410	M. Kovačić	20
14	18	1	Real Madrid	208618	Lucas Vázquez	20
15	18	1	Real Madrid	200724	Nacho Fernández	20
16	18	1	Real Madrid	177644	Kiko Casilla	20
17	18	1	Real Madrid	222509	Dani Ceballos	20
18	18	1	Real Madrid	226161	Marcos Llorente	20
19	18	1	Real Madrid	225161	Vallejo	20
20	18	1	Real Madrid	232656	T. Hernández	20
21	18	1	Real Madrid	228635	Borja Mayoral	20
22	18	1	Real Madrid	235212	A. Hakimi	20
23	18	1	Real Madrid	239335	Óscar	20
24	18	1	Real Madrid	231856	Álvaro Tejero	20
25	18	1	Real Madrid	240311	L. Zidane	20
27	20	2	Juventus	138956	G. Chiellini	20
28	20	2	Juventus	211110	P. Dybala	20
29	20	2	Juventus	186153	W. Szczęsny	20
30	20	2	Juventus	180206	M. Pjanić	20
31	20	2	Juventus	184344	L. Bonucci	20
32	20	2	Juventus	235243	M. de Ligt	20
33	20	2	Juventus	167664	G. Higuaín	20
34	20	2	Juventus	170890	B. Matuidi	20
35	20	2	Juventus	191043	Alex Sandro	20
36	20	2	Juventus	181783	M. Mandžukić	20
37	20	2	Juventus	190483	Douglas Costa	20
38	20	2	Juventus	210008	A. Rabiot	20
39	20	2	Juventus	212404	F. Bernardeschi	20
40	20	2	Juventus	1179	G. Buffon	20
41	20	2	Juventus	179846	S. Khedira	20
42	20	2	Juventus	186561	A. Ramsey	20
43	20	2	Juventus	193082	J. Cuadrado	20
44	20	2	Juventus	198009	M. Perin	20
45	20	2	Juventus	211320	D. Rugani	20
46	20	2	Juventus	208333	E. Can	20
47	20	2	Juventus	227535	R. Bentancur	20
48	20	2	Juventus	199304	Danilo	20
49	20	2	Juventus	206058	M. De Sciglio	20
50	20	2	Juventus	229593	M. Pjaca	20
51	20	2	Juventus	238160	M. Demiral	20
52	20	2	Juventus	189342	C. Pinsoglio	20
53	20	2	Juventus	229337	Matheus Pereira	20
54	20	2	Juventus	243237	L. Pellegrini	20
55	20	2	Juventus	208523	S. Beltrame	20
56	20	2	Juventus	230768	L. Clemenza	20
57	20	2	Juventus	251790	H. Rafia	20
58	20	2	Juventus	211067	D. Del Fabro	20
0	18	20801	Cristiano Ronaldo	1	Real Madrid	20
26	20	20801	Cristiano Ronaldo	2	Juventus	20