<!-- 
MIT License

Copyright (c) [2021] [Spruce Emmanuel]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this d3.js Example(s), to use without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Project, and to permit persons to whom the Project is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Project.
-->

<body>
	<svg id="d3_demo"></svg>
</body>
.bar {
	fill: green;
}
import * as d3 from "https://cdn.skypack.dev/d3";

// set the dimensions and margins of the graph
const margin = { top: 5, right: 5, bottom: 5, left: 5 },
	width = document.querySelector("body").clientWidth,
	height = 500;

const svg = d3.select("#d3_demo").attr("viewBox", [0, 0, width, height]);

let projection = d3.geoEquirectangular().center([0, 0]);

const pathGenerator = d3.geoPath().projection(projection);

let g = svg.append("g");

d3
	.json(
		"https://raw.githubusercontent.com/iamspruce/intro-d3/main/data/countries-110m.geojson"
	)
	.then((data) => {
		g.selectAll("path").data(data.features).join("path").attr("d", pathGenerator);
	});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.