diff --git a/public/determinant_uncertainty.json b/public/determinant_uncertainty.json index a0ac2fcd26fb1f8f68e6cfaf1985cd21f486f968..1e48d207baa39e9de5a00ef005e58bc432dde142 100644 --- a/public/determinant_uncertainty.json +++ b/public/determinant_uncertainty.json @@ -256,7 +256,7 @@ { "dimension": "Exposure", "determinant": "Other physical considerations", - "determinant_wrapped": "Other hysical factors", + "determinant_wrapped": "Other physical factors", "pos_related_total": 24, "neg_related_total": 11, "unrelated_total": 0, diff --git a/src/assets/text/text_es.js b/src/assets/text/text_es.js index 7add7d9f335f0a7d8130040c15bb45f8490da2d1..f1cc8c74bc20baa35d4350ab93926417be1a9764 100644 --- a/src/assets/text/text_es.js +++ b/src/assets/text/text_es.js @@ -43,12 +43,12 @@ export default { paragraph1: "El equipo de Impulsores Sociales y Económicos del USGS está formado por cientÃficos sociales, geógrafos e hidrólogos que realizan estudios interdisciplinarios para comprender las interacciones e interdependencias de los sistemas humanos y naturales con respecto a los sectores de uso del recurso hÃdrico. El propósito de este proyecto es predecir y medir los riesgos sociales que impiden el acceso seguro al agua potable para evaluar y tratar mejor los riesgos para una gestión del agua adaptativa." }, chartText: { - bubbleText: "Interactúe con el gráfico para ver diferentes muestras<br>de los factores determinantes de riesgo social.", - bubbleLegend: `Se han estudiado muchos factores determinantes de riesgo social. Algunos muestran relaciones positivas <span class="legend-box positive"></span> con la carencia de agua, otros negativas <span class="legend-box negative"></span>, y otros desconocidas <span class="legend-box unknown"></span> <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines et al, 2023</a>; <a href='https://doi.org/10.1029/2023WR036284' target='_blank'>Drakes et al, 2024)</a>`, - bubbleYaxis: `El eje Y del gráfico representa el nivel de acuerdo entre los estudios, donde el aumento del <b>consenso</b> indica que la mayorÃa de los estudios que utilizaron el factor determinante seleccionado indicaron el mismo tipo de influencia en las condiciones de carencia de agua y <b>no concluyentes</b> indica que los estudios que utilizaron el factor determinante seleccionado no indicaron un mismo tipo de influencia en las condiciones de carencia de agua. El tamaño de las burbujas en el gráfico representa el número de estudios, y las burbujas más grandes indican que un factor determinante particular se ha estudiado con más frecuencia.`, + bubbleText: "Interactúe con el gráfico para ver diferentes muestras de los factores determinantes de vulnerabilidad social.", + bubbleLegend: `Se han estudiado muchos factores determinantes de vulnerabilidad social. Algunos muestran relaciones positivas <span class="legend-box positive"></span> con la inseguridad hÃdrica, otros negativas <span class="legend-box negative"></span> y otros desconocidas <span class="legend-box unknown"></span> <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines et al, 2023</a>; <a href='https://doi.org/10.1029/2023WR036284' target='_blank'>Drakes et al, 2024)</a>`, + bubbleYaxis: `El eje Y del gráfico representa el nivel de acuerdo entre los estudios, donde el aumento del <b>consenso</b> indica que la mayorÃa de los estudios que utilizaron el factor determinante seleccionado indicaron el mismo tipo de influencia en las condiciones de inseguridad hÃdrica. <b>No concluyentes</b> indica que los estudios que utilizaron el factor determinante seleccionado no indicaron un mismo tipo de influencia en las condiciones de inseguridad hÃdrica. El tamaño de las burbujas en el gráfico representa el número de estudios, y las burbujas más grandes indican que un factor determinante particular se ha estudiado con más frecuencia.`, bubbleYlabelMax: `Consenso`, bubbleYlabelMin: `No concluyentes`, - bubbleCheckbox: `Todo el mundo necesita acceso a agua potable. Para aquellos con acceso limitado a este recurso, <span class="tooltip-group"><span class="tooltip-span"> carencia de agua potable </span><span id="water-insecurity-tooltip" class="tooltiptext">La población no puede mantener el acceso a cantidades adecuadas de agua de una calidad aceptable para mantener la subsistencia, el desarrollo y la salud humana y de los ecosistemas.</span></span> puede tener un gran impacto en su vida cotidiana. El grado en que las personas experimentan la carencia de agua potable varÃa según `, + bubbleCheckbox: `Todos necesitamos acceso al agua potable. Para aquellos con acceso limitado a este recurso, <span class="tooltip-group"><span class="tooltip-span">la inseguridad hÃdrica </span><span id="water-insecurity-tooltip" class="tooltiptext">La población no puede mantener el acceso a cantidades adecuadas de agua de una calidad aceptable para mantener la subsistencia, el desarrollo y la salud humana y de los ecosistemas.</span></span> puede tener un gran impacto en su vida cotidiana. El grado en que las personas experimentan la inseguridad hÃdrica varÃa según `, bubbleLabels: { "Demographiccharacteristics": "las caracterÃsticas demográficas", "Health": "la salud", @@ -58,7 +58,7 @@ export default { "Landtenure": "la tenencia de la tierra", "Exposure": "la exposición a fuentes de estrés" }, - bubbleCheckboxEnd :` (como la sequÃa o la contaminación). A continuación, hay un gráfico que muestra cómo ciertos factores determinantes de riesgo social se relacionan con la falta de agua.`, + bubbleCheckboxEnd :` (como la sequÃa o la contaminación). A continuación, hay un gráfico que muestra cómo ciertos factores determinantes de vulnerabilidad social se relacionan con la inseguridad hÃdrica.`, appeared: "apareció en", singleStudy: `estudio`, multipleStudies: `estudios`, diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue index f6755469d9a65640793bee066094b5bfe764b84c..db659a12d884324d8628eef7bef5af4fdda1d7cf 100644 --- a/src/components/BeeswarmChart.vue +++ b/src/components/BeeswarmChart.vue @@ -65,7 +65,7 @@ <script setup> -import { ref, computed, onMounted } from "vue"; +import { ref, computed, onMounted, watch } from "vue"; import * as d3 from 'd3'; import { useI18n } from 'vue-i18n'; @@ -82,6 +82,24 @@ let svg; const height = 600; const margin = { top: 40, right: 20, bottom: 40, left: 40 }; +// Watch for changes in the locale and update the chart labels when the language is toggled +watch(locale, () => { + updateYAxisLabels(); +}); + +// Function to update Y-axis labels when language changes +function updateYAxisLabels() { + if (svg) { + // Update y-axis max label + svg.select('.yLabelMax') + .text(bubbleYlabelMax.value); + + // Update y-axis min label + svg.select('.yLabelMin') + .text(bubbleYlabelMin.value); + } +} + const isChecked = ref({ Demographiccharacteristics: true, Health: true, @@ -255,14 +273,14 @@ function createBeeswarmChart() { // Add label to y axis svg.append('text') - .attr("class", "yLabel") + .attr("class", "yLabel yLabelMax") .attr("text-anchor", "left") .attr("font-weight", 700) .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text(bubbleYlabelMax.value); svg.append('text') - .attr("class", "yLabel") + .attr("class", "yLabel yLabelMin") .attr("text-anchor", "left") .attr("font-weight", 700) .attr("transform", `translate(${margin.left}, ${containerHeight - (margin.bottom / 2) + 10})`)