hello world map

forked from anonymous's block: hello world map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    // There is a whole catalog of projections, let's start with a simple one.
    // Convert Long & Lat to screen coordinates
    var projection = d3.geoOrthographic(); // will translate points from spherical coordinates to screen coordinates
    
    // Other projections
    var projection = d3.geoMercator();
    
    
    var path = d3.geoPath(projection); // will make paths from a geographic object to a screen object
    
    // only this projection is a circle, but here maybe we want to draw a circle
    // convert a Sphere to the screen
    svg.append("path").datum({type:"Sphere"}).attr("fill", "lightblue");

// Create a new LineString object with two points
    // A straight line on the sphere, but becomes curved in screenspace
    var line = {
      type:"LineString", 
    		coordinates: [[-150, 0], [10, 10]]
    };
    
    // draw the line
    svg.append("path")
      .attr("d", path(line)) // d, name of the attribute for a path
    	.attr("stroke", "red")
      .attr("fill", "none");
    
    // can also draw the line this way
    svg.append("path")
    	.datum(line)					 	// link the object to the SVG element
      .attr("d", path)       	// take any geometric objects embedded in this path and draw them
    	.attr("stroke", "red")
      .attr("fill", "none");
   
    // creating NULL paths is useful because you can define the SVG elements in the order they should be drawn (so they don't overdraw each others)
    land = svg.append("path"); // NULL path, can be informed using data from a GIS file
    
    d3.json("https://visionscarto.net/bxl/countries.geojson", function(err, json) {
      land.datum(json);
      render();
    }); // ext file
    
    svg.append("text")
      //.text("Hello World...?")
      .text(projection([0,0])) // project 0,0 LONG,LAT - intersection of equator & Grenwich Meridian
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    // Add some points of Peoyongyeung -- "path" is also used for points
    svg.append("path")
      .attr("fill", "green")
      .datum({type: "MultiPoint", 
           coordinates: [[125.8, 39],] })
    
    svg.append("path")
    	.datum(d3.geoCircle().radius(40).center([125.8, 39]))
    	.attr("fill", "pink")
    	.attr("fill-opacity", 0.5);
    
    
    
    projection.rotate([180, -30]);
    
    // We can also ANIMATE - by calling render function repeatedly.
    // d3.timer executes a function approx every 50ms
    d3.timer(function(e) {
      projection.rotate([e/100, -30]);
      render();
    })
    
    
    render();
    
    function render() {
      svg.selectAll("path").attr("d", path); // draw all paths 
    }

</script>
</body>

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