dianaow · March 30, 2019 14:38
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/bboxCollision.js b/bboxCollision.js
 function bboxCollision(bbox) {

  function x (d) {
    return d.x + d.vx;
  }

  function y (d) {
    return d.y + d.vy;
  }

  function constant (x) {
    return function () {
      return x;
    };
  }

  var nodes,
      boundingBoxes,
      strength = 1,
      iterations = 1;

      if (typeof bbox !== "function") {
        bbox = constant(bbox === null ? [[0,0][1,1]] : bbox)
      }

      function force () {
        var i,
            tree,
            node,
            xi,
            yi,
            bbi,
            nx1,
            ny1,
            nx2,
            ny2

            var cornerNodes = []
            nodes.forEach(function (d, i) {
              cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + (boundingBoxes[i][1][0] + boundingBoxes[i][0][0]) / 2, y: d.y + (boundingBoxes[i][0][1] + boundingBoxes[i][1][1]) / 2})
              cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][0][0], y: d.y + boundingBoxes[i][0][1]})
              cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][0][0], y: d.y + boundingBoxes[i][1][1]})
              cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][1][0], y: d.y + boundingBoxes[i][0][1]})
              cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][1][0], y: d.y + boundingBoxes[i][1][1]})
            })
            var cn = cornerNodes.length

        for (var k = 0; k < iterations; ++k) {
          tree = d3.quadtree(cornerNodes, x, y).visitAfter(prepareCorners);

          for (i = 0; i < cn; ++i) {
            var nodeI = ~~(i / 5);
            node = nodes[nodeI]
            bbi = boundingBoxes[nodeI]
            xi = node.x + node.vx
            yi = node.y + node.vy
            nx1 = xi + bbi[0][0]
            ny1 = yi + bbi[0][1]
            nx2 = xi + bbi[1][0]
            ny2 = yi + bbi[1][1]
            tree.visit(apply);
          }
        }

        function apply (quad, x0, y0, x1, y1) {
            var data = quad.data
            if (data) {
              var bWidth = bbLength(bbi, 0),
              bHeight = bbLength(bbi, 1);

              if (data.node.index !== nodeI) {
                var dataNode = data.node
                var bbj = boundingBoxes[dataNode.index],
                  dnx1 = dataNode.x + dataNode.vx + bbj[0][0],
                  dny1 = dataNode.y + dataNode.vy + bbj[0][1],
                  dnx2 = dataNode.x + dataNode.vx + bbj[1][0],
                  dny2 = dataNode.y + dataNode.vy + bbj[1][1],
                  dWidth = bbLength(bbj, 0),
                  dHeight = bbLength(bbj, 1)

                if (nx1 <= dnx2 && dnx1 <= nx2 && ny1 <= dny2 && dny1 <= ny2) {

                  var xSize = [Math.min.apply(null, [dnx1, dnx2, nx1, nx2]), Math.max.apply(null, [dnx1, dnx2, nx1, nx2])]
                  var ySize = [Math.min.apply(null, [dny1, dny2, ny1, ny2]), Math.max.apply(null, [dny1, dny2, ny1, ny2])]

                  var xOverlap = bWidth + dWidth - (xSize[1] - xSize[0])
                  var yOverlap = bHeight + dHeight - (ySize[1] - ySize[0])

                  var xBPush = xOverlap * strength * (yOverlap / bHeight)
                  var yBPush = yOverlap * strength * (xOverlap / bWidth)

                  var xDPush = xOverlap * strength * (yOverlap / dHeight)
                  var yDPush = yOverlap * strength * (xOverlap / dWidth)

                  if ((nx1 + nx2) / 2 < (dnx1 + dnx2) / 2) {
                    node.vx -= xBPush
                    dataNode.vx += xDPush
                  }
                  else {
                    node.vx += xBPush
                    dataNode.vx -= xDPush
                  }
                  if ((ny1 + ny2) / 2 < (dny1 + dny2) / 2) {
                    node.vy -= yBPush
                    dataNode.vy += yDPush
                  }
                  else {
                    node.vy += yBPush
                    dataNode.vy -= yDPush
                  }
                }

              }
              return;
            }

            return x0 > nx2 || x1 < nx1 || y0 > ny2 || y1 < ny1;
        }

      }

      function prepareCorners (quad) {

        if (quad.data) {
          return quad.bb = boundingBoxes[quad.data.node.index]
        }
          quad.bb = [[0,0],[0,0]]
          for (var i = 0; i < 4; ++i) {
            if (quad[i] && quad[i].bb[0][0] < quad.bb[0][0]) {
              quad.bb[0][0] = quad[i].bb[0][0]
            }
            if (quad[i] && quad[i].bb[0][1] < quad.bb[0][1]) {
              quad.bb[0][1] = quad[i].bb[0][1]
            }
            if (quad[i] && quad[i].bb[1][0] > quad.bb[1][0]) {
              quad.bb[1][0] = quad[i].bb[1][0]
            }
            if (quad[i] && quad[i].bb[1][1] > quad.bb[1][1]) {
              quad.bb[1][1] = quad[i].bb[1][1]
            }
        }
      }

      function bbLength (bbox, heightWidth) {
        return bbox[1][heightWidth] - bbox[0][heightWidth]
      }

      force.initialize = function (_) {
        var i, n = (nodes = _).length; boundingBoxes = new Array(n);
        for (i = 0; i < n; ++i) boundingBoxes[i] = bbox(nodes[i], i, nodes);
      };

      force.iterations = function (_) {
        return arguments.length ? (iterations = +_, force) : iterations;
      };

      force.strength = function (_) {
        return arguments.length ? (strength = +_, force) : strength;
      };

      force.bbox = function (_) {
        return arguments.length ? (bbox = typeof _ === "function" ? _ : constant(+_), force) : bbox;
      };

      return force;
 }
diff --git a/csl_foreign_players.csv b/csl_foreign_players.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="bboxCollision.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <div id="chart"></div>
  <script>
    d3.csv("csl_foreign_players.csv", function(csv) {

      var player, circle, path, text_country, text_team, text_player, entered_nodes, simulation1, simulation2
      var nodes = [] // array to store ALL nodes
      var links = [] // array to store ALL links

      var multiplier = (screen.width < 1024 ? 0.75 : 0.95) 
      var screenWidth = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) * multiplier
      var screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
      var canvasDim = { width: screenWidth, height: screenHeight}

      var margin = {top: 20, right: 20, bottom: 20, left: 20}
      var width = canvasDim.width - margin.left - margin.right 
      var height = canvasDim.width - margin.top - margin.bottom 
      var radius = canvasDim.width * 0.45

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

      var pathG = svg.append("g")
        .attr("class", "pathG")

      var circleG = svg.append("g")
        .attr("class", "circleG")

      var textG = svg.append("g")
        .attr("class", "textG")

      var data = csv.map(function(d) {
        return {
          country: d.Country,
          player: d.Player,
          club: d.Club_Name_1 + " " + d.Club_Name_2
        }
      })

      // CREATE COUNTRY NODES
      var countries = ['Brazil','Portugal', 'Germany', 'Poland', 'France', 'Argentina', 'Spain', 'South Korea', 'Uruguay', 'Colombia', 'Croatia', 'Costa Rica', 'Nigeria', 'Iceland', 'Sweden', 'Australia', 'Senegal', 'Serbia', 'Morocco', 'Tunisia', 'Belgium', 'Japan']

      var country_stats  = d3.nest()
        .key(function(d) { return d.country }).sortKeys(function(a,b) { return countries.indexOf(a) - countries.indexOf(b); }) // custom sort arrangement of country nodes to make force layout aesthetically pleasing
        .entries(data);

      country_stats.map(function(d,i) {
        var radian = (2 * Math.PI) / countries.length * i - (Math.PI / 2);
        nodes.push({
          id: d.key,
          size: 6,
          fill: 'black', // standardize empty black circle for each team
          stroke: 'black',
          type: 'country',
          fx: radius * Math.cos(radian) + (width / 2),
          fy: radius * Math.sin(radian) + (height / 2)
        })
      })

      // CREATE TEAM NODES
      var team_stats = d3.nest()
        .key(function(d) { return d.club })
        .key(function(d) { return d.country })
        .rollup(function(leaves) { return leaves.length })
        .entries(data)

      team_stats.map(function(d,i) {
        nodes.push({
          id: d.key,
          size: d.values.length*2,
          fill: '#F4B95F', 
          stroke: '#F4B95F',
          type: 'team',
          x: width/2,
          y: height/2
        })
      })

      var countryNodes_nested = d3.nest()
        .key(function(d) { return d.id })
        .entries(nodes.filter(d=>d.type=='country'))

      var team_stats1 = d3.nest()
        .key(function(d) { return d.country })
        .entries(data)

      var linkStrengths = [] // create custom link strength scale based on number of players from each country
      team_stats1.map(function(d,i) {
        linkStrengths.push(d.values.length)
      })

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

      team_stats1.map(function(d,i) {
        var radian = (2 * Math.PI) / countries.length * i - (Math.PI / 2);
        d.values.map(x => {
          // CREATE A NODE FOR EACH PLAYER
          var node = {
            text: x.player,
            id: x.player.replace(/[^A-Z0-9]+/ig, "_") + "/" + x.club.replace(/[^A-Z0-9]+/ig, "_"),
            size: 2,
            fill: 'grey',
            stroke: 'none',
            type: 'player',
            x: radius-40 * Math.cos(radian) + (width / 2),
            y: radius-40 * Math.sin(radian) + (height / 2)       
          }
          nodes.push(node)
          // CREATE COUNTRY-PLAYER LINKS
          links.push({
            source: countryNodes_nested.find(n=>n.key == x.country).values[0],
            target: node,
            size: 0.5,
            strength: 0.5,
            stroke: 'lightgrey',
            type: 'country_player',
            // remove spaces because they cannot be contained in class/id names
            id: x.country.replace(/[^A-Z0-9]+/ig, "_") + "/" + x.player.replace(/[^A-Z0-9]+/ig, "_") + x.club.replace(/[^A-Z0-9]+/ig, "_")
          })
          // CREATE PLAYER-TEAM LINKS
          links.push({
            source: node,
            target: nodes.filter(d=>d.type=='team').find(n=>n.id == x.club),
            size: 0.5,
            strength: strengthScale(d.values.length),
            stroke: '#F4B95F',
            type: 'player_team',
            id: x.player.replace(/[^A-Z0-9]+/ig, "_") + "/" + x.club.replace(/[^A-Z0-9]+/ig, "_")
          })
        })
      })

      // Initialize force simulation
      simulation1 = d3.forceSimulation()
        .force("link", d3.forceLink()
          .id(function(d) { return d.id; })
          .strength(function(d) {return d.strength})
          .distance(40)
        )
        .force("collide", d3.forceCollide().radius(function(d) { return d.size * 1.3 }))

      simulation1
          .nodes(nodes)
          .on("tick", update) // start simulation to update node positions

      simulation1.force("link")
          .links(links)

      simulation1.stop()
      for (var i = 0; i < 100; ++i) simulation1.tick()
      simulation1.alpha(1).alphaDecay(0.1).restart()

      enter() // create DOM elements

      function enter() {

        path = pathG.selectAll('line')
          .data(links).enter().append('line')
          .attr('stroke-linecap', 'round')

        circle = circleG.selectAll('circle')
          .data(nodes)
          .enter().append('circle')
          .attr('stroke-width', 2)

        text_country = textG.selectAll('.text_country')
          .data(nodes.filter(d=>d.type=='country'))
          .enter().append('text')
          .attr('class', 'text_country')
          .attr('text-anchor', 'middle')
          .attr('dy', '.35em')
          .attr('fill', '#555')
          .style('font-size', '12px')
          .style('font-family', 'Helvetica')
          .style('font-weight', 'bold')
          .style('pointer-events', 'none')

        text_team = textG.selectAll('text_team')
          .data(nodes.filter(d=>(d.type=='team') & (d.size>10)))
          .enter().append('text')
          .attr('class', 'text_team')
          .attr('text-anchor', 'middle')
          .attr('dy', '.35em')
          .attr('fill', '#555')
          .style('font-size', '12px')
          .style('font-weight', 'normal')
          .style('pointer-events', 'none')

        text1 = text_team.append('tspan')
        text2 = text_team.append('tspan')

      }

      function update() {

        path.attr('stroke-width', function(d) {return d.size})
          .attr('stroke', function(d) {return d.stroke})
          .attr('fill', function(d) {return d.stroke})
          .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})
          .attr('class', function(d) {return d.type})
          .attr('id', function(d) {return d.id})

        circle.attr('r', function(d) {return d.size})
          .attr('stroke', function(d) {return d.stroke || 'none'})
          .attr('fill', function(d) {return d.fill || '#fff'})
          .attr('cx', function(d) {return d.x})
          .attr('cy', function(d) {return d.y})
          .attr('class', function(d) {return d.type})
          .attr('id', function(d) {return d.id}) 

        text_country.attr('x', function(d) {return d.x})
          .attr('y', function(d) {return d.y + 15})
          .attr('id', function(d) {return d.id}) 
          .text(function(d) {return d.id})

        text1.attr('x', function(d) {return d.x})
          .attr('y', function(d) {return d.y-8})
          .attr('id', function(d) {return d.id.replace(/[^A-Z0-9]+/ig, "_")}) 
          .text(function(d) {return d.id.split(' ')[0]})  

        text2.attr('x', function(d) {return d.x})
          .attr('y', function(d) {return d.y+8})
          .attr('id', function(d) {return d.id.replace(/[^A-Z0-9]+/ig, "_")}) 
          .text(function(d) {return d.id.split(' ')[1]})  

        interactive()
      }

      function updatePlayerText() {
        text_player.attr('x', function(d) {return d.x})
          .attr('y', function(d) {return d.y})
          .attr('id', function(d) {return d.id}) 
          .text(function(d) {return d.text})
          .style('opacity', 1)

        selCircles.attr('cx', function(d) {return d.x})
          .attr('cy', function(d) {return d.y})

        selLines.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})
      }

      function interactive() {

        d3.selectAll('.team').on('mouseover', function (l) {

          d3.select(this).style("cursor", "pointer") 
          d3.selectAll(".country_player").style('opacity', 0) // make all country-player links invisible
          d3.selectAll(".player_team").style('opacity', 0) // make all player-team links invisible
          d3.selectAll('.team').style('opacity', 0) // make all team nodes invisible
          d3.selectAll('.player').style('opacity', 0) // make all player nodes invisible

          text1.style('opacity', 0) // make all team node labels invisible
          text2.style('opacity', 0) // make all team node labels invisible

          var players = nodes.filter(d=>d.id.includes(l.id.replace(/[^A-Z0-9]+/ig, "_"))===true)

          text_player = textG.selectAll('.text_player').data(players)
          selCircles = d3.selectAll("circle[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")
          selLines = d3.selectAll("line[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")

          simulation2 = d3.forceSimulation()
            .force("collide", bboxCollision([[-4,-8],[4,8]]))
            .on("tick", updatePlayerText)

          entered_nodes = text_player.enter().append('text')
            .attr('class', 'text_player')
            .attr('text-anchor', 'middle')
            .attr('dy', '.35em')
            .attr('fill', '#555')
            .style('font-size', '10px')
            .style('font-weight', 'normal')

          simulation1.stop()

          simulation2.nodes(players)
          text_player = text_player.merge(entered_nodes)
          simulation2.alpha(1).restart()

          // only select links and nodes connected to specific team node hovered upon visible
          d3.selectAll("line[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")
            .each(function(d,i) {
              var player = d3.select(this).attr('id')
              d3.selectAll("line[id*='" + player + "']")
                .style('opacity', 1)
              d3.selectAll("circle[id*='" + player + "']")
                .style('opacity', 1) 
                .attr('fill', 'white')
                .attr('r', 8)

            })

          // only select node labels for the specific team node hovered upon visible
          d3.selectAll("#" + l.id.replace(/[^A-Z0-9]+/ig, "_")).style('opacity', 1)
          d3.selectAll("circle[id*='" + l.id + "']").style('opacity', 1)

        })
        .on('mouseout', function (l) {

          d3.select(this).style("cursor", "default")
          d3.selectAll(".country_player").style('opacity', 1) 
          d3.selectAll(".player_team").style('opacity', 1) 
          d3.selectAll('.team').style('opacity', 1) 
          d3.selectAll('.player').style('opacity', 1) 

          text1.style('opacity', 1) 
          text2.style('opacity', 1) 

          simulation2.stop()

          d3.selectAll("line[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")
            .each(function(d,i) {
              var player = d3.select(this).attr('id')
              d3.selectAll("text[id*='" + player + "']")
                .style('opacity', 0)
              d3.selectAll("circle[id*='" + player + "']")
                .attr('fill', 'grey')
                .attr('r', 2)
            })

          simulation1
          	.nodes(nodes)
          	.on("tick", update) // start simulation to update node positions

      		simulation1.force("link")
          	.links(links)

          simulation1.alpha(1).restart()

        })
      }

    })

  </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
	function bboxCollision(bbox) {

	function x (d) {
	return d.x + d.vx;
	}

	function y (d) {
	return d.y + d.vy;
	}

	function constant (x) {
	return function () {
	return x;
	};
	}

	var nodes,
	boundingBoxes,
	strength = 1,
	iterations = 1;

	if (typeof bbox !== "function") {
	bbox = constant(bbox === null ? [[0,0][1,1]] : bbox)
	}

	function force () {
	var i,
	tree,
	node,
	xi,
	yi,
	bbi,
	nx1,
	ny1,
	nx2,
	ny2

	var cornerNodes = []
	nodes.forEach(function (d, i) {
	cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + (boundingBoxes[i][1][0] + boundingBoxes[i][0][0]) / 2, y: d.y + (boundingBoxes[i][0][1] + boundingBoxes[i][1][1]) / 2})
	cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][0][0], y: d.y + boundingBoxes[i][0][1]})
	cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][0][0], y: d.y + boundingBoxes[i][1][1]})
	cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][1][0], y: d.y + boundingBoxes[i][0][1]})
	cornerNodes.push({node: d, vx: d.vx, vy: d.vy, x: d.x + boundingBoxes[i][1][0], y: d.y + boundingBoxes[i][1][1]})
	})
	var cn = cornerNodes.length

	for (var k = 0; k < iterations; ++k) {
	tree = d3.quadtree(cornerNodes, x, y).visitAfter(prepareCorners);

	for (i = 0; i < cn; ++i) {
	var nodeI = ~~(i / 5);
	node = nodes[nodeI]
	bbi = boundingBoxes[nodeI]
	xi = node.x + node.vx
	yi = node.y + node.vy
	nx1 = xi + bbi[0][0]
	ny1 = yi + bbi[0][1]
	nx2 = xi + bbi[1][0]
	ny2 = yi + bbi[1][1]
	tree.visit(apply);
	}
	}

	function apply (quad, x0, y0, x1, y1) {
	var data = quad.data
	if (data) {
	var bWidth = bbLength(bbi, 0),
	bHeight = bbLength(bbi, 1);

	if (data.node.index !== nodeI) {
	var dataNode = data.node
	var bbj = boundingBoxes[dataNode.index],
	dnx1 = dataNode.x + dataNode.vx + bbj[0][0],
	dny1 = dataNode.y + dataNode.vy + bbj[0][1],
	dnx2 = dataNode.x + dataNode.vx + bbj[1][0],
	dny2 = dataNode.y + dataNode.vy + bbj[1][1],
	dWidth = bbLength(bbj, 0),
	dHeight = bbLength(bbj, 1)

	if (nx1 <= dnx2 && dnx1 <= nx2 && ny1 <= dny2 && dny1 <= ny2) {

	var xSize = [Math.min.apply(null, [dnx1, dnx2, nx1, nx2]), Math.max.apply(null, [dnx1, dnx2, nx1, nx2])]
	var ySize = [Math.min.apply(null, [dny1, dny2, ny1, ny2]), Math.max.apply(null, [dny1, dny2, ny1, ny2])]

	var xOverlap = bWidth + dWidth - (xSize[1] - xSize[0])
	var yOverlap = bHeight + dHeight - (ySize[1] - ySize[0])

	var xBPush = xOverlap * strength * (yOverlap / bHeight)
	var yBPush = yOverlap * strength * (xOverlap / bWidth)

	var xDPush = xOverlap * strength * (yOverlap / dHeight)
	var yDPush = yOverlap * strength * (xOverlap / dWidth)

	if ((nx1 + nx2) / 2 < (dnx1 + dnx2) / 2) {
	node.vx -= xBPush
	dataNode.vx += xDPush
	}
	else {
	node.vx += xBPush
	dataNode.vx -= xDPush
	}
	if ((ny1 + ny2) / 2 < (dny1 + dny2) / 2) {
	node.vy -= yBPush
	dataNode.vy += yDPush
	}
	else {
	node.vy += yBPush
	dataNode.vy -= yDPush
	}
	}

	}
	return;
	}

	return x0 > nx2 \|\| x1 < nx1 \|\| y0 > ny2 \|\| y1 < ny1;
	}

	}

	function prepareCorners (quad) {

	if (quad.data) {
	return quad.bb = boundingBoxes[quad.data.node.index]
	}
	quad.bb = [[0,0],[0,0]]
	for (var i = 0; i < 4; ++i) {
	if (quad[i] && quad[i].bb[0][0] < quad.bb[0][0]) {
	quad.bb[0][0] = quad[i].bb[0][0]
	}
	if (quad[i] && quad[i].bb[0][1] < quad.bb[0][1]) {
	quad.bb[0][1] = quad[i].bb[0][1]
	}
	if (quad[i] && quad[i].bb[1][0] > quad.bb[1][0]) {
	quad.bb[1][0] = quad[i].bb[1][0]
	}
	if (quad[i] && quad[i].bb[1][1] > quad.bb[1][1]) {
	quad.bb[1][1] = quad[i].bb[1][1]
	}
	}
	}

	function bbLength (bbox, heightWidth) {
	return bbox[1][heightWidth] - bbox[0][heightWidth]
	}

	force.initialize = function (_) {
	var i, n = (nodes = _).length; boundingBoxes = new Array(n);
	for (i = 0; i < n; ++i) boundingBoxes[i] = bbox(nodes[i], i, nodes);
	};

	force.iterations = function (_) {
	return arguments.length ? (iterations = +_, force) : iterations;
	};

	force.strength = function (_) {
	return arguments.length ? (strength = +_, force) : strength;
	};

	force.bbox = function (_) {
	return arguments.length ? (bbox = typeof _ === "function" ? _ : constant(+_), force) : bbox;
	};

	return force;
	}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="bboxCollision.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<div id="chart"></div>
	<script>
	d3.csv("csl_foreign_players.csv", function(csv) {

	var player, circle, path, text_country, text_team, text_player, entered_nodes, simulation1, simulation2
	var nodes = [] // array to store ALL nodes
	var links = [] // array to store ALL links

	var multiplier = (screen.width < 1024 ? 0.75 : 0.95)
	var screenWidth = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0) * multiplier
	var screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0)
	var canvasDim = { width: screenWidth, height: screenHeight}

	var margin = {top: 20, right: 20, bottom: 20, left: 20}
	var width = canvasDim.width - margin.left - margin.right
	var height = canvasDim.width - margin.top - margin.bottom
	var radius = canvasDim.width * 0.45

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

	var pathG = svg.append("g")
	.attr("class", "pathG")

	var circleG = svg.append("g")
	.attr("class", "circleG")

	var textG = svg.append("g")
	.attr("class", "textG")

	var data = csv.map(function(d) {
	return {
	country: d.Country,
	player: d.Player,
	club: d.Club_Name_1 + " " + d.Club_Name_2
	}
	})

	// CREATE COUNTRY NODES
	var countries = ['Brazil','Portugal', 'Germany', 'Poland', 'France', 'Argentina', 'Spain', 'South Korea', 'Uruguay', 'Colombia', 'Croatia', 'Costa Rica', 'Nigeria', 'Iceland', 'Sweden', 'Australia', 'Senegal', 'Serbia', 'Morocco', 'Tunisia', 'Belgium', 'Japan']

	var country_stats = d3.nest()
	.key(function(d) { return d.country }).sortKeys(function(a,b) { return countries.indexOf(a) - countries.indexOf(b); }) // custom sort arrangement of country nodes to make force layout aesthetically pleasing
	.entries(data);

	country_stats.map(function(d,i) {
	var radian = (2 * Math.PI) / countries.length * i - (Math.PI / 2);
	nodes.push({
	id: d.key,
	size: 6,
	fill: 'black', // standardize empty black circle for each team
	stroke: 'black',
	type: 'country',
	fx: radius * Math.cos(radian) + (width / 2),
	fy: radius * Math.sin(radian) + (height / 2)
	})
	})

	// CREATE TEAM NODES
	var team_stats = d3.nest()
	.key(function(d) { return d.club })
	.key(function(d) { return d.country })
	.rollup(function(leaves) { return leaves.length })
	.entries(data)

	team_stats.map(function(d,i) {
	nodes.push({
	id: d.key,
	size: d.values.length*2,
	fill: '#F4B95F',
	stroke: '#F4B95F',
	type: 'team',
	x: width/2,
	y: height/2
	})
	})

	var countryNodes_nested = d3.nest()
	.key(function(d) { return d.id })
	.entries(nodes.filter(d=>d.type=='country'))

	var team_stats1 = d3.nest()
	.key(function(d) { return d.country })
	.entries(data)

	var linkStrengths = [] // create custom link strength scale based on number of players from each country
	team_stats1.map(function(d,i) {
	linkStrengths.push(d.values.length)
	})

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

	team_stats1.map(function(d,i) {
	var radian = (2 * Math.PI) / countries.length * i - (Math.PI / 2);
	d.values.map(x => {
	// CREATE A NODE FOR EACH PLAYER
	var node = {
	text: x.player,
	id: x.player.replace(/[^A-Z0-9]+/ig, "_") + "/" + x.club.replace(/[^A-Z0-9]+/ig, "_"),
	size: 2,
	fill: 'grey',
	stroke: 'none',
	type: 'player',
	x: radius-40 * Math.cos(radian) + (width / 2),
	y: radius-40 * Math.sin(radian) + (height / 2)
	}
	nodes.push(node)
	// CREATE COUNTRY-PLAYER LINKS
	links.push({
	source: countryNodes_nested.find(n=>n.key == x.country).values[0],
	target: node,
	size: 0.5,
	strength: 0.5,
	stroke: 'lightgrey',
	type: 'country_player',
	// remove spaces because they cannot be contained in class/id names
	id: x.country.replace(/[^A-Z0-9]+/ig, "_") + "/" + x.player.replace(/[^A-Z0-9]+/ig, "_") + x.club.replace(/[^A-Z0-9]+/ig, "_")
	})
	// CREATE PLAYER-TEAM LINKS
	links.push({
	source: node,
	target: nodes.filter(d=>d.type=='team').find(n=>n.id == x.club),
	size: 0.5,
	strength: strengthScale(d.values.length),
	stroke: '#F4B95F',
	type: 'player_team',
	id: x.player.replace(/[^A-Z0-9]+/ig, "_") + "/" + x.club.replace(/[^A-Z0-9]+/ig, "_")
	})
	})
	})

	// Initialize force simulation
	simulation1 = d3.forceSimulation()
	.force("link", d3.forceLink()
	.id(function(d) { return d.id; })
	.strength(function(d) {return d.strength})
	.distance(40)
	)
	.force("collide", d3.forceCollide().radius(function(d) { return d.size * 1.3 }))

	simulation1
	.nodes(nodes)
	.on("tick", update) // start simulation to update node positions

	simulation1.force("link")
	.links(links)

	simulation1.stop()
	for (var i = 0; i < 100; ++i) simulation1.tick()
	simulation1.alpha(1).alphaDecay(0.1).restart()

	enter() // create DOM elements

	function enter() {

	path = pathG.selectAll('line')
	.data(links).enter().append('line')
	.attr('stroke-linecap', 'round')

	circle = circleG.selectAll('circle')
	.data(nodes)
	.enter().append('circle')
	.attr('stroke-width', 2)

	text_country = textG.selectAll('.text_country')
	.data(nodes.filter(d=>d.type=='country'))
	.enter().append('text')
	.attr('class', 'text_country')
	.attr('text-anchor', 'middle')
	.attr('dy', '.35em')
	.attr('fill', '#555')
	.style('font-size', '12px')
	.style('font-family', 'Helvetica')
	.style('font-weight', 'bold')
	.style('pointer-events', 'none')

	text_team = textG.selectAll('text_team')
	.data(nodes.filter(d=>(d.type=='team') & (d.size>10)))
	.enter().append('text')
	.attr('class', 'text_team')
	.attr('text-anchor', 'middle')
	.attr('dy', '.35em')
	.attr('fill', '#555')
	.style('font-size', '12px')
	.style('font-weight', 'normal')
	.style('pointer-events', 'none')

	text1 = text_team.append('tspan')
	text2 = text_team.append('tspan')

	}

	function update() {

	path.attr('stroke-width', function(d) {return d.size})
	.attr('stroke', function(d) {return d.stroke})
	.attr('fill', function(d) {return d.stroke})
	.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})
	.attr('class', function(d) {return d.type})
	.attr('id', function(d) {return d.id})

	circle.attr('r', function(d) {return d.size})
	.attr('stroke', function(d) {return d.stroke \|\| 'none'})
	.attr('fill', function(d) {return d.fill \|\| '#fff'})
	.attr('cx', function(d) {return d.x})
	.attr('cy', function(d) {return d.y})
	.attr('class', function(d) {return d.type})
	.attr('id', function(d) {return d.id})

	text_country.attr('x', function(d) {return d.x})
	.attr('y', function(d) {return d.y + 15})
	.attr('id', function(d) {return d.id})
	.text(function(d) {return d.id})

	text1.attr('x', function(d) {return d.x})
	.attr('y', function(d) {return d.y-8})
	.attr('id', function(d) {return d.id.replace(/[^A-Z0-9]+/ig, "_")})
	.text(function(d) {return d.id.split(' ')[0]})

	text2.attr('x', function(d) {return d.x})
	.attr('y', function(d) {return d.y+8})
	.attr('id', function(d) {return d.id.replace(/[^A-Z0-9]+/ig, "_")})
	.text(function(d) {return d.id.split(' ')[1]})

	interactive()
	}

	function updatePlayerText() {
	text_player.attr('x', function(d) {return d.x})
	.attr('y', function(d) {return d.y})
	.attr('id', function(d) {return d.id})
	.text(function(d) {return d.text})
	.style('opacity', 1)

	selCircles.attr('cx', function(d) {return d.x})
	.attr('cy', function(d) {return d.y})

	selLines.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})
	}

	function interactive() {

	d3.selectAll('.team').on('mouseover', function (l) {

	d3.select(this).style("cursor", "pointer")
	d3.selectAll(".country_player").style('opacity', 0) // make all country-player links invisible
	d3.selectAll(".player_team").style('opacity', 0) // make all player-team links invisible
	d3.selectAll('.team').style('opacity', 0) // make all team nodes invisible
	d3.selectAll('.player').style('opacity', 0) // make all player nodes invisible

	text1.style('opacity', 0) // make all team node labels invisible
	text2.style('opacity', 0) // make all team node labels invisible

	var players = nodes.filter(d=>d.id.includes(l.id.replace(/[^A-Z0-9]+/ig, "_"))===true)

	text_player = textG.selectAll('.text_player').data(players)
	selCircles = d3.selectAll("circle[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")
	selLines = d3.selectAll("line[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")

	simulation2 = d3.forceSimulation()
	.force("collide", bboxCollision([[-4,-8],[4,8]]))
	.on("tick", updatePlayerText)

	entered_nodes = text_player.enter().append('text')
	.attr('class', 'text_player')
	.attr('text-anchor', 'middle')
	.attr('dy', '.35em')
	.attr('fill', '#555')
	.style('font-size', '10px')
	.style('font-weight', 'normal')

	simulation1.stop()

	simulation2.nodes(players)
	text_player = text_player.merge(entered_nodes)
	simulation2.alpha(1).restart()

	// only select links and nodes connected to specific team node hovered upon visible
	d3.selectAll("line[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")
	.each(function(d,i) {
	var player = d3.select(this).attr('id')
	d3.selectAll("line[id*='" + player + "']")
	.style('opacity', 1)
	d3.selectAll("circle[id*='" + player + "']")
	.style('opacity', 1)
	.attr('fill', 'white')
	.attr('r', 8)

	})

	// only select node labels for the specific team node hovered upon visible
	d3.selectAll("#" + l.id.replace(/[^A-Z0-9]+/ig, "_")).style('opacity', 1)
	d3.selectAll("circle[id*='" + l.id + "']").style('opacity', 1)

	})
	.on('mouseout', function (l) {

	d3.select(this).style("cursor", "default")
	d3.selectAll(".country_player").style('opacity', 1)
	d3.selectAll(".player_team").style('opacity', 1)
	d3.selectAll('.team').style('opacity', 1)
	d3.selectAll('.player').style('opacity', 1)

	text1.style('opacity', 1)
	text2.style('opacity', 1)

	simulation2.stop()

	d3.selectAll("line[id*='" + l.id.replace(/[^A-Z0-9]+/ig, "_") + "']")
	.each(function(d,i) {
	var player = d3.select(this).attr('id')
	d3.selectAll("text[id*='" + player + "']")
	.style('opacity', 0)
	d3.selectAll("circle[id*='" + player + "']")
	.attr('fill', 'grey')
	.attr('r', 2)
	})

	simulation1
	.nodes(nodes)
	.on("tick", update) // start simulation to update node positions

	simulation1.force("link")
	.links(links)

	simulation1.alpha(1).restart()

	})
	}

	})

	</script>
	</body>