From 66d88c133b51effd77039f7cf1444c09017da66b Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Tue, 8 Apr 2025 23:53:13 -0400 Subject: [PATCH 1/6] Started working on resizing SVG --- index.html | 5 +++-- index.js | 14 ++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 01d511c..0f3d2e3 100644 --- a/index.html +++ b/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 @@
-
diff --git a/index.js b/index.js index ba15c97..3b1369a 100644 --- a/index.js +++ b/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 mapHeight = document.getElementById("indiaMap").getAttribute("height") - const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world) + const projection = d3.geoMercator().fitWidth(mapWidth,world) const path = d3.geoPath().projection(projection); const states = svg.selectAll("g") -- 2.30.2 From 6e9e11c41c143da7cdeab3bd7177886b70fb8170 Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Wed, 9 Apr 2025 10:34:52 -0400 Subject: [PATCH 2/6] Made some progress --- index.html | 9 +++++---- index.js | 51 +++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 46 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 0f3d2e3..f8297ff 100644 --- a/index.html +++ b/index.html @@ -114,14 +114,14 @@ } /* Position map load spinner in the middle of the SVG */ - .svgContainer { + #svgContainer { position: relative; display: inline-block; flex-grow: 1; - height: 1000px; + max-width: 100%; } - .svgContainer .mapLoadSpinner { + #svgContainer .mapLoadSpinner { position: absolute; top: 40%; left: 40%; @@ -181,6 +181,7 @@ @media only screen and (max-width: 768px) { main { flex-direction: column; + align-items: stretch; } } @@ -202,7 +203,7 @@ -
+
diff --git a/index.js b/index.js index 3b1369a..3b37e63 100644 --- a/index.js +++ b/index.js @@ -1,13 +1,3 @@ -// 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" const languages = { @@ -137,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)) { @@ -193,6 +210,20 @@ 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; + +const svg = d3.select("#svgContainer") + .append('svg') + .attr('width', '1300') + .attr('height', '1300') +// .attr('viewbox', '0 0 860 500') + // .attr('preserveAspectRatio', "xMidYMid meet") + .attr('id', 'indiaMap') + .call(responsivefy); + function drawMap(world) { const projection = d3.geoMercator().fitWidth(mapWidth,world) const path = d3.geoPath().projection(projection); -- 2.30.2 From bf8825294b02276f3550b5dcc31cb47a9c1b5cbf Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Thu, 10 Apr 2025 11:37:55 -0400 Subject: [PATCH 3/6] Mostly working --- index.html | 2 +- index.js | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index f8297ff..6a579d4 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ display: flex; align-items: flex-start; justify-content: space-evenly; - gap: 10% 10%; + gap: 2em 2em; } svg { diff --git a/index.js b/index.js index 3b37e63..368a171 100644 --- a/index.js +++ b/index.js @@ -213,19 +213,21 @@ 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; +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 * 0.7; const svg = d3.select("#svgContainer") .append('svg') - .attr('width', '1300') - .attr('height', '1300') + .attr('width', mapWidth.toString()) + .attr('height', (mapHeight).toString()) // .attr('viewbox', '0 0 860 500') // .attr('preserveAspectRatio', "xMidYMid meet") .attr('id', 'indiaMap') - .call(responsivefy); + // .call(responsivefy); function drawMap(world) { - const projection = d3.geoMercator().fitWidth(mapWidth,world) + const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world) const path = d3.geoPath().projection(projection); const states = svg.selectAll("g") -- 2.30.2 From 81fe778212f34768ed72f82ff96e7cf9111ea6ed Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Fri, 11 Apr 2025 10:12:57 -0400 Subject: [PATCH 4/6] 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() -- 2.30.2 From 977cd1aa62a885649a6349f7eaa0887dbd0aad3d Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Fri, 11 Apr 2025 10:17:56 -0400 Subject: [PATCH 5/6] Add parentheses around arithmetic operation --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 07581e6..ec3bc7a 100644 --- a/index.js +++ b/index.js @@ -215,7 +215,7 @@ function stateOrDistrictOrLanguage(d) { // 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 * 0.7; +const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top) * 0.92; const svg = d3.select("#svgContainer") .append('svg') -- 2.30.2 From 6aedbbc9429ed4ee0d778885a10156c58931770a Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Sat, 12 Apr 2025 11:55:40 -0400 Subject: [PATCH 6/6] Styling changes mostly done --- index.html | 19 ++++++++++++++----- index.js | 2 +- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4dd128c..873b970 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,6 @@ visibility: hidden; opacity: 0; transition: opacity 1s, visibility 2s; - border: 2px solid; } svg.show { @@ -58,7 +57,7 @@ .translationText, .romanizationText { visibility: hidden; font-family: "Noto Sans"; - font-size:1.25em; + font-size:1.2em; } .romanizationText { @@ -68,7 +67,7 @@ .languageText { pointer-events: none; font-weight: bold; - font-size: 1.15em; + font-size: 1em; font-family: sans-serif; visibility: hidden; } @@ -181,9 +180,19 @@ } @media only screen and (max-width: 768px) { main { - flex-direction: column; - align-items: stretch; + flex-direction: column; + align-items: stretch; } + .district { + stroke-width: 0.1; + } + .translationText, .romanizationText { + font-size: 0.7em; + } + .languageText { + font-size: 0.6em; + } + } diff --git a/index.js b/index.js index ec3bc7a..15f7af4 100644 --- a/index.js +++ b/index.js @@ -215,7 +215,7 @@ function stateOrDistrictOrLanguage(d) { // 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) * 0.92; +const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top); const svg = d3.select("#svgContainer") .append('svg') -- 2.30.2