This post describes how to change the projection of your background map. (See here for explanations on basic map). Picking the right projection is a crucial step in your project, since shapes can be really different from one to the other and thus convey a different message. See this blog post to read more about it.
d3.geoAiry(), d3.geoAitoff(), d3.geoArmadillo(), d3.geoAzimuthalEqualArea(), d3.geoBaker(), d3.geoBoggs(), and many many more on the reference page.<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>
<script>
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection. Try: d3.geoAiry() / d3.geoAitoff() / d3.geoArmadillo() / d3.geoAugust() / d3.geoAzimuthalEqualArea() / d3.geoAzimuthalEquidistant() and more
var projection = d3.geoAitoff()
.scale(width / 1.3 / Math.PI)
.translate([width / 2, height / 2])
// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("fill", "#69b3a2")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "#fff")
})
</script>