migration&worldmap

forked from thomaxyu001's block: migration&worldmap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Data Summary</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <style>
      path {
        fill: #ccc;
        stroke: #fff;
        stroke-width: .5px;
      }

circle {
        fill: #fff;
        fill-opacity: 0.4;
        stroke: #111;
      }

path.active {
        fill: #ff7f7f;
      }
        circle.active {
          fill: #f00;
        }
    </style>
  </head>
  <body>
    <script>
      
    var width = 960,
        height = 500;

var projection = d3.geoMercator();

var path = d3.geoPath()
      .projection(projection)

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
    var url2 = "https://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson"
    d3.json(url, function(error, countries) {
    d3.json(url2, function(error, places) {
      if (error) throw error;

console.log("geojson", countries, places);

svg.selectAll("path")
        .data(countries.features)
      .enter().append("path")
        .attr("d", path)
      
      d3.csv("m.csv", function(d){
  
	for(i = 0; i < d.length; i ++){
         
		svg.append("circle")
			.attr("cx", projection([d[i].longitude,d[i].latitude])[0])
			.attr("cy", projection([d[i].longitude,d[i].latitude])[1])
			.attr("r", 1)
			.style("fill", "red")
					
	}
})

});
    });

</script>
  </body>
</html>

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

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