jhnklly/admin0_centroids.geojson

## admin0_centroids.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              admin0_centroids.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  circle {
    stroke-width: 1;
    stroke: #555;
  }
  circle.NorthAmerica { fill: #f3797f; }
  circle.SouthAmerica { fill: #80a1b6; }
  circle.Europe { fill: #9fad9e; }
  circle.Asia { fill: #9c8c9f; }
  circle.Africa { fill: #fab585; }
  circle.Oceania { fill: #b28d69; }
  text {
    fill: #555;
    font-family: sans-serif;
    font-size: 8px;
    pointer-events: none;
    text-anchor: middle;
  }
  </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
    <script type="text/javascript">


  var pixelLoc = d3.geo.mercator();
  pixelLoc.scale(2000);


(function() {
  var width = 2000;
  var height = 1500;
  var padding = 1;
  var k;
  var node;

  var pixelLoc = d3.geo.mercator();
  pixelLoc.scale(2000);

  svg = d3.select('#map')
          .append('svg:svg')
          .attr('width', width)
          .attr('height', height);

    d3.json('admin0_centroids.geojson', function(data) {

      var countries = data.features;

    var coords = [];
    var xs = [];
    var ys = []


/*    for (alias in coordinates) {
      coords.push(coordinates[alias]);
      xs.push(coordinates[alias][0]);
      ys.push(coordinates[alias][1]);
    }
*/
    var minX = d3.min(xs);
    var maxX = d3.max(xs);

    var minX = -179;
    var maxX = 179;

    var xScale = d3.scale.linear().domain([minX, maxX]).range([-50, -30]);

    var minY = d3.min(ys);
    var maxY = d3.max(ys);

    var minY = -60;
    var maxY = 79;
    var yScale = d3.scale.linear().domain([minY, maxY]).range([-20, -10]);

      var pointScale = d3.scale.sqrt().domain([0, 80]).range([0, 75]);

      nodes = []


      for (i=0; i < countries.length; i++) {
        if (countries[i].geometry.coordinates) {
        //coords.push(coordinates[alias]);
            xs.push(countries[i].geometry.coordinates[0]);
            ys.push(countries[i].geometry.coordinates[1]);

            node = countries[i];
            //node.coordinates = coordinates[node.alias];
            node.coordinates = countries[i].geometry.coordinates;
            //console.log(node);

            node.cx = xScale(pixelLoc(node.coordinates)[0]);

            node.cy = yScale(pixelLoc(node.coordinates)[1]);
            //node.radius = pointScale(node.points);
            node.radius = pointScale(3.2);
            node.continent = countries[i].properties.continent;
            node.alias = countries[i].properties.iso_a3;
            //console.log(node);
            nodes.push(node);
          }
      }

      //debugger;

      force = d3.layout.force()
                .nodes(nodes)
                .links([])
                .size([width, height])
                .charge(function(d) {
                  -Math.pow(d.radius*5.0, 2.0) / 8
                })
                .gravity(1.7)
                .on('tick', function(e) {
                  k = 10 * e.alpha;
                  for (i=0; i < nodes.length; i++) {
                    nodes[i].x += k * nodes[i].cx
                    nodes[i].y += k * nodes[i].cy
                  }
                  svg.selectAll('circle')
                     .each(collide(.1, nodes, pointScale))
                     .attr('cx', function(node) { return node.x; })
                     .attr('cy', function(node) { return node.y; });

                  svg.selectAll('text')
                     .attr('x', function(node) { return node.x; })
                     .attr('y', function(node) { return node.y+5; })
                     .attr('opacity', function(node) {
                       if (node.radius < 10) {
                         return 0;
                       }
                       return 1;
                     });
                     ;
                })
                .start();

      svg.selectAll('circle')
          .data(nodes)
        .enter().append('svg:circle')
          .attr('cx', function(node) {
            return node.cx;
          })
          .attr('cy', function(node) {
            return node.cy;
          })
          .attr('r', function(node) {
            return node.radius;
          })
          .attr('class', function(node) {
            return node.continent.replace(' ', '');
          })
          ;

    svg.selectAll('text')
        .data(nodes)
      .enter().append('svg:text')
        .text(function(node) {
          console.log(node.alias);
          return node.alias;
        });

    });

  // Adapted from http://bl.ocks.org/3116713
  var collide = function (alpha, nodes, scale) {
    var quadtree = d3.geom.quadtree(nodes);
    return function(d) {
      var r = d.radius + scale.domain()[1] + padding;
      var nx1 = d.x - r;
      var nx2 = d.x + r;
      var ny1 = d.y - r;
      var ny2 = d.y + r;
      quadtree.visit(function(quad, x1, y1, x2, y2) {
        if (quad.point && quad.point !== d) {
          var x = d.x - quad.point.x;
          var y = d.y - quad.point.y;
          var l = Math.sqrt(x * x + y * y)
          var r = d.radius + quad.point.radius + padding;
          if (l < r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    }
  }

})();
    </script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	circle {
	stroke-width: 1;
	stroke: #555;
	}
	circle.NorthAmerica { fill: #f3797f; }
	circle.SouthAmerica { fill: #80a1b6; }
	circle.Europe { fill: #9fad9e; }
	circle.Asia { fill: #9c8c9f; }
	circle.Africa { fill: #fab585; }
	circle.Oceania { fill: #b28d69; }
	text {
	fill: #555;
	font-family: sans-serif;
	font-size: 8px;
	pointer-events: none;
	text-anchor: middle;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
	<script type="text/javascript">



	var pixelLoc = d3.geo.mercator();
	pixelLoc.scale(2000);


	(function() {
	var width = 2000;
	var height = 1500;
	var padding = 1;
	var k;
	var node;

	var pixelLoc = d3.geo.mercator();
	pixelLoc.scale(2000);

	svg = d3.select('#map')
	.append('svg:svg')
	.attr('width', width)
	.attr('height', height);

	d3.json('admin0_centroids.geojson', function(data) {

	var countries = data.features;

	var coords = [];
	var xs = [];
	var ys = []


	/* for (alias in coordinates) {
	coords.push(coordinates[alias]);
	xs.push(coordinates[alias][0]);
	ys.push(coordinates[alias][1]);
	}
	*/
	var minX = d3.min(xs);
	var maxX = d3.max(xs);

	var minX = -179;
	var maxX = 179;

	var xScale = d3.scale.linear().domain([minX, maxX]).range([-50, -30]);

	var minY = d3.min(ys);
	var maxY = d3.max(ys);

	var minY = -60;
	var maxY = 79;
	var yScale = d3.scale.linear().domain([minY, maxY]).range([-20, -10]);

	var pointScale = d3.scale.sqrt().domain([0, 80]).range([0, 75]);

	nodes = []


	for (i=0; i < countries.length; i++) {
	if (countries[i].geometry.coordinates) {
	//coords.push(coordinates[alias]);
	xs.push(countries[i].geometry.coordinates[0]);
	ys.push(countries[i].geometry.coordinates[1]);

	node = countries[i];
	//node.coordinates = coordinates[node.alias];
	node.coordinates = countries[i].geometry.coordinates;
	//console.log(node);

	node.cx = xScale(pixelLoc(node.coordinates)[0]);

	node.cy = yScale(pixelLoc(node.coordinates)[1]);
	//node.radius = pointScale(node.points);
	node.radius = pointScale(3.2);
	node.continent = countries[i].properties.continent;
	node.alias = countries[i].properties.iso_a3;
	//console.log(node);
	nodes.push(node);
	}
	}

	//debugger;

	force = d3.layout.force()
	.nodes(nodes)
	.links([])
	.size([width, height])
	.charge(function(d) {
	-Math.pow(d.radius*5.0, 2.0) / 8
	})
	.gravity(1.7)
	.on('tick', function(e) {
	k = 10 * e.alpha;
	for (i=0; i < nodes.length; i++) {
	nodes[i].x += k * nodes[i].cx
	nodes[i].y += k * nodes[i].cy
	}
	svg.selectAll('circle')
	.each(collide(.1, nodes, pointScale))
	.attr('cx', function(node) { return node.x; })
	.attr('cy', function(node) { return node.y; });

	svg.selectAll('text')
	.attr('x', function(node) { return node.x; })
	.attr('y', function(node) { return node.y+5; })
	.attr('opacity', function(node) {
	if (node.radius < 10) {
	return 0;
	}
	return 1;
	});
	;
	})
	.start();

	svg.selectAll('circle')
	.data(nodes)
	.enter().append('svg:circle')
	.attr('cx', function(node) {
	return node.cx;
	})
	.attr('cy', function(node) {
	return node.cy;
	})
	.attr('r', function(node) {
	return node.radius;
	})
	.attr('class', function(node) {
	return node.continent.replace(' ', '');
	})
	;

	svg.selectAll('text')
	.data(nodes)
	.enter().append('svg:text')
	.text(function(node) {
	console.log(node.alias);
	return node.alias;
	});

	});

	// Adapted from http://bl.ocks.org/3116713
	var collide = function (alpha, nodes, scale) {
	var quadtree = d3.geom.quadtree(nodes);
	return function(d) {
	var r = d.radius + scale.domain()[1] + padding;
	var nx1 = d.x - r;
	var nx2 = d.x + r;
	var ny1 = d.y - r;
	var ny2 = d.y + r;
	quadtree.visit(function(quad, x1, y1, x2, y2) {
	if (quad.point && quad.point !== d) {
	var x = d.x - quad.point.x;
	var y = d.y - quad.point.y;
	var l = Math.sqrt(x * x + y * y)
	var r = d.radius + quad.point.radius + padding;
	if (l < r) {
	l = (l - r) / l * alpha;
	d.x -= x *= l;
	d.y -= y *= l;
	quad.point.x += x;
	quad.point.y += y;
	}
	}
	return x1 > nx2 \|\| x2 < nx1 \|\| y1 > ny2 \|\| y2 < ny1;
	});
	}
	}

	})();
	</script>
	</body>
	</html>