diff --git a/Js/script.js b/Js/script.js
index fe4a11fe61d724e199e76651bdb0926ca1d7e15d..e8dcfa540680a56fb9fe78d916bdf5ee5f03627f 100644
--- a/Js/script.js
+++ b/Js/script.js
@@ -178,7 +178,8 @@ function dibujaMapa(seleccionAnno) {
.selectAll("text")
.attr("transform", "translate(30, 0)") // Desplazar los valores de la leyenda a la derecha
.style("text-anchor", "start"); // Alinear los valores de la leyenda a la derecha;
-
+
+
for (let i = Math.log(min); i <= Math.log(max); i += 0.1) {
legend.append("rect")
.attr("x", 0)
@@ -187,6 +188,13 @@ function dibujaMapa(seleccionAnno) {
.attr("height", legendScale(Math.exp(i + 0.1)) - legendScale(Math.exp(i)))
.style("fill", legendBar(i));
}
+ legend.append("text")
+ .raise()
+ .attr("x", 0)
+ .attr("y", -10 + legendScale(Math.exp(i + 0.1)) - legendScale(Math.exp(i)))
+ .style("font-size", "12px")
+ .style("font-weight", "bold")
+ .text("PIB");
});
}
diff --git a/css/estilo.css b/css/estilo.css
index 5cc12e127f7daec36d1b9fb8e8213e3821885f7a..670324e81a3920c6cb2b7e325801069a9e837632 100644
--- a/css/estilo.css
+++ b/css/estilo.css
@@ -1,11 +1,19 @@
-/* General */
+
body {
margin: 0;
height: 100vh; /* Asegura que el cuerpo ocupe toda la altura */
display: flex;
flex-direction: column; /* Disposición vertical */
}
+#titulo{
+ background-color: rgb(207, 207, 207);
+ font-weight: bold;
+ padding-top: 5px;
+ font-family: Arial, sans-serif;
+ text-align: center;
+ font-size: large;
+}
/* Contenedor del mapa */
#map {
flex: 2; /* Ocupa el doble de espacio que #abajo */
@@ -37,4 +45,5 @@ body {
font-weight: bold;
fill: #000000;
pointer-events: none;
+ font-family: Arial, sans-serif;
}
diff --git a/index.html b/index.html
index fad25fb9fd02b6de53f26f03ccce1b31836f7784..15cb179be1caa662583e7fa57902da62fd84937b 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,9 @@
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
+ <div id="titulo">
+ Distribución del PIB mundial en cientos de millones de dólares
+ </div>
<div id="map">
<!-- Add a container for the year selector -->
<div id="yearSelectorContainer">