index.html

@@ -19,10 +19,10 @@
 					display: flex;
 					align-items: flex-start;
 					justify-content: space-evenly;
+					gap: 10% 10%;
 			}
 
 			svg {
-				border: 1px solid;
 				padding: 2em;
 				visibility: hidden;
 				opacity: 0;
@@ -117,6 +117,8 @@
 			.svgContainer {
 					position: relative;
 					display: inline-block;
+					flex-grow: 1;
+					height: 1000px;
 			}
 
 			.svgContainer .mapLoadSpinner {
@@ -201,7 +203,6 @@
 		</section>
 
 		<section class="svgContainer">
-			<svg id = "indiaMap" width="1300" height="1300"></svg>
 			<div id="mapLoadSpinner" class="mapLoadSpinner"></div>
 		</section>
 		</main>

index.js

@@ -1,4 +1,12 @@
-const svg = d3.select("svg")
+//	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
+//	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
+	const mapWidth = window.innerWidth - document.querySelector(".svgContainer").offsetWidth;
+
+const svg = d3.select(".svgContainer")
+			.append('svg')
+			.attr('width', '100%')
+			.attr('preserveAspectRatio', "xMinYMin meet")
+			.attr('id', 'indiaMap');
 
 const defaultColor = "#555555"
 
@@ -186,9 +194,7 @@ function stateOrDistrictOrLanguage(d) {
 }
 
 function drawMap(world) {
-	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
+	const projection = d3.geoMercator().fitWidth(mapWidth,world)
-	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
-	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
 	const path = d3.geoPath().projection(projection);
 
 	const states = svg.selectAll("g")