reinson · June 27, 2016 21:10
diff --git a/euro2016players_all.tsv b/euro2016players_all.tsv
diff --git a/index.html b/index.html
 <!-- https://bl.ocks.org/mbostock/4180634 -->

 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  background: #fcfcfa;
 }

 .country.qualified{
    fill: #e5f5e0;
 }

 .country.qualified.active,
 .country.qualified.active:hover {
    fill: #fec44f;
 }

 .country.qualified:hover{
    fill: #c7e9c0;
 }

 .country {
    fill: #f0f0f0;
    stroke: #bdbdbd;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 1;
 }

 .stroke {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
 }

 .fill {
  fill: #fff;
 }


 .land {
  fill: #222;
 }


 .tooltip {
        position: absolute;
        width: auto;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
 }

 .tooltip.hidden {
        display: none;
 }

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

 .overlay {
  fill: none;
  pointer-events: all;
 }

 </style>
 <body>

 <div class="tooltip hidden">
  <strong> <p id="name"></p> </strong>
  <p id="club"></p>
 </div>

 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="https://d3js.org/d3-force.v1.min.js"></script>
 <script src="https://d3js.org/d3-timer.v1.min.js"></script>
 <script src="https://d3js.org/d3-collection.v1.min.js"></script>

 <script src="https://d3js.org/d3-quadtree.v1.min.js"></script>

 <script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="//d3js.org/queue.v1.min.js"></script>
 <script>

 var margin = 20,
    width = 860-2*margin,
    height = 640-2*margin;
 var centerX = width/2 + margin/2,
    centerY = height/2 + margin/2;

 var color = d3.scale.category10();
 var players;

 var projection = d3.geo.azimuthalEquidistant()
    .scale(900)
    .center([17.25,54.25])
    .translate([width / 2, height / 2])
    .clipExtent([[margin,margin],[width,height]])
    .precision(.1);

 var pack = d3.layout.pack()
      .value(function(d) { return d.r; })
      //.size([w, h])
      .radius(function(d){return d})
    .padding(1);

 var path = d3.geo.path()
    .projection(projection);


 /*var zoom = d3.behavior.zoom()
    .translate([width / 2, height / 2])
    .scale(900)
    .scaleExtent([900, 5000])
    .on("zoom", zoomed);*/


 var svg = d3.select("body").append("svg")
    .attr("width", width+2*margin)
    .attr("height", height+2*margin)
    .append("g")
    .attr("transform","translate(" + margin + "," + margin + ")");

 svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

 /*svg.call(zoom)
    .call(zoom.event);*/

 svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

 svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

 svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");


 queue()
    .defer(d3.json, "world-50m.json")
    .defer(d3.tsv, "euro2016players_all.tsv")
    .defer(d3.json,"uk.json")
    .defer(d3.tsv, "world-country-names.tsv")
    .await(draw);

 function draw_circles(menu_val){
    var players_to_draw = players.filter(function(d){return d.key == menu_val});

    var nodes = svg.selectAll("circle")
                .data(players_to_draw[0].values,function(d){return d.name+d.team});

    var nodesEnter = nodes.enter()
        .append("circle").attr("class","club")
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; })
        .attr("r", 0)
        .attr("opacity",0.7)
        .attr("stroke","#0b2a3f")
        .attr("fill", "#d9ecf9")
        .on("mouseover",mouseover)
        .on("mouseout",mouseout)
        .on("click",function(d){console.log(d)})
        .each(function(d){
             svg.append("g").attr("transform","translate(" +d.x+ "," +d.y+ ")")
                .selectAll(".player").data(d.children,function(d){return d.name;}).enter()
                .append("circle")
                .attr("r",0)
                .attr("class","player")
                .attr("fill","#1f77b4")
                .attr("cx", function (n) { return n.x; })
                .attr("cy", function (n) { return n.y; })
                .on("mouseover",mouseover)
                .on("mouseout",mouseout)
        });

    nodesEnter.transition().delay(400).duration(400).attr("r", function(d){return d.r;});
    svg.selectAll(".player").transition().delay(400).duration(500).attr("r", 3);

    nodes.exit().transition().duration(400).attr("r",0).remove();

 }

 function draw(error, world, players_from_file,uk,country_names){
    debugger;
    players = players_from_file;
    var id_name_map = d3.map(country_names, function(d){return d.id});

    //ids of euope countries
    var show_ids = country_names.filter(function(d){return d.europe;}).map(function(d){return +d.id});

    var countries = topojson.feature(world, world.objects.countries).features,
        uk_regions = topojson.feature(uk, uk.objects.subunits).features;

    countries = countries.filter(function(d){return show_ids.indexOf(d.id)!=-1});
    countries = countries.concat(uk_regions);

    players.forEach(function(d){
        d.lat = +d.lat;
        d.lng = +d.lng;
        d.crds = [d.lng,d.lat];
        d.px_crds = custom_project(d.crds);
        d.x_px = d.px_crds[0] + Math.random();
        d.y_px = d.px_crds[1] + Math.random();
        d.r = 3;
    });

    var robbie = players.filter(function(d){return d.name=="Robbie Keane"});
    console.log(robbie);

    players = d3.nest()
            .key(function(d){return d.team})
            .entries(players);

    players = players.map(function(d){
        return {
            key: d.key,
            values: nest_by_club(d.values)
            //x: d3.mean()
        }
    });

    var simulation = d3.forceSimulation()
        .force("collide", d3.forceCollide(function(d){return d.r + 1}).strength(0.05))
        .stop();

    players.forEach(function(d){
        simulation.nodes(d.values);
        for (var i = 0; i < 200; ++i) simulation.tick();
    });

    var euro2016_countries = players.map(function(d){return d.key});

    svg.selectAll(".country")
        .data(countries)
        .enter().insert("path", ".graticule")
        .attr("class", "country")
        .attr("d", path)
        .classed("qualified", function(d){
            return euro2016_countries.indexOf(id_name_map.get(d.id).name) != -1;
        })
        .classed("active",function(d){
            return d.id == 250;
        })
        .on("click",function(d){
            var clicked = d3.select(this);
            debugger;
            if (!clicked.classed("active")){
                draw_circles(id_name_map.get(d.id).name);
                d3.select(".active").classed("active",false);
                clicked.classed("active",true);
            }
        });
           // .on("mouseover",f);

    draw_circles("France");


 }

 function nest_by_club(nodes){
    nodes = d3.nest()
            .key(function(d){return d.club_name})
            .entries(nodes);
    var packed = pack.nodes({name: "root",
                    children: nodes.map(function(d){
                        return {name: d.key,
                                team: d.values[0].team,
                                children: d.values}
                    })
    });
    packed = packed.filter(function(d){return d.depth == 1});
    packed.forEach(function(d){
        d.children.forEach(function(player){
            player.x = player.x - d.x;
            player.y = player.y - d.y;
        });
        d.x = d.children[0].x_px;
        d.y = d.children[0].y_px;
    });
    return packed;
 }

 function mouseover(d){
    var tooltip = d3.select(".tooltip");
    tooltip.select("#name").text(d.name);
    tooltip.select("#club").text(function(){
        return d.club_name ? d.club_name + " (" + d.club_country_code + ")" : ""
    });
    tooltip.style("top", (d3.event.pageY - 40 ) + "px")
        .style("left", (d3.event.pageX + 3 ) + "px").classed("hidden",false);
    tooltip.classed("hidden",false);
 }

 function mouseout(){
    d3.select(".tooltip").classed("hidden",true);
 }

 function crosses_rect(x,y){
    var dx = (x-centerX)/Math.abs(x-centerX),
        dy = (y-centerY)/Math.abs(x-centerX);

    var dh = Math.abs((width-centerX+margin/2)/dx),
        dw = Math.abs((height-centerY+margin/2)/dy);

    var k = d3.min([dh,dw]);

    return [centerX + k*dx,centerY + k*dy];
 }

 function custom_project(crds){
    var px_crds = projection(crds);
    var px_x = px_crds[0],
        px_y = px_crds[1];
    if (px_x >= margin && px_x <= width-margin && px_y >= margin && px_y <= height-margin){
        return px_crds;
    }else{
        return crosses_rect(px_crds[0],px_crds[1])
    }
 }

 d3.select(self.frameElement).style("height", height + "px");

 </script>
diff --git a/uk.json b/uk.json
diff --git a/world-50m.json b/world-50m.json
diff --git a/world-country-names.tsv b/world-country-names.tsv
	<!-- https://bl.ocks.org/mbostock/4180634 -->

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #fcfcfa;
	}

	.country.qualified{
	fill: #e5f5e0;
	}

	.country.qualified.active,
	.country.qualified.active:hover {
	fill: #fec44f;
	}

	.country.qualified:hover{
	fill: #c7e9c0;
	}

	.country {
	fill: #f0f0f0;
	stroke: #bdbdbd;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 1;
	}

	.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}

	.fill {
	fill: #fff;
	}


	.land {
	fill: #222;
	}


	.tooltip {
	position: absolute;
	width: auto;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	.tooltip.hidden {
	display: none;
	}

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

	.overlay {
	fill: none;
	pointer-events: all;
	}

	</style>
	<body>

	<div class="tooltip hidden">
	<strong> <p id="name"></p> </strong>
	<p id="club"></p>
	</div>

	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/d3-force.v1.min.js"></script>
	<script src="https://d3js.org/d3-timer.v1.min.js"></script>
	<script src="https://d3js.org/d3-collection.v1.min.js"></script>

	<script src="https://d3js.org/d3-quadtree.v1.min.js"></script>

	<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script>

	var margin = 20,
	width = 860-2*margin,
	height = 640-2*margin;
	var centerX = width/2 + margin/2,
	centerY = height/2 + margin/2;

	var color = d3.scale.category10();
	var players;

	var projection = d3.geo.azimuthalEquidistant()
	.scale(900)
	.center([17.25,54.25])
	.translate([width / 2, height / 2])
	.clipExtent([[margin,margin],[width,height]])
	.precision(.1);

	var pack = d3.layout.pack()
	.value(function(d) { return d.r; })
	//.size([w, h])
	.radius(function(d){return d})
	.padding(1);

	var path = d3.geo.path()
	.projection(projection);


	/*var zoom = d3.behavior.zoom()
	.translate([width / 2, height / 2])
	.scale(900)
	.scaleExtent([900, 5000])
	.on("zoom", zoomed);*/


	var svg = d3.select("body").append("svg")
	.attr("width", width+2*margin)
	.attr("height", height+2*margin)
	.append("g")
	.attr("transform","translate(" + margin + "," + margin + ")");

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", width)
	.attr("height", height);

	/*svg.call(zoom)
	.call(zoom.event);*/

	svg.append("defs").append("path")
	.datum({type: "Sphere"})
	.attr("id", "sphere")
	.attr("d", path);

	svg.append("use")
	.attr("class", "stroke")
	.attr("xlink:href", "#sphere");

	svg.append("use")
	.attr("class", "fill")
	.attr("xlink:href", "#sphere");


	queue()
	.defer(d3.json, "world-50m.json")
	.defer(d3.tsv, "euro2016players_all.tsv")
	.defer(d3.json,"uk.json")
	.defer(d3.tsv, "world-country-names.tsv")
	.await(draw);

	function draw_circles(menu_val){
	var players_to_draw = players.filter(function(d){return d.key == menu_val});

	var nodes = svg.selectAll("circle")
	.data(players_to_draw[0].values,function(d){return d.name+d.team});

	var nodesEnter = nodes.enter()
	.append("circle").attr("class","club")
	.attr("cx", function (d) { return d.x; })
	.attr("cy", function (d) { return d.y; })
	.attr("r", 0)
	.attr("opacity",0.7)
	.attr("stroke","#0b2a3f")
	.attr("fill", "#d9ecf9")
	.on("mouseover",mouseover)
	.on("mouseout",mouseout)
	.on("click",function(d){console.log(d)})
	.each(function(d){
	svg.append("g").attr("transform","translate(" +d.x+ "," +d.y+ ")")
	.selectAll(".player").data(d.children,function(d){return d.name;}).enter()
	.append("circle")
	.attr("r",0)
	.attr("class","player")
	.attr("fill","#1f77b4")
	.attr("cx", function (n) { return n.x; })
	.attr("cy", function (n) { return n.y; })
	.on("mouseover",mouseover)
	.on("mouseout",mouseout)
	});

	nodesEnter.transition().delay(400).duration(400).attr("r", function(d){return d.r;});
	svg.selectAll(".player").transition().delay(400).duration(500).attr("r", 3);

	nodes.exit().transition().duration(400).attr("r",0).remove();

	}

	function draw(error, world, players_from_file,uk,country_names){
	debugger;
	players = players_from_file;
	var id_name_map = d3.map(country_names, function(d){return d.id});

	//ids of euope countries
	var show_ids = country_names.filter(function(d){return d.europe;}).map(function(d){return +d.id});

	var countries = topojson.feature(world, world.objects.countries).features,
	uk_regions = topojson.feature(uk, uk.objects.subunits).features;

	countries = countries.filter(function(d){return show_ids.indexOf(d.id)!=-1});
	countries = countries.concat(uk_regions);

	players.forEach(function(d){
	d.lat = +d.lat;
	d.lng = +d.lng;
	d.crds = [d.lng,d.lat];
	d.px_crds = custom_project(d.crds);
	d.x_px = d.px_crds[0] + Math.random();
	d.y_px = d.px_crds[1] + Math.random();
	d.r = 3;
	});

	var robbie = players.filter(function(d){return d.name=="Robbie Keane"});
	console.log(robbie);

	players = d3.nest()
	.key(function(d){return d.team})
	.entries(players);

	players = players.map(function(d){
	return {
	key: d.key,
	values: nest_by_club(d.values)
	//x: d3.mean()
	}
	});

	var simulation = d3.forceSimulation()
	.force("collide", d3.forceCollide(function(d){return d.r + 1}).strength(0.05))
	.stop();

	players.forEach(function(d){
	simulation.nodes(d.values);
	for (var i = 0; i < 200; ++i) simulation.tick();
	});

	var euro2016_countries = players.map(function(d){return d.key});

	svg.selectAll(".country")
	.data(countries)
	.enter().insert("path", ".graticule")
	.attr("class", "country")
	.attr("d", path)
	.classed("qualified", function(d){
	return euro2016_countries.indexOf(id_name_map.get(d.id).name) != -1;
	})
	.classed("active",function(d){
	return d.id == 250;
	})
	.on("click",function(d){
	var clicked = d3.select(this);
	debugger;
	if (!clicked.classed("active")){
	draw_circles(id_name_map.get(d.id).name);
	d3.select(".active").classed("active",false);
	clicked.classed("active",true);
	}
	});
	// .on("mouseover",f);

	draw_circles("France");


	}

	function nest_by_club(nodes){
	nodes = d3.nest()
	.key(function(d){return d.club_name})
	.entries(nodes);
	var packed = pack.nodes({name: "root",
	children: nodes.map(function(d){
	return {name: d.key,
	team: d.values[0].team,
	children: d.values}
	})
	});
	packed = packed.filter(function(d){return d.depth == 1});
	packed.forEach(function(d){
	d.children.forEach(function(player){
	player.x = player.x - d.x;
	player.y = player.y - d.y;
	});
	d.x = d.children[0].x_px;
	d.y = d.children[0].y_px;
	});
	return packed;
	}

	function mouseover(d){
	var tooltip = d3.select(".tooltip");
	tooltip.select("#name").text(d.name);
	tooltip.select("#club").text(function(){
	return d.club_name ? d.club_name + " (" + d.club_country_code + ")" : ""
	});
	tooltip.style("top", (d3.event.pageY - 40 ) + "px")
	.style("left", (d3.event.pageX + 3 ) + "px").classed("hidden",false);
	tooltip.classed("hidden",false);
	}

	function mouseout(){
	d3.select(".tooltip").classed("hidden",true);
	}

	function crosses_rect(x,y){
	var dx = (x-centerX)/Math.abs(x-centerX),
	dy = (y-centerY)/Math.abs(x-centerX);

	var dh = Math.abs((width-centerX+margin/2)/dx),
	dw = Math.abs((height-centerY+margin/2)/dy);

	var k = d3.min([dh,dw]);

	return [centerX + kdx,centerY + kdy];
	}

	function custom_project(crds){
	var px_crds = projection(crds);
	var px_x = px_crds[0],
	px_y = px_crds[1];
	if (px_x >= margin && px_x <= width-margin && px_y >= margin && px_y <= height-margin){
	return px_crds;
	}else{
	return crosses_rect(px_crds[0],px_crds[1])
	}
	}

	d3.select(self.frameElement).style("height", height + "px");

	</script>