From 81fe778212f34768ed72f82ff96e7cf9111ea6ed Mon Sep 17 00:00:00 2001
From: Aadhavan Srinivasan <aadhavan@twomorecents.org>
Date: Fri, 11 Apr 2025 10:12:57 -0400
Subject: [PATCH] Works even better now

---
 index.html |  1 +
 index.js   | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 6a579d4..4dd128c 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
 				visibility: hidden;
 				opacity: 0;
 				transition: opacity 1s, visibility 2s;
+            border: 2px solid;
 			}
 
 			svg.show {
diff --git a/index.js b/index.js
index 368a171..07581e6 100644
--- a/index.js
+++ b/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()