Titulos actualizados y fuente arreglada

1ce01909 · frajuar · 62845f56 · 1ce01909 · 1ce01909 · 1ce01909
Commit 1ce01909 authored 4 months ago by frajuar
--- 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");
    });

 }

--- a/css/estilo.css
+++ b/css/estilo.css
-/* 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;
 }
--- 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">