xxxxxxxxxx<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