index.html

@@ -27,6 +27,7 @@
 				visibility: hidden;
 				opacity: 0;
 				transition: opacity 1s, visibility 2s;
+            border: 2px solid;
 			}
 
 			svg.show {

index.js

@@ -221,8 +221,8 @@ const svg = d3.select("#svgContainer")
 			.append('svg')
 		.attr('width', mapWidth.toString())
       .attr('height', (mapHeight).toString())
-//         .attr('viewbox', '0 0 860 500')
-	//		.attr('preserveAspectRatio', "xMidYMid meet")
+//      .attr('viewbox', '0 0 ' + mapWidth.toString() + ' ' + mapHeight.toString())
+//		.attr('preserveAspectRatio', "xMidYMin")
 			.attr('id', 'indiaMap')
       //   .call(responsivefy);
 
@@ -230,6 +230,20 @@ function drawMap(world) {
 	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
 	const path = d3.geoPath().projection(projection);
 
+   requestAnimationFrame(() => {
+    const newSvg = d3.select('svg');
+    const bbox = newSvg.node().getBBox();
+    const originalWidth = +newSvg.attr("width");
+    newSvg
+//   .attr("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
+   .attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
+//   .attr("width", mapHeight.toString())
+   .attr("height", bbox.height)
+ //  .style("display", "block")
+ //  .style("max-height", "100%"); // optional: keep it scalable in a flexbox
+   });
+
+
 	const states = svg.selectAll("g")
 	.data(world.features)
 	.enter()