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 {
	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
	.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");

]).then(([geoJSONdata, countryData]) => {
	countryData.data.forEach((d) => {
		d.info.Longitude = +d.info.Longitude;
		d.info.Latitude = +d.info.Latitude;

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

		.attr("class", "country")
		.attr("d", pathGenerator);

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.