<!-- 
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 id="svg_wrapper">
	<svg id="d3_demo"></svg>
</body>
body {
	background: lightblue;
	height: 100vh;
}
path {
	stroke: #999;
	stroke-width: 0.5px;
	fill: #ebebe0;
}
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 = document.querySelector("body").clientHeight;

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);

// add title
svg
	.append("text")
	.attr("x", width / 1.4)
	.attr("y", `${height - 20}`)
	.style("font-size", "20x")
	.style("text-decoration", "underline")
	.text("Map of Nigeria and it's states ");

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

Promise.all([
	d3.json(
		"https://raw.githubusercontent.com/iamspruce/intro-d3/main/data/nigeria_state_boundaries.geojson"
	),
	d3.json(
		"https://raw.githubusercontent.com/iamspruce/intro-d3/main/data/nigeria-states.json"
	)
]).then(([geoJSONdata, countryData]) => {
	countryData.data.forEach((d) => {
		d.info.Longitude = +d.info.Longitude;
		d.info.Latitude = +d.info.Latitude;
	});

	projection.fitSize([width, height], geoJSONdata);

	g.selectAll("path")
		.data(geoJSONdata.features)
		.join("path")
		.attr("class", "country")
		.attr("d", pathGenerator);

	g.selectAll("circle")
		.data(countryData.data)
		.join("circle")
		.attr("cx", (d) => projection([d.info.Longitude, d.info.Latitude])[0])
		.attr("cy", (d) => projection([d.info.Longitude, d.info.Latitude])[1])
		.attr("r", 5)
		.style("fill", "green");

	g.selectAll("text")
		.data(countryData.data)
		.join("text")
		.attr("x", (d) => projection([d.info.Longitude, d.info.Latitude])[0])
		.attr("y", (d) => projection([d.info.Longitude, d.info.Latitude])[1])
		.attr("dy", -7)
		.style("fill", "black")
		.attr("text-anchor", "middle")
		.text((d) => d.Name);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.