xxxxxxxxxx<meta charset="utf-8"><svg width="960" height="500"></svg><script src="https://d3js.org/d3.v3.min.js"></script><script src="https://d3js.org/topojson.v2.min.js"></script><script>var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height");// On definie une echelle de couleur var color = d3.scale.quantize() .range(["rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]); var projection = d3.geo.conicConformal().center([2.454071, 46.279229]).scale(3000);var path = d3.geoPath() .projection(projection);svg.append("path") .attr("id", "graticule") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("d", path(d3.geoGraticule10()));svg.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("d", path({type: "Sphere"}));d3.json("https://d3js.org/world-50m.v1.json", function(error, world) { if (error) throw error; svg.insert("path", "#graticule") .datum(topojson.feature(world, world.objects.land)) .attr("fill", "#222") .attr("d", path); svg.insert("path", "#graticule") .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 0.5) .attr("d", path);});</script></body> https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v2.min.js