Build converting Natural Earth shapefiles into a geoJSON format, then projecting that with a D3 identity projection, fitting the projection to my SVG file.
xxxxxxxxxx
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
path {
fill: none;
stroke: black;
stroke-width: .7px;
}
</style>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var width = 960;
var height = 600;
var margin = {top: 0, bottom: 0, left: 0, right: 0}
d3.queue()
.defer(d3.json, "world.json")
.await(ready)
function ready(error, world) {
var projection = d3.geoIdentity().reflectY(true).fitSize([width,height],world)
var path = d3.geoPath().projection(projection) // Geopath generator
var zoomExtent = d3.zoom().scaleExtent([1, 20]);
function zoom() {
g.attr("transform", d3.event.transform)
}
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("background-color","lightgrey")
.call(zoomExtent
.on("zoom", zoom))
var g = svg.append("g")
.attr("class", "mapInformation")
.attr("transform",`translate(8,${margin.top})`)
var paths = g.selectAll("path")
.data(world.geometries)
.enter()
.append("path")
.attr("d", path)
}
</script>
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js