Country Centroids

forked from curran's block: Country Centroids on a Map

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

.link {
  fill: none;
  stroke: #111;
  stroke-width: .5px;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script>

var width = 960,
    height = 480,
    radius = 8,
		threshold = 30,
    fill = "rgba(255, 49, 255, 0.5)"

var projection = d3.geoEquirectangular()
    .scale(153)
    .translate([width / 2, height / 2])
    .precision(.1);
  
var path = d3.geoPath()
    .projection(projection);

var g = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
		.append("g");
  
d3.queue()
    .defer(d3.json, "https://unpkg.com/world-atlas@1/world/110m.json")
    .defer(d3.tsv, "world-country-names.tsv")
    .await(ready);
  
function ready(error, world, names) {
  if (error) throw error;
  
  var nodes = []
  var links = []

force.stop();
  
  for (var i = 0; i < 120; ++i) force.tick(); 
  
  g.selectAll("line")
    .data(links)
    .enter()
    .append("line")
  		.attr("class", "link")
      .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; });
  
  g.selectAll(".centroid")
    .data(nodes)
    .enter()
    .append("rect")
      .attr("class", "centroid")
      .attr("fill", fill)
  		.attr("height", radius*2)
      .attr("width", radius*2)
      .attr("x", function (d){ return d.x - radius; })
      .attr("y", function (d){ return d.y - radius; });
  
 
}

</script>

https://d3js.org/d3.v4.min.js

https://unpkg.com/topojson@3

https://d3js.org/queue.v1.min.js