January 8, 2018 23:06
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/arms_transfer_2012_2016_top - arms_transfer_2012_2016_top.csv b/arms_transfer_2012_2016_top - arms_transfer_2012_2016_top.csv
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Mexico</title>
  <style>
    .boundary {
      fill: #ccc;
      stroke: #888;
      stroke-linejoin: round;
    }
    svg {
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
    }

    .overlay {
      fill: none;
      pointer-events: all;
    }
  </style>
 </head>

 <body>
  <div id="map"></div>
  <!-- <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script> -->

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

  <script>
  (function(){
 var h = 600;
   var w = 900;
   var i = 0;
   var map = void 0;
  var world = void 0;
  var US = void 0;


    var margin = {
          top: 10,
          bottom: 40,
          left: 0,
          right: 30
        };


      var circleScale = d3.scaleSqrt()
        .domain([0, 4445])
        .range([0.5, 10])


    var width = w - margin.left - margin.right;
    var height = h - margin.top - margin.bottom;

  var dragging = function(d){
    var c = projection.rotate();
    projection.rotate([c[0] + d3.event.dx/6, c[1] - d3.event.dy/6])
    map.selectAll('path').attr('d', path);
    map.selectAll(".circles").attr("cx", function(d){
                var coords = projection([d.Longitude_imp, d.Latitude_imp])
                return coords[0];
              })
              .attr("cy", function(d){
                var coords = projection([d.Longitude_imp, d.Latitude_imp])
                return coords[1];
              })
   }

   var drag = d3.drag()
    .on("drag", dragging)


   var projection = d3.geoOrthographic().clipAngle(90); 
   var path = d3.geoPath().projection(projection);

   var svg = d3.select("body")
        .append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h)

   d3.json("world.json", function(json){ 
     d3.csv("arms_transfer_2012_2016_top - arms_transfer_2012_2016_top.csv", function(error, data){
            
    
    var countries = topojson.feature(json, json.objects.countries).features
    var US = countries[168]


    map = svg.append('g').attr('class', 'boundary');
    world = map.selectAll('path').data(countries);
    US = map.selectAll('.US').data([US]);
    Circles = map.selectAll(".circles").data(data)

    console.log(countries[168])
    
    
    world.enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path)
    
    
    US.enter()
      .append("path")
      .attr("class", "US")
      .attr("d", path)
      .style("fill", "lightyellow")
      .style("stroke", "orange")


         
          
          Circles.enter()
              .append("circle")
              .attr("class", "circles")
              .attr("r", function(d){
                return circleScale(d.Millions)
              })
              .attr("cx", function(d){
                var coords = projection([d.Longitude_imp, d.Latitude_imp])
                return coords[0];
              })
              .attr("cy", function(d){
                var coords = projection([d.Longitude_imp, d.Latitude_imp])
                return coords[1];
              })
              .style("fill", "#cd0d0e")
            
    svg.append("rect")
      .attr("class", "overlay")
      .attr("width", w)
      .attr("height", h)
      .call(drag)

      })

   })

  })();
 </script>
 </body>
diff --git a/world.json b/world.json
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Mexico</title>
	<style>
	.boundary {
	fill: #ccc;
	stroke: #888;
	stroke-linejoin: round;
	}
	svg {
	border-style: solid;
	border-width: 1px;
	border-color: #ccc;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<!-- <script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script> -->

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

	<script>
	(function(){
	var h = 600;
	var w = 900;
	var i = 0;
	var map = void 0;
	var world = void 0;
	var US = void 0;


	var margin = {
	top: 10,
	bottom: 40,
	left: 0,
	right: 30
	};


	var circleScale = d3.scaleSqrt()
	.domain([0, 4445])
	.range([0.5, 10])


	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;

	var dragging = function(d){
	var c = projection.rotate();
	projection.rotate([c[0] + d3.event.dx/6, c[1] - d3.event.dy/6])
	map.selectAll('path').attr('d', path);
	map.selectAll(".circles").attr("cx", function(d){
	var coords = projection([d.Longitude_imp, d.Latitude_imp])
	return coords[0];
	})
	.attr("cy", function(d){
	var coords = projection([d.Longitude_imp, d.Latitude_imp])
	return coords[1];
	})
	}

	var drag = d3.drag()
	.on("drag", dragging)


	var projection = d3.geoOrthographic().clipAngle(90);
	var path = d3.geoPath().projection(projection);

	var svg = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("width", w)
	.attr("height", h)

	d3.json("world.json", function(json){
	d3.csv("arms_transfer_2012_2016_top - arms_transfer_2012_2016_top.csv", function(error, data){


	var countries = topojson.feature(json, json.objects.countries).features
	var US = countries[168]


	map = svg.append('g').attr('class', 'boundary');
	world = map.selectAll('path').data(countries);
	US = map.selectAll('.US').data([US]);
	Circles = map.selectAll(".circles").data(data)

	console.log(countries[168])


	world.enter()
	.append("path")
	.attr("class", "boundary")
	.attr("d", path)


	US.enter()
	.append("path")
	.attr("class", "US")
	.attr("d", path)
	.style("fill", "lightyellow")
	.style("stroke", "orange")




	Circles.enter()
	.append("circle")
	.attr("class", "circles")
	.attr("r", function(d){
	return circleScale(d.Millions)
	})
	.attr("cx", function(d){
	var coords = projection([d.Longitude_imp, d.Latitude_imp])
	return coords[0];
	})
	.attr("cy", function(d){
	var coords = projection([d.Longitude_imp, d.Latitude_imp])
	return coords[1];
	})
	.style("fill", "#cd0d0e")

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", w)
	.attr("height", h)
	.call(drag)

	})

	})

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