index.html

@@ -19,10 +19,10 @@
 					display: flex;
 					align-items: flex-start;
 					justify-content: space-evenly;
+					gap: 2em 2em;
 			}
 
 			svg {
-				border: 1px solid;
 				padding: 2em;
 				visibility: hidden;
 				opacity: 0;
@@ -57,7 +57,7 @@
 			.translationText, .romanizationText {
 				visibility: hidden;
 				font-family: "Noto Sans";
-				font-size:1.25em;
+				font-size:1.2em;
 			}
 
          .romanizationText {
@@ -67,7 +67,7 @@
          .languageText {
             pointer-events: none;
             font-weight: bold;
-            font-size: 1.15em;
+            font-size: 1em;
             font-family: sans-serif;
             visibility: hidden;
          }
@@ -114,12 +114,14 @@
 			}
 
 			/* Position map load spinner in the middle of the SVG */
-			.svgContainer {
+			#svgContainer {
 					position: relative;
 					display: inline-block;
+					flex-grow: 1;
+               max-width: 100%;
 			}
 
-			.svgContainer .mapLoadSpinner {
+			#svgContainer .mapLoadSpinner {
 					position: absolute;
 					top: 40%;
 					left: 40%;
@@ -179,7 +181,18 @@
 			@media only screen and (max-width: 768px) {
 					main {
 						flex-direction: column;
+                    	align-items: stretch;
 					}
+					.district {
+							stroke-width: 0.1;
+					}
+					.translationText, .romanizationText {
+						font-size: 0.7em;
+					}
+					.languageText {
+						font-size: 0.6em;
+					}
+
 			}
 
 		</style>
@@ -200,8 +213,7 @@
 		</noscript>
 		</section>
 
-		<section class="svgContainer">
+		<section id="svgContainer">
-			<svg id = "indiaMap" width="1300" height="1300"></svg>
 			<div id="mapLoadSpinner" class="mapLoadSpinner"></div>
 		</section>
 		</main>

index.js

@@ -1,5 +1,3 @@
-const svg = d3.select("svg")
-
 const defaultColor = "#555555"
 
 const languages = {
@@ -129,6 +127,33 @@ const district2lang = { // Should override state colors
    "Bahraich": languages["awadhi"],
 }
 
+function responsivefy(svg) {
+    // get container + svg aspect ratio
+    var container = d3.select(svg.node().parentNode),
+        width = parseInt(svg.style("width")),
+        height = parseInt(svg.style("height")),
+        aspect = width / height;
+
+    // add viewBox and preserveAspectRatio properties,
+    // and call resize so that svg resizes on inital page load
+    svg.attr("viewBox", "0 0 " + width + " " + height)
+        .attr("perserveAspectRatio", "xMinYMid")
+        .call(resize);
+
+    // to register multiple listeners for same event type,
+    // you need to add namespace, i.e., 'click.foo'
+    // necessary if you call invoke this function for multiple svgs
+    // api docs: https://github.com/mbostock/d3/wiki/Selections#on
+    d3.select(window).on("resize." + container.attr("id"), resize);
+
+    // get width of container and resize svg to fit it
+    function resize() {
+        var targetWidth = Math.floor(container.node().getBoundingClientRect().width);
+        svg.attr("width", targetWidth);
+        svg.attr("height", Math.round(targetWidth / aspect));
+    }
+}
+
 // Functions for calculating and dealing with language boundaries
 function reverseCoordArrays(coords) {
     if (!Array.isArray(coords)) {
@@ -185,12 +210,40 @@ function stateOrDistrictOrLanguage(d) {
 	}
 }
 
+
+//	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
+//	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
+const mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
+// const mapHeight = document.querySelector("#svgContainer").offsetHeight;
+const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top);
+
+const svg = d3.select("#svgContainer")
+			.append('svg')
+		.attr('width', mapWidth.toString())
+      .attr('height', (mapHeight).toString())
+//      .attr('viewbox', '0 0 ' + mapWidth.toString() + ' ' + mapHeight.toString())
+//		.attr('preserveAspectRatio', "xMidYMin")
+			.attr('id', 'indiaMap')
+      //   .call(responsivefy);
+
 function drawMap(world) {
-	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
-	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
 	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()