This is a simple map example centered on the Pacific.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.
license: mit |
This is a simple map example centered on the Pacific.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
path { | |
stroke: white; | |
stroke-width: 0.25px; | |
fill: grey; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<script src="https://unpkg.com/topojson@3"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var projection = d3.geoMercator() | |
.center([0, 5 ]) | |
.scale(150) | |
.rotate([-180,0]); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var path = d3.geoPath() | |
.projection(projection); | |
var g = svg.append("g"); | |
// load and display the World | |
d3.json("world-110m2.json").then(function(topology) { | |
g.selectAll("path") | |
.data(topojson.feature(topology, topology.objects.countries).features) | |
.enter().append("path") | |
.attr("d", path); | |
}); | |
</script> | |
</body> | |
</html> |