From 9d8d91d9f0d856c2e0099d7b6b1ccc70cf4e7195 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 21 Jul 2024 16:23:38 -0500
Subject: [PATCH] adjust x spacing to shift everything to the left

---
 src/assets/text/text.js                  | 2 +-
 src/components/InteractiveDendrogram.vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 108cf0e..39948d7 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -33,7 +33,7 @@ export default {
       paragraph3: `But these factors are not equally distributed across the Western United States. For example, certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use.`
     },
     socialVulnerabilityText: {
-      title: "Where do we go from here",
+      title: "Where do we go from here?",
       paragraph1: "A crucial and largely unexplored area of research is the <span class='tooltip'><span class='tooltip-span'>intersectionality</span><span class='tooltiptext'>The complex, cumulative way in which the effects of multiple forms of discrimination combine, overlap, or intersect especially in the experiences of marginalized individuals or groups.</span></span> of social vulnerability factors. The factors evaluated by the researchers at USGS represent individual drivers of water insecurity, like household size or ethnicity. What about the people who experience multiple risk factors at the same time?",
       paragraph2: `For example, “Elderly people who have lower incomes are a unique population, existing at the overlap of, but distinct from, the elderly or lower income alone,” says Oronde Drakes, social geographer at USGS and lead author of the <span class="tooltip"><span class="tooltip-span">meta-analysis</span><span class="tooltiptext meta-analysis">Type of review study where researchers combine data from many different studies to try to identify bigger patterns across all the results.</span></span>. “The interaction of those social characteristics may well have different and significant impacts on water security than would be found exploring those social factors on their own.”`,
       paragraph3: "In this burgeoning field of social vulnerability to water insecurity, we have a lot left to learn. Once we better understand not only where water insecurity is happening, but who is most vulnerable and why, we will be better equipped to address <span class='tooltip'><span class='tooltip-span'>environmental justice</span><span class='tooltiptext'>Scientific planning, activities, and information intended to support equitable access and use by all people who may be affected.</span></span> and equity issues in water resources."
diff --git a/src/components/InteractiveDendrogram.vue b/src/components/InteractiveDendrogram.vue
index e007735..8e80d1e 100644
--- a/src/components/InteractiveDendrogram.vue
+++ b/src/components/InteractiveDendrogram.vue
@@ -131,10 +131,11 @@ function transformData() {
 
 function createDendrogram(result) {
   const width = 1000;
+  const height = 800; // Adjust height if necessary
   const marginTop = 40;
   const marginRight = 100;
   const marginBottom = 40;
-  const marginLeft = width / 7;
+  const marginLeft = 0; // Set marginLeft to 0
 
   const root = d3.hierarchy(result);
   const dx = 10; // Further decreased vertical spacing
@@ -159,7 +160,8 @@ function createDendrogram(result) {
   const svg = d3.select('#dendrogram-container')
     .append('svg')
     .attr('width', width)
-    .attr('viewBox', [-marginLeft, -marginTop, width, dx * (root.height + 1)])
+    .attr('height', height) // Add height
+    .attr('viewBox', [0, -marginTop, width, height]) // Adjust viewBox
     .style('max-width', '100%')
     .style('height', 'auto')
     .style('font-size', textSize)
@@ -228,7 +230,7 @@ function createDendrogram(result) {
     const transition = svg.transition()
       .duration(duration)
       .attr('height', height)
-      .attr('viewBox', [-marginLeft, left.x - marginTop, width, height])
+      .attr('viewBox', [0, left.x - marginTop, width, height]) // Adjust viewBox
       .tween('resize', window.ResizeObserver ? null : () => () => svg.dispatch('toggle'));
 
     const node = gNode.selectAll('g')
-- 
GitLab