diff --git a/Js/script.js b/Js/script.js index ff2c52fc06d41585945b84c1c034fe0e90ce2fad..0235ab56081b26fce3eefd8e82bebcd49141d0e7 100644 --- a/Js/script.js +++ b/Js/script.js @@ -299,12 +299,6 @@ function dibujaGrafico(country,paises){ .attr("class", "y axis") .call(d3.axisLeft(yScale)); - svg.append("text") - .style("font-size", "15px") - .attr("text-anchor", "middle") - .attr("transform", `translate(${-margin.left +35},${height / 2 -60})`) - .text("Valor PIB"); - // TÃtulo svg.append("text") .attr("x", width / 2) @@ -313,6 +307,6 @@ function dibujaGrafico(country,paises){ .style("font-size", "18px") .style("font-weight", "bold") .style("font-family","Arial") - .text(`Evolución de los datos para ${country}`); + .text(`Evolución del PIB para ${country}`); } diff --git a/css/estilo.css b/css/estilo.css index db1122ae5bf64c3817907a00b4b8ae18d0ab64a1..35757cdbd8cbb06473dbbc943b37c7741e2c2ef5 100644 --- a/css/estilo.css +++ b/css/estilo.css @@ -21,6 +21,7 @@ body { width: 100%; /* Asegura que ocupe el ancho completo */ height: 70%; /* Asegura que el mapa ocupe el 70% de la pantalla */ background-color: rgb(207, 207, 207); + position: relative; } #yearSelectorContainer { position: absolute; @@ -33,14 +34,13 @@ body { font-family: Arial, sans-serif; z-index: 1000; /* Ensures it stays above the map */ } -#footerText { - position: absolute; - top: 400px; /* Adjust for desired distance from the top */ - left: 20px; /* Position it on the right side */ - padding: 10px; +#textoFuente { + position: absolute; + bottom: 0; + left: 0; font-family: Arial, sans-serif; font-size: small; - z-index: 1000; /* Ensures it stays above the map */ + margin: 5px; /* Ajusta el margen según sea necesario */ } /* Contenedor inferior */ #grafico { diff --git a/index.html b/index.html index acad3efd3df265cc255c25f6347e337d15652134..8b5d09f74619b746afc5a18d5fcada1edc14736c 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ </div> <div id="map"> <div id="yearSelectorContainer"></div> - <div id="footerText">Texto en la parte inferior izquierda</div> + <p id="textoFuente"> Fuente: <a href="https://www.kaggle.com/datasets/zgrcemta/world-gdpgdp-gdp-per-capita-and-annual-growths">World GDP</a> </p> </div> <div id="grafico"></div> <script src="./Js/script.js"></script>