<![CDATA[ Ignacio Collantes - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Ignacio Collantes - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ Eleventy Sat, 06 Jun 2026 19:41:48 +0000 60 <![CDATA[ Cómo construir un menú acordeón con HTML, CSS y JavaScript ]]> https://www.freecodecamp.org/espanol/news/como-construir-un-menu-acordeon-con-html-css-y-javascript/ 61d63069148c1c09723465a1 Mon, 28 Feb 2022 03:23:29 +0000 Artículo original escrito por: Kingsley Ubah
Artículo original: How to Build an Accordion Menu Using HTML, CSS and JavaScript
Traducido y adaptado por: Ignacio Collantes

Puedes utilizar HTML, CSS y JavaScript para crear elementos web elegantes y dinámicos. Y un elemento útil que puedes construir es un menú acordeón.

Los menús en acordeón se expanden y contraen cuando el usuario hace clic en un botón. Es una gran manera de no tener que mostrar toda la información sobre un tema al principio, y en su lugar dar a los usuarios la opción de mostrar solo lo que necesitan.

En este tutorial, les mostraré cómo construir un menú acordeón simple que se parece a esto:

Peek-2022-02-26-14-27-1

¿Qué es un menú acordeón?

En el diseño de la interfaz de usuario, un menú acordeón es una lista apilada verticalmente de varias piezas de información. Para cada lista, hay una cabecera etiquetada que apunta al contenido correspondiente. El contenido de cada lista está oculto por defecto. Al hacer clic en una etiqueta concreta, se despliega su contenido.

Un caso de uso muy común para los acordeones es el de contener una lista de preguntas frecuentes. Al hacer clic en una pregunta, se mostrará la respuesta correspondiente.

Cómo construir un menú acordeón usando HTML, CSS y JS

Comenzaremos por definir el marcado HTML. Si estás usando un IDE como VS Code y tienes emmet instalado, crea un nuevo archivo index.html y escribe ! seguido de enter. Esto debería crear el código HTML para tu proyecto.

Alternativamente, puedes copiar el siguiente código en tu index.html, u obtener el código para este proyecto desde Codepen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documento</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <script src="app.js" type="text/javascript"></script>
</body>
</html>
Estructura de la página HTML

La estructura de la carpeta es sencilla. Crearemos una carpeta llamada acordeón. Dentro de la carpeta crearemos tres archivos: index.html, styles.css, y app.js. También enlazaremos todos los archivos en nuestro marcado HTML como puedes ver arriba.

Marcado HTML para el Acordeón

Para cada lista del menú, tendremos dos div: uno para la etiqueta y otro para el contenido.

<body>
  <div class="acordeon-cuerpo">
  <div class="acordeon">
    <h1>Preguntas Frecuentes</h1>
    <hr>
    <div class="contenedor">
      <div class="label">¿Qué es HTML?</div>
      <div class="content">El lenguaje de marcas de hipertexto (HTML) es un lenguaje informático que compone la mayoría de las páginas web y aplicaciones en línea. Un hipertexto es un texto que se utiliza para hacer referencia a otros fragmentos de texto, mientras que un lenguaje de marcas es una serie de marcas que indican a los servidores web el estilo y la estructura de un documento. El lenguaje HTML es muy sencillo de aprender y utilizar.</div>
    </div>
    <hr>
    <div class="contenedor">
      <div class="label">¿Qué es CSS?</div>
      <div class="content">CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada). Es el lenguaje para describir la presentación de las páginas web, incluyendo los colores, el diseño y las fuentes, haciendo así que nuestras páginas web sean presentables para los usuarios. CSS está diseñado para hacer hojas de estilo para la web. Es independiente de HTML y puede utilizarse con cualquier lenguaje de marcado basado en XML. El CSS es popularmente llamado el lenguaje de diseño de la web.
</div>
    </div>
    <hr>
    <div class="contenedor">
      <div class="label">¿Qué es JavaScript?</div>
      <div class="content">JavaScript es un lenguaje de programación que permite implementar funciones complejas en las páginas web. Cada vez que una página web hace algo más que limitarse a mostrar información estática para que la veas, mostrando actualizaciones puntuales de contenido, mapas interactivos, gráficos 2D/3D animados, videocámaras con desplazamiento, etc., puedes apostar que JavaScript está probablemente involucrado. Es el tercero del trío web.
</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">¿Qué es React?</div>
      <div class="content">React es una biblioteca de JavaScript creada para construir interfaces de usuario rápidas e interactivas para aplicaciones web y móviles. Es una biblioteca de código abierto, basada en componentes, responsable únicamente de la capa de vista de la aplicación. En la arquitectura Modelo-Vista-Controlador (MVC), la capa de vista es responsable del aspecto y la sensación de la aplicación. React fue creado por Jordan Walke, un ingeniero de software de Facebook. </div>
    </div>
    <hr>
    <div class="container">
      <div class="etiqueta">¿Qué es PHP?</div>
      <div class="contenido">PHP es un lenguaje de scripting del lado del servidor y de propósito general que es especialmente adecuado para el desarrollo web. Originalmente, PHP significaba "Personal Home Page". Sin embargo, ahora significa Hypertext Preprocessor. Es un acrónimo recursivo porque la primera palabra también es un acrónimo.</div>
    </div>
    <hr>
    <div class="contenedor">
      <div class="etiqueta">¿Qué es Node JS?</div>
      <div class="contenido">Node.js es un entorno de ejecución de JavaScript de código abierto y multiplataforma que se ejecuta en el motor V8 y ejecuta código JavaScript fuera de un navegador web. Node.js permite a los desarrolladores utilizar JavaScript para escribir herramientas de línea de comandos y para la ejecución de scripts del lado del servidor para producir contenidos dinámicos de páginas web antes de que la página se envíe al navegador web del usuario. Por lo tanto, Node.js representa un paradigma de "JavaScript en todas partes".</div>
    </div>
    <hr>
  </div>
  </div>

  <script src="app.js" type="text/javascript"></script>
</body>
Markup for Accordion Menu

Sin CSS, nuestra página se verá toda desnuda, así:

image-33
Cómo se ve el menú acordeón sin CSS

Cómo estilizar el acordeón con CSS

Queremos que nuestro menú acordeón se vea bien, por supuesto. Es hora de poner en juego algo de CSS. He añadido algunos comentarios en el código para explicar lo que hace cada pieza:

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');

/* Establece el color de fondo del cuerpo en azul. Establece el tipo de letra a Rubik */

body {
  background-color: #0A2344;
  font-family: 'rubik', sans-serif;
}

/* Alinea el texto del encabezado al centro. */
 
h1 {
  text-align: center;
}

/* Establece el ancho del acordeón. Establece el margen a 90px en la parte superior e inferior y auto a la izquierda y derecha */

.acordeon {
  width: 800px;
  margin: 90px auto;
  color: black;
  background-color: white;
  padding: 45px 45px;
}

Con todos estos estilos aplicados, este es el aspecto que tendrá ahora nuestro acordeón:

image-34
Estilos añadidos al menú acordeón

Ahora tenemos que empezar a trabajar en el interior para configurar su funcionalidad. En primer lugar, establecemos la propiedad position de cada uno de los contenedores (que contienen tanto la etiqueta como el contenido) como relativa.

Esto significa que ahora podemos posicionar sus hijos en relación con él.

.acordeon .contenedor {
  position: relative;
  margin: 10px 10px;
}

/* Posiciona las etiquetas en relación con el contenedor. Añade relleno en la parte superior e inferior y aumenta el tamaño de la fuente. También hace que su cursor sea un puntero */

.acordeon .etiqueta {
  position: relative;
  padding: 10px 0;
  font-size: 30px;
  color: black;
  cursor: pointer;
}

Ahora puedes notar la diferencia en la imagen de abajo:

image-35

La siguiente acción será añadir un pequeño signo "+" al final de cada lista. Esto permitirá a los usuarios saber que pueden ampliar la sección para aprender/ver más.

Para ello, utilizaremos el selector ::before. El selector ::before y ::after se utiliza para colocar el contenido antes o después de un elemento especificado.

Aquí, estamos insertando '+' antes de la etiqueta. Pero utilizaremos las propiedades de desplazamiento top y right para colocarlo en la esquina derecha.


/* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */

.acordeon .etiqueta::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);
}

/* Oculta el contenido (altura: 0), disminuye el tamaño de la fuente, justifica el texto y añade la transición */

.acordeon .contenido {
  position: relative;
  background: white;
  height: 0;
  font-size: 20px;
  text-align: justify;
  width: 780px;
  overflow: hidden;
  transition: 0.5s;
}

/* Añade una línea horizontal entre los contenidos */

.acordeon hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}

Esto hará que todo sea mejor. También observa que el contenido de cada lista está ahora oculto.

image-36
El contenido del menú acordeón está ahora oculto

Añadir JavaScript a nuestro Acordeón

En este punto, nuestro acordeón es bastante estático. Para hacer que el contenedor muestre el contenido cuando el usuario haga clic en él, necesitaremos introducir algo de JavaScript.

Navegue a su script app.js y escriba el siguiente código:

const acordeon = document.getElementsByClassName('contenedor');

for (i=0; i<acordeon.length; i++) {
  acordeon[i].addEventListener('click', function () {
    this.classList.toggle('activa')
  })
}

Este script accederá a todas nuestras listas por classname del contenedor.

Luego haremos un bucle a través de la lista. Para cada contenedor, simplemente queremos registrar un oyente de eventos en él. Cuando se hace clic, queremos cambiar la clase "activa" en ese elemento.

Ahora vamos a probar este efecto. Haz clic en el primer contenedor con la etiqueta ¿Que es HTML?, abre tus Herramientas de Desarrollador (haz clic en F12), e inspecciónalo dentro de la pestaña de elementos.

Deberías encontrar la clase activa registrada en él:

image-39

Si se vuelve a hacer clic en el elemento, se eliminará la clase activa del mismo.

Cómo finalizar la aplicación

Hay una última cosa que necesitamos hacer. Necesitamos crear una clase activa dentro de una hoja de estilos. Definiremos cómo queremos que se vea nuestro acordeón una vez que JavaScript active la clase en un contenedor.


/* Muestra la parte de contenido cuando está activa. Establece la altura */

.acordeon .contenedor.activa .contenido {
  height: 150px;
}

/* Cambia de signo positivo a negativo una vez activado */

.acordeon .contenedor.activa .etiqueta::before {
  content: '-';
  font-size: 30px;
}

Así es como se ve y se comporta nuestra aplicación al final:

Peek-2022-02-26-14-27
Aspecto final

Conclusión

Así que en este tutorial, construimos un menú acordeón usando HTML, CSS y JavaScript.

Gracias por seguirnos. Espero que hayas aprendido algo útil de este tutorial.

Que tengas una buena semana.

]]> <![CDATA[ Tutorial de JavaScript Array.find(): Cómo iterar a través de los elementos de un arreglo ]]> https://www.freecodecamp.org/espanol/news/tutorial-de-javascript-array-find-como-recorrer-los-elementos-de-una-matriz/ 618f073431882c095864deeb Mon, 10 Jan 2022 12:00:00 +0000 Artículo original escrito por: Kingsley Ubah
Artículo original: JavaScript Array.find() Tutorial – How to Iterate Through Elements in an Array
Traducido y adaptado por: Luis Ignacio Cabezas

Cuando trabajas con una colección de arreglos, a veces sólo necesitas saber si un elemento existe en el arreglo para poder extraerlo. Y no te importará saber cuántos otros elementos (si es que hay alguno) existen dentro del mismo arreglo.

Pues bien, podemos utilizar el método find() para hacer precisamente eso.

Cómo funciona el método Array.find()

El método find() es un método de Array.prototype (también conocido como incorporado) que toma una función de callback y llama a esa función para cada elemento que recorre dentro del arreglo al que está vinculado.

Cuando encuentra una coincidencia (en otras palabras, la función callback devuelve true), el método devuelve ese elemento particular del arreglo e inmediatamente rompe el bucle. Así que el método find() devuelve el primer elemento dentro de un arreglo que satisface la función callback.

La función callback puede tomar los siguientes parámetros:

  • currentItem: Es el elemento del arreglo sobre el que se está iterando actualmente.
  • index: Esta es la posición de índice de currentItem dentro del arreglo.
  • array: Representa el arreglo de destino junto con todos sus elementos.

Cómo utilizar el método find() en JavaScript

En los siguientes ejemplos, demostraré cómo se puede utilizar el método find() para recuperar el primer elemento de una matriz que coincida con una condición especifica en JavaScript.

Cómo obtener un solo elemento con find()

Supongamos que tienes un perro que se ha perdido. Lo denuncias a las autoridades competentes y estas reúnen a un grupo de perros recuperados.

Para poder encontrar a tu perro, necesitas proporcionar información única sobre él. Por ejemplo, la raza de su perro (un chihuahua) puede servir para identificarlo.

Podemos expresar este escenario en JavaScript utilizando una colección de arreglos. El arreglo llamado perrosEncontrados contendrá todos los nombres de los perros recuperados, así como sus respectivas razas. Y utilizaremos el método find() para encontrar el perro que es un chihuahua desde dentro del arreglo.

let perrosEncontrados = [{
    breed: "Beagle",
    color: "blanco"
  },

  {
    raza: "Chihuahua",
    color: "amarillo"
  },

  {
    breed: "Pug",
    color: "negro"
  },
]

function encuentraMiPerro(perro) {
  return perro.raza === "Chihuahua"
}

let miPerro = perrosEncontrados.find(perro => encuentraMiPerro(perro));

console.log(miPerro);


/*

{
  raza: "Chihuahua",
  color: "amarillo"
}

*/

El método find() deja de iterar cuando se encuentra una coincidencia.

Hay algo muy importante que hay que recordar sobre find(): deja de ejecutarse una vez que la función callback devuelve una declaración como true.

Para ilustrar esto, utilizaremos de nuevo el ejemplo del perro perdido. Esta vez, supondremos que se han encontrado dos chihuahuas.

Pero el método find() sólo devolverá la primera instancia de Chihuahua que descubra dentro del arreglo. Cualquier otra instancia será ignorada posteriormente.

También podemos ver esto fácilmente registrando la posición del índice de ese elemento en la consola:

let perrosEncontrados = [{
    raza: "Beagle",
    color: "blanco"
  },

  {
    raza: "Chihuahua",
    color: "amarillo"
  },

  {
    raza: "Pug",
    color: "negro"
  },
  
  {
    raza: "Chihuahua",
    color: "amarillo"
  }
]


function encuentraMiPerro(perro, indice) {
  if (perro.raza === "Chihuahua") console.log(indice);
  return perro.raza === "Chihuahua"
}


let miPerro = encuentraPerros.find((perro, indice) => encuentraMiPerro(perro, indice));


console.log(miPerro);

/* 
1

{
  raza: "Chihuahua",
  color: "amarillo"
}

*/
Returns the first instance which has an index of 1
findreturns1

Cómo utilizar una asignación de desestructuración

Puede hacer que su código sea más conciso combinando la asignación de desestructuración y una expresión de función de flecha.

Utilizaremos la desestructuración para extraer sólo la propiedad nombré del objeto que luego pasaremos como parámetro a la función callback.

Obtendremos el mismo resultado:

let perrosEncontrados = [
  {
    raza: "Beagle",
    color: "blanco"
  },

  {
    raza: "Chihuahua",
    color: "amarillo"
  },

  {
    raza: "Pug",
    color: "negro"
  },
]

 


let miPerro = perrosEncontrados.find(({raza}) => raza === "Chihuahua");

console.log(miPerro);

/*

{
  raza: "Chihuahua",
  color: "amarillo"
}

*/

Cómo encontrar un elemento por su índice

En este ejemplo, encontraremos y devolveremos el punto perteneciente a 'David' desde dentro del arreglo utilizando su valor de índice único. Esto demuestra una de las formas en que podemos utilizar la propiedad index dentro de nuestra función callback con el método find():

let posicionesReservadas = [{
    nombre: "Ana",
    edad: 24
  },

  {
    nombre: "Beth",
    edad: 22
  },

  {
    nombre: "Cara",
    edad: 25
  },
  
  {
    nombre: "David",
    edad: 30
  },
  
  {
    nombre: "Ethan",
    edad: 26
  }
]


function encontrarPorIndice(persona, indice) {
  return indice === 3
}


let miPosicion = posicionesReservadas.find((persona, indice) => encontrarPorIndice(persona, indice));

console.log(miPosicion);

/*
{
  edad: 30,
  nombre: "David"
}
*/

Puede utilizar el objeto de contexto con find()

Además de la función callback, el método find() también puede tomar un objeto de contexto.

find(callback, objetoContexto)

Podemos entonces referirnos a este objeto desde dentro de la función callback en cada iteración, utilizando la palabra clave this como referencia. Esto nos permite acceder a cualquier propiedad o método definido dentro del objeto de contexto.

Cómo utilizar el objeto de contexto con find()

Digamos que tenemos una matriz de solicitudes de empleo y queremos seleccionar sólo el primer solicitante que cumpla todos los criterios.

Todos los criterios se definen dentro de un objeto de contexto llamado criterios y ese objeto se pasa posteriormente como segundo parámetro al método find(). Luego, desde la función callback, accedemos al objeto para comprobar si un candidato cumple con todos los criterios allí especificados.

let candidatos = [
    {nombre: "aaron", añosDeExperiencia: 18, edad: 66},
    {nombre: "beth", añosDeExperiencia:  0, edad: 18},
    {nombre: "cara", añosDeExperiencia: 4, edad: 22},
    {nombre: "daniel", añosDeExperiencia: 3, edad: 16},
    {nombre: "ella", añosDeExperiencia: 5, edad: 25},
    {nombre: "fin", añosDeExperiencia: 0, edad: 16},
    {nombre: "george", añosDeExperiencia: 6, edad: 28},
]

let criterios = {
  experienciaMinima: 3,
  edadMinima: 18,
  edadMaxima: 65
}

   
let candidatoSuertudo = candidatos.find(function(candidato) {
	return candidato.añosDeExperiencia >= this.experienciaMinima && candidato.edad <= this.edadMaxima && candidato.edad >= this.edadMinima ;
}, criterios)

console.log(candidatoSuertudo);

/*
{
  edad: 22,
  nombre: "cara",
  añosDeExperiencia: 4
}
*/

Técnicamente, los tres candidatos (Cara, Ella y George) cumplen los criterios. Es decir, los tres tienen al menos 18 años, no son mayores de 65 y tienen al menos 3 años de experiencia laboral.

Sin embargo, como el método find() siempre devuelve SOLO la primera instancia que se evalúa como verdadera, las otras dos serán ignoradas y el bucle se romperá.

En conclusión

El método find() es un método de Array.prototype que toma una función de callback y llama a esa función para cada elemento dentro del arreglo delimitado.

Cuando la función callback se evalúa como true, el método devuelve el elemento actual y rompe el bucle. Devuelve sólo la primera coincidencia - cualquier otra coincidencia presente dentro de la matriz será ignorada.

En adición de la función callback, el método find() también puede tomar un objeto de contexto como segundo argumento. Esto te permitirá acceder a cualquiera de sus propiedades desde la función callback usando this.

Espero que este artículo te haya sido utilidad.

Si quieres aprender más sobre Desarrollo Web, no dudes en visitar mi blog.

Gracias por leer y hasta pronto.

]]> <![CDATA[ Operadores Rest y Spread de JavaScript: ¿Cuál es la diferencia? ]]> https://www.freecodecamp.org/espanol/news/operadores-rest-spread-de-javascript-cual-es-la-diferencia/ 616d5bb85658740999352c05 Wed, 10 Nov 2021 12:00:00 +0000 Artículo original escrito por Oluwatobi Sofela
Artículo original JavaScript Rest vs Spread Operator – What’s the Difference?
Traducido y adaptado por Luis Ignacio Cabezas

JavaScript usa tres puntos (...) para ambos operadores, rest y spread. Pero estos dos operadores no son iguales.

La principal diferencia entre rest y spread es que el operador rest organiza el resto de algunos valores específicos suministrados por el usuario en un arreglo de JavaScript. Por otro lado la sintaxis spread expande los iterables en elementos individuales.

Por ejemplo, considere este código que utiliza rest para encerrar algunos valores en un arreglo:

// Usa rest para encerrar el resto de valores específicos proporcionados por el usuario en un arreglo:
function miBio(primerNombre, apellido, ...otraInfo) { 
  return otraInfo;
}

// Invoca la función miBio pasando cinco argumentos a sus parámetros:
miBio("Oluwatobi", "Sofela", "CodeSweetly", "Desarrollo Web", "Hombre");

// La invocación anterior devolverá:
["CodeSweetly", "Desarrollo Web", "Hombre"]

En el fragmento anterior, utilizamos el parámetro rest ...otraInfo para colocar "CodeSweetly", "Desarrollo Web", y "Hombre" en un arreglo.

Ahora, considere este ejemplo de un operador spread:

// Define una función con tres parámetros:
function miBio(primerNombre, apellido, empresa) { 
  return `${primerNombre} ${apellido} dirije ${empresa}`;
}

// Utiliza spread para expandir los elementos de un arreglo en argumentos individuales:
miBio(...["Oluwatobi", "Sofela", "CodeSweetly"]);

// La invocación anterior devolverá:
“Oluwatobi Sofela dirije CodeSweetly”

Pruebalo en StackBlitz

En el fragmento anterior, usamos el operador spread (...) para distribuir el contenido de ["Oluwatobi", "Sofela", "CodeSweetly"] entre los parámetros de miBio().

No te preocupes si aún no entiendes como funcionan los operadores rest y spread. ¡Este artículo te tiene cubierto!

En las siguientes secciones, discutiremos cómo funcionan rest y spread en JavaScript.

Así que, sin más preámbulos, empecemos con el operador rest.

¿Qué es exactamente el operador Rest?

El operador rest se utiliza para poner el resto de algunos valores específicos suministrados por el usuario en un arreglo de JavaScript.

Así, por ejemplo, esta es la sintaxis de rest:

...tusValores

Los tres puntos (...) en el fragmento anterior simbolizan el operador rest.

El texto que aparece después del operador rest hace referencia a los valores que desea incluir en un arreglo. Sólo se puede utilizar antes del último parámetro en la definición de una función.

Para entender mejor la sintaxis, veamos cómo funciona el operador rest con las funciones de JavaScript.

¿Cómo funciona el operador Rest en una función?

En las funciones de JavaScript, rest se utiliza como prefijo del último parámetro de la función.

He aquí un ejemplo:

// Defina una función con dos parámetros regulares y un parámetro rest:
function miBio(primerNombre, apellido, ...otraInfo) { 
  return otraInfo;
}

El operador rest (...) ordena al ordenador que añada cualquier argumento (otraInfo) suministrado por el usuario en un arreglo. Luego, lo asigna al parámetro otraInfo.

Como tal, llamamos a ...otraInfo un parámetro rest.

Nota: Los argumentos son valores opcionales que puedes pasar al parámetro de una función a través de un invocador.

Aquí hay otro ejemplo:

// Define una función con dos parámetros regulares y un parámetro rest:
function miBio(primerNombre, apellido, ...otraInfo) { 
  return otraInfo;
}

// Invoca la función miBio pasando cinco argumentos a sus parámetros:
miBio("Oluwatobi", "Sofela", "CodeSweetly", "Desarrollo Web", "Hombre");

// La invocación anterior devolverá:
["CodeSweetly", "Desarrollo Web", "Hombre"]

En el fragmento anterior, observa que la invocación de miBio pasó cinco argumentos a la función.

Es decir, "Oluwatobi" y "Sofela" se asignaron a los parámetros primerNombre y apellido.

Al mismo tiempo, el operador rest añadió los argumentos restantes ( "CodeSweetly", "Desarrollo Web", y "Hombre") en un arreglo y asignó ese arreglo al parámetro otraInfo.

Por lo tanto, la función miBio() devolvió correctamente ["CodeSweetly", "Desarrollo Web", "Hombre"]como contenido del parámetro otraInfo.

¡Cuidado! No puedes utilizar “use strict” dentro de una función que contenga un parámetro rest

Ten en cuenta que no puedes utilizar la directiva “use strict” dentro de ninguna función que contenga un parámetro rest, un parámetro por defecto o un parámetro de desestructuración. Si lo haces, el ordenador arrojará un error de sintaxis.

Por ejemplo, considere el siguiente ejemplo:

// Define una función con un parámetro rest:
function muestraMiNombre(..valor) {
  "use strict";
  return valor;
}

// La definición anterior devolverá:
"Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list"

muestraMiNombre() devuelve un error de sintaxis porque hemos utilizado la directiva “use strict” dentro de una función con un parámetro rest.

Pero supón que necesitas que tu función esté en modo estricto y al mismo tiempo utilizas el parámetro rest. En tal caso, puedes escribir la directiva “use strict” fuera de la función.

He aquí un ejemplo:

// Define una directiva "use strict" fuera de su función:
"use strict";

// Define una función con un parámetro rest:
function imprimirMiNombre(...value) {
  return value;
}

// Invoca la función imprimirMiNombre pasando dos argumentos a sus parámetros:
imprimirMiNombre("Oluwatobi", "Sofela");

// La invocación de arriba devolverá:
["Oluwatobi", "Sofela"]

Nota: Sólo coloca la directiva “use strict” fuera de su función si está bien que todo el script o el ámbito que lo encierra esté en modo estricto.

Así que ahora que sabemos cómo funciona rest en una función, podemos hablar de cómo funciona en una asignación de desestructuración.

Cómo funciona el operador rest en una asignación de desestructuración

El operador rest se utiliza normalmente como prefijo de la última variable de la asignación de desestructuración.

Este es un ejemplo:

// Define un arreglo desestructurado con dos variables regulares y una variable rest:
const [primerNombre, apellido, ...otraInfo] = [
  "Oluwatobi", "Sofela", "CodeSweetly", "Desarrollo Web", "Hombre"
];

// Invoca la variable otraInfo:
console.log(otraInfo); 

// La invocación anterior devolverá:
["CodeSweetly", "Desarrollo Web", "Hombre"]

El operador rest (...) indica a la computadora que añada el resto de los valores proporcionados por el usuario en un arreglo. Luego, asigna ese arreglo a la variable otraInfo.

Como tal, puedes llamar a ...otraInfo una variable rest.

Aquí hay otro ejemplo:

// Define un objeto de desestructuración con dos variables regulares y una variable rest:
const { primerNombre, apellido, ...otraInfo } = {
  primerNombre: "Oluwatobi",
  apellido: "Sofela", 
  nombreEmpresa: "CodeSweetly",
  profesion: "Desarrollo Web",
  genero: "Hombre"
}

// Invoca la variable otraInfo:
console.log(otraInfo);

// La invocación anterior devolverá:
{nombreEmpresa: "CodeSweetly", profesion: "Desarrollo Web", genero: "Hombre"}

En el fragmento anterior, observe que el operador rest asignó un objeto de propiedades - no un arreglo - a la variable otraInfo.

En otras palabras, siempre que utilice rest en un   objeto desestructurado, el operador rest producirá un objeto de propiedades.

Sin embargo, si se utiliza rest en un arreglo desestructurado o en una función, el operador producirá un arreglo.

Antes de terminar nuestra discusión sobre rest, deberías ser consciente de algunas diferencias entre los argumentos de JavaScript y el parámetro rest. Por lo tanto, vamos a hablar de eso a continuación.

Argumentos vs Parámetros rest: ¿Cuál es la diferencia?

Estas son algunas de las diferencias entre los argumentos de JavaScript y el parámetro rest:

Diferencia 1: El objeto argumentos es un objeto tipo arreglo — ¡no un arreglo real!

Tenga en cuenta que el objeto argumentos de JavaScript no es un arreglo real. En su lugar, es un objeto similar a un arreglo que no tiene las características completas de un arreglo normal de JavaScript.

El parámetro rest, sin embargo, es un arreglo real. Como tal, puedes utilizar todos los métodos de arreglos en él.

Así, por ejemplo, puedes llamar a los métodos sort(), map(), forEach(), o pop() en un parámetro rest. Pero no puedes hacer lo mismo con el objeto argumentos.

Diferencia 2: No se puede utilizar el objeto argumentos en una función de flecha

El objeto argumentos no está disponible dentro de una función de flecha, por lo que no se puede utilizar allí. Pero puedes usar el parámetro rest dentro de todas las funciones - incluyendo la función flecha.

Diferencia 3: Deja que rest sea tu preferencia

Es mejor utilizar los parámetros rest en lugar del objeto argumentos especialmente cuando se escribe código compatible con ES6.

Ahora que sabemos cómo funciona rest, vamos a discutir el operador spread para que podamos ver las diferencias.

¿Qué es el operador Spread y cómo funciona spread en JavaScript?

El operador spread (...) le ayuda a expandir los iterables en elementos individuales.

La sintaxis de spread funciona dentro de los literales de los arreglos, las llamadas a funciones y los objetos de propiedad inicializados para extender los valores de los objetos iterables en elementos separados. Así que, efectivamente, hace lo contrario que el operador rest.

Nota: Un operador spread es efectivo sólo cuando se usa dentro de literales de arreglo, llamadas a funciones u objetos de propiedades inicializadas.

Entonces, ¿qué significa exactamente esto? Veámoslo con algunos ejemplos.

Ejemplo de Spread 1: Cómo funciona Spread en un arreglo

const miNombre = ["Sofela", "es", "mi"];
const sobreMi = ["Oluwatobi", ...miNombre, "nombre."];

console.log(sobreMi);

// La invocación anterior devolverá:
[ "Oluwatobi", "Sofela", "es", "mi", "nombre." ]

El fragmento anterior utilizó la extensión (...) para copiar el arreglo miNombre en sobreMi.

Nota:

  • Las alteraciones de miNombre no se reflejarán en sobreMi porque todos los valores dentro de miNombre son primitivos. Por lo tanto, el operador spread simplemente copió y pegó el contenido de miNombre en sobreMi sin crear ninguna referencia al arreglo original.
  • El operador spread sólo hace una copia superficial. Así que, ten en cuenta que suponiendo que miNombre contuviera cualquier valor no primitivo, el ordenador habría creado una referencia entre miNombre y sobreMi.
  • Supongamos que no utilizamos la sintaxis de propagación para duplicar el contenido de miNombre. Por ejemplo, si hubiéramos escrito const sobreMi = ["Oluwatobi", miNombre, "nombre"]. En tal caso, el ordenador habría asignado una referencia a miNombre. Así, cualquier cambio realizado en el arreglo original se reflejaría en el duplicado.

Ejemplo de Spread 2: Cómo utilizar Spread para convertir una cadena en elementos individuales de un arreglo

const miNombre = "Oluwatobi Sofela";

console.log([...miNombre]);

// La invocación anterior devolverá:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

En el fragmento anterior, hemos utilizado la sintaxis de propagación (...) dentro de un arreglo ([...]) para expandir el valor de la cadena de miNombre en elementos individuales.

Así, "Oluwatobi Sofela" se expandió en [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ].

Ejemplo de Spread 3: Cómo funciona el operador Spread en una llamada a una función

const numeros = [1, 3, 5, 7];

function añadirNumeros(a, b, c, d) {
  return a + b + c + d;
}

console.log(añadirNumeros(...numeros));

// La invocación anterior devolverá:
16

En el fragmento anterior, hemos utilizado la sintaxis spread para repartir el contenido del arreglo de numeros entre los parámetros de añadirNumeros().

Supongamos que el arreglo de numeros tiene más de cuatro elementos. En tal caso, el ordenador sólo utilizará los cuatro primeros elementos como argumento de añadirNumeros() e ignorará el resto.

He aquí un ejemplo:

const numeros = [1, 3, 5, 7, 10, 200, 90, 59];

function añadirNumeros(a, b, c, d) {
  return a + b + c + d;
}

console.log(añadirNumeros(...numeros));

// La invocación anterior devolverá:
16

Aquí hay otro ejemplo:

const miNombre = "Oluwatobi Sofela";

function deletreaNombre(a, b, c) {
  return a + b + c;
}

console.log(deletreaNombre(...miNombre));      // devuelve: "Olu"

console.log(deletreaNombre(...miNombre[3]));   // devuelve: "wundefinedundefined"

console.log(deletreaNombre([...miNombre]));    // devuelve: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"

console.log(deletreaNombre({...miNombre}));    // devuelve: "[object Object]undefinedundefined"

Ejemplo de Spread 4: Como funciona Spread en un objeto

const misNombres = ["Oluwatobi", "Sofela"];
const bio = { ...misNombres, administra: "codesweetly.com" };

console.log(bio);

// La invocación anterior devolverá:
{ 0: "Oluwatobi", 1: "Sofela", administra: "codesweetly.com" }

En el fragmento anterior, hemos utilizado spread dentro del objeto bio para expandir los valores de miNombre en propiedades individuales.

Lo que hay que saber sobre el operador Spread

Ten en cuenta estos tres datos esenciales siempre que decidas utilizar el operador spread.

Información 1: Los operadores Spread no pueden expandir los valores de los objetos

Dado que un objeto no es un objeto iterable, no puedes utilizar el operador spread para expandir sus valores.

Sin embargo, puedes utilizar el operador spread para clonar propiedades de un objeto a otro.

He aquí un ejemplo:

const miNombre = { primerNombre: "Oluwatobi", apellido: "Sofela" };
const bio = { ...miNombre, sitioWeb: "codesweetly.com" };

console.log(bio);

// La invocación anterior devolverá:
{ primerNombre: "Oluwatobi", apellido: "Sofela", sitioWeb: "codesweetly.com" };

El fragmento anterior utiliza el operador spread para clonar el contenido de miNombre en el objeto bio.

Nota:

  • El operador spread sólo puede expandir los valores de los objetos iterables.
  • Un objeto es iterable sólo si él (o cualquier objeto en su cadena de prototipos) tiene una propiedad con una clave @@iterador.
  • Array, TypedArray, String, Map y Set son todos tipos iterables incorporados porque tienen la propiedad @@iterator por defecto.
  • Un objeto con propiedades no es un tipo de datos iterable porque no tiene la propiedad @@iterator por defecto.
  • Puedes hacer que un objeto con propiedades sea iterable añadiéndole @@iterator.

Información 2: El operador spread no clona propiedades idénticas

Supongamos que utilizas el operador spread para clonar propiedades del objeto A en el objeto B. Y supongamos que el objeto B contiene propiedades idénticas a las del objeto A. En tal caso, las versiones de B sustituirán a las de A.

He aquí un ejemplo:

const myNombre = { primerNombre: "Tobi", apellido: "Sofela" };
const bio = { ...miNombre, primerNombre: "Oluwatobi", sitioWeb: "codesweetly.com" };

console.log(bio);

// La invocación anterior devolverá:
{ primerNombre: "Oluwatobi", apellido: "Sofela", sitioWeb: "codesweetly.com" };

Observa que el operador spread no copió la propiedad primerNombre de miNombre en el objeto bio porque bio ya contiene una propiedad primerNombre.

Información 3: ¡Cuidado con el funcionamiento de spread cuando se utiliza en objetos que contienen no primitivos!

Supón que utilizas el operador spread en un objeto (o arreglo) que contiene sólo valores primitivos. El ordenador no creará ninguna referencia entre el objeto original y el duplicado.

Por ejemplo, considere este código de abajo:

const miNombre = ["Sofela", "es", "mi"];
const sobreMi = ["Oluwatobi", ...miNombre, "nombre."];

console.log(sobreMi);

// La invocación anterior devolverá:
["Oluwatobi", "Sofela", "es", "mi", "nombre."]

Observa que cada elemento de miNombre es un valor primitivo. Por lo tanto, cuando usamos el operador de propagación para clonar miNombre en sobreMi, el ordenador no creó ninguna referencia entre los dos arreglos.

Como tal, cualquier alteración que hagas a miNombre no se reflejará en sobreMi, y viceversa.

Como ejemplo, vamos a añadir más contenido a miNombre:

miNombre.push("verdadero");

Ahora, vamos a comprobar el estado actual de miNombre y de sobreMi:

console.log(myNombre); // ["Sofela", "es", "mi", "verdadero"]

console.log(sobreMi); // ["Oluwatobi", "Sofela", "es", "mi", "nombre."]

Observa que el contenido actualizado de miNombre no se refleja en sobreMi - porque spread no creó ninguna referencia entre el arreglo original y el duplicado.

¿Qué pasa si miNombre contiene elementos no primitivos?

Supongamos que miNombre contiene elementos no primitivos. En ese caso, spread creará una referencia entre el no primitivo original y el clonado.

He aquí un ejemplo:

const miNombre = [["Sofela", "es", "mi"]];
const sobreMi = ["Oluwatobi", ...miNombre, "nombre."];

console.log(sobreMi);

// La invocación anterior devolverá:
[ "Oluwatobi", ["Sofela", "es", "mi"], "nombre." ]

Observa que miNombre contiene un valor no primitivo.

Por lo tanto, el uso del operador spread para clonar el contenido de miNombre en sobreMi hizo que el ordenador creara una referencia entre los dos arreglos.

Como tal, cualquier alteración que hagas a la copia de miNombre se reflejará en la versión de sobreMi, y viceversa.

Como ejemplo, vamos a añadir más contenido a miNombre:

miNombre[0].push("verdadero");

Ahora, comprobemos el estado actual de miNombre y de sobreMi:

console.log(miNombre); // [["Sofela", "es", "mi", "verdadero"]]

console.log(sobreMi); // ["Oluwatobi", ["Sofela", "es", "mi", "verdadero"], "nombre."]

Observa que el contenido actualizado de miNombre se refleja en sobreMi - porque spread creó una referencia entre el arreglo original y el duplicado.

Aquí hay otro ejemplo:

const miNombre = { primerNombre: "Oluwatobi", apellido: "Sofela" };
const bio = { ...miNombre };

miNombre.primerNombre = "Tobi";

console.log(miNombre); // { primerNombre: "Tobi", apellido: "Sofela" }

console.log(bio); // { primerNombre: "Oluwatobi", apellido: "Sofela" }

En el fragmento anterior, la actualización de miNombre no se reflejó en bio porque utilizamos el operador de propagación en un objeto que contiene sólo valores primitivos.

Nota: Un desarrollador llamaría a miNombre un objeto superficial porque sólo contiene elementos primitivos.

Aquí hay un ejemplo más:

const miNombre = { 
  primerNombre: { primerNombre: "Oluwatobi", apellido: "Sofela" }
};

const bio = { ...miNombre };

miNombre.nombreCompleto.primerNombre = "Tobi";

console.log(miNombre); // { nombreCompleto: { primerNombre: "Tobi", apellido: "Sofela" } }

console.log(bio); // { NombreCompleto: { primerNombre: "Tobi", apellido: "Sofela" } }

En el fragmento anterior, la actualización de miNombre se refleja en bio porque hemos utilizado el operador spread en un objeto que contiene un valor no primitivo.

Nota:

  • Llamamos a miNombre un objeto profundo porque contiene un elemento no primitivo.
  • La copia superficial se realiza cuando se crean referencias al clonar un objeto en otro. Por ejemplo, ...miNombre produce una copia superficial del objeto miNombre porque cualquier alteración que hagas en uno se reflejará en el otro.
  • La copia profunda se realiza cuando se clonan objetos sin crear referencias. Por ejemplo, podría copiar profundamente miNombre en bio haciendo const bio = JSON.parse(JSON.stringify(miNombre)). Haciendo esto, el ordenador clonará miNombre en bio sin crear ninguna referencia.
  • Puedes romper la referencia entre los dos objetos reemplazando el objeto nombreCompleto dentro de miNombre o bio con un nuevo objeto. Por ejemplo, haciendo miNombre.nombreCompleto = { primerNombre: "Tobi", apellido: "Sofela" } desconectaría el puntero entre miNombre y bio.

Para terminar

En este artículo se han tratado las diferencias entre los operadores rest y spread. También hemos utilizado ejemplos para ver cómo funciona cada operador.

¡Gracias por leer!

]]> <![CDATA[ Cómo usar Python y Pandas para organizar las grandes tormentas, el pesimismo y los datos duros. ]]> https://www.freecodecamp.org/espanol/news/como-usar-python-y-pandas-para-mapear-las-grandes-tormentas-el-pesimismo-y-los-datos-duros/ 6161a4f7818d3e09126990c7 Tue, 19 Oct 2021 12:00:00 +0000 Artículo original escrito por David Clinton
Artículo original How to Use Python and Pandas to Map Major Storms, Pessimism, and Hard Data
Traducido y adaptado por Luis Ignacio Cabezas

A veces puede ser reconfortante, de algún modo, reflexionar sobre lo mucho peor que está todo ahora, de lo que solía estar en los viejos tiempos.

"Los niños no respetan."

"Todo es demasiado caro."

"Los funcionarios públicos no inspiran confianza."

"¿Y qué pasa con el clima? Nunca habíamos tenido tantos huracanes devastadores, ¿O sí?"

Bueno, soy lo suficientemente mayor como para haber dado unas cuantas vueltas a la manzana y no estoy seguro. De niño no era precisamente angelical, las cosas siempre costaban más de lo que queríamos y los funcionarios públicos nunca fueron las criaturas más queridas del planeta. ¿Pero las grandes tormentas? No tengo ni idea.

Resulta que hay muchos datos excelentes sobre tormentas, así que no hay razón para no buscar al menos algunas pistas. Y mis intentos de añadir la analítica de datos a mi actual stock de herramientas profesionales podrían ayudar, aquí.

Sin embargo, primero debemos definir cuidadosamente algunos términos y antecedentes.

¿Qué es una gran tormenta?

Huracanes - o, más precisamente, ciclones tropicales - son "tropicales" en el sentido de que se forman sobre oceanos en regiones tropicales. El término "tropicales" se refiere al área de la superficie terrestre que se encuentra dentro de los 23 grados (más o menos) del ecuador, tanto al norte como al sur.

Las tormentas se llaman "ciclones" porque el movimiento de sus vientos es cíclico (en el sentido de las agujas del reloj en el hemisferio sur y en sentido contrario en el hemisferio norte).

Los ciclones se alimentan del agua oceánica evaporada y dejan a su paso tormentas torrenciales y a menudo violentas, sobre todo después de pasar por zonas terrestres habitadas.

En términos generales, una tormenta que produce vientos sostenidos de entre 34 y 63 nudos (o entre 39 y 72 millas por hora) se considera una tormenta tropical. Las tormentas con vientos superiores a 64 nudos (73 millas por hora) son huracanes (o, en los océanos Pacífico Occidental o Índico Norte, son tifones).

Los huracanes se miden por categorías entre uno y cinco, siendo los de categoría cinco los más violentos y peligrosos.

¿De dónde provienen los datos de las grandes tormentas?

Existen datos históricos de tormentas fiables y en gran medida consistentes, al menos en Estados Unidos, para el último siglo y medio. Pero para entender correctamente el contexto de esos datos es necesario conocer cómo se han realizado esas observaciones a lo largo de los años.

Hasta la década de 1940, la mayor parte de las observaciones fueron realizadas por las tripulaciones de los buques oceánicos. Pero las tripulaciones de los barcos solo pueden observar e informar de lo que ven, y lo que ven estará determinado por el lugar al que vayan.

Antes de la apertura del Canal de Panamá en 1914, los barcos que viajaban entre Europa y el océano Pacífico seguían una ruta alrededor del extremo sur de Sudamérica que en gran medida no llegaba a las zonas costeras de Estados Unidos. Como resultado, es probable que un porcentaje significativo de los fenómenos meteorológicos simplemente no fueran notados.

Del mismo modo, la llegada de los aviones de reconocimiento en la década de 1940 habría permitido a los científicos captar más fenómenos que antes se habrían perdido. Y el uso de satélites meteorológicos a partir de los años sesenta ha permitido captar casi toda la actividad oceánica.

Estos cambios, y su impacto en los datos de las tormentas, se resumen claramente en esta página del sitio de la Administración Nacional Oceánica y Atmosférica (NOAA) del gobierno estadounidense, basada en un estudio de análisis de datos realizado para el Laboratorio de Dinámica de Fluidos Geofísicos (GFDL).

¿Qué muestra el registro histórico?

Después de todos estos antecedentes, ¿qué dicen realmente los datos? ¿Son los huracanes graves más frecuentes ahora que en el pasado? Bueno, según el sitio web de la NOAA, la respuesta es: "No". Esto es lo que dicen:

"Las tormentas tropicales del Atlántico de más de dos días de duración no han aumentado en número. Las tormentas que duran menos de dos días han aumentado considerablemente, pero esto se debe probablemente a la mejora de las observaciones... No conocemos una señal de cambio climático que dé lugar a un aumento solo de las tormentas de menor duración, mientras que dicho aumento es cualitativamente coherente con lo que cabría esperar de las mejoras con las prácticas de observación."

La historia completa, incluyendo una buena explicación de las opciones de manipulación de datos que hicieron, la obtendrás leyendo el propio estudio. De hecho, te animo a que leas ese estudio, porque es un gran ejemplo de cómo los profesionales abordan los problemas de datos.

A partir de aquí, sin embargo, te quedarás con mis intentos amateurs y simplificados de visualizar el registro de datos en bruto y sin ajustar.

Datos de huracanes de Estados Unidos: 1851-2019

Nuestra fuente de datos de "Impactos/caídas de huracanes en los Estados Unidos continentales" es esta página web de la NOAA

Para descargar los datos, simplemente los copié haciendo clic con el ratón en la parte superior izquierda (el campo de encabezamiento "Año") y arrastrando todo el camino hasta la parte inferior derecha. A continuación, lo pegué en un editor de texto plano en mi ordenador local y lo guardé en un archivo con la extensión .csv.

Cómo limpiar los datos de los huracanes

Si echas un vistazo a la página web, verás que hay que limpiar el formato. Cada década se introduce con una sola fila que no contiene nada más que una cadena parecida a esto:1850s. Querremos eliminar esas filas. Los años sin eventos contienen la cadena none en la segunda columna. Esas también se tendrán que ir.

Hay algunos eventos que aparentemente no tienen datos para sus velocidades máximas de viento (Max Wind). En lugar de un número (medido en nudos), los valores de velocidad de esos eventos se representan con cinco guiones (-----). Tendremos que convertirlo en algo con lo que podamos trabajar.

Y, por último, aunque los meses suelen representarse con abreviaturas de tres letras, hubo un par de eventos que se extendieron a lo largo de dos meses. Para que podamos procesarlos adecuadamente, convertiréSp-Oc y Jl-Au a Sep y Jul respectivamente.

El hecho es que en realidad no vamos a utilizar la columna del mes, por lo que esto no supondrá ninguna diferencia. Pero es una buena herramienta para conocer.

Así es como configuramos las cosas en Jupyter:

import pandas as pd
import matplotlib as plt
import matplotlib.pyplot as plt 
import numpy as np

df = pd.read_csv('data-huracanes-noaa.csv')

Veamos los tipos de datos de cada columna. Podemos ignorar las cadenas de la columna Estados (States) y Nombre (Name) - no nos interesan de todos modos. Pero tendremos que hacer algo con las columnas de Fecha y Viento Máximo - no nos servirán comoobject.

df.dtypes

Year                                         object
Month                                        object
States Affected and Category by States       object
Highest\nSaffir-\nSimpson\nU.S. Category    float64
Central Pressure\n(mb)                      float64
Max Wind\n(kt)                               object
Name                                         object
dtype: object

Así que voy a filtrar todas las filas en la columna Año (Year) para la letra s y simplemente las eliminaré (== False). Eso se encargará de todas las cabeceras de las décadas (es decir, las filas que contienen una s como parte de algo como 1850s).

Del mismo modo, eliminaré las filas que contengan la cadena None en la columna Mes (Month) para eliminar los años sin tormentas.

Aunque los años tranquilos podrían tener algún impacto en nuestras visualizaciones, sospecho que incluirlos con algún tipo de valor nulo probablemente sesgaría las cosas aún más en la dirección contraria.  También complicarían mucho nuestras visualizaciones.

Por último, reemplazaré esas dos filas de varios meses.

df = df[(df.Year.str.contains("s")) == False]
df = df[(df.Month.str.contains("None")) == False]
df = df.replace('Sp-Oc','Sep')
df = df.replace('Jl-Au','Jul')

A continuación, utilizaré el práctico método de Pandas to-datetime para convertir las abreviaturas de tres letras del mes en números entre el 1 y el 12. El código de formato %b es una de las designaciones legales de Python relacionadas con la fecha y le indica a Python que estamos trabajando con una abreviatura de tres letras. Para ver la lista completa, consulte esta página.

df.Month = pd.to_datetime(df.Month, format='%b').dt.month

Me gustaría ajustar un poco las cabeceras para que sean un poco más fáciles de leer y de referenciar en nuestro código. df.columns cambiará todos los valores de las cabeceras de las columnas a la lista que especifique aquí:

df.columns =['Año', 'Mes', 'Estados', 'Categoría', 
             'Presión', 'VientoMáximo', 'Nombre']

Tendré que convertir los datos de Año de objetos de cadena a enteros, o Python no sabrá cómo trabajar con ellos adecuadamente. Eso se hace usando astype.

Como se anunció, también convertiré los valores null en VientoMáximo a NaN - que NumPy leerá como "no es un número". Luego convertiré los datos en VientoMáximo de object a float.

df = df.astype({'Año': 'int'})
df = df.replace('-----',np.NaN)
df = df.astype({'VientoMáximo': 'float'})

Veamos cómo queda todo eso ahora:

df.dtypes

Año           int64
Mes           int64
Estados       object
Categoría     float64
Presión       float64
Viento Maximo float64
Nombre        object
dtype: object

Mucho mejor.

Cómo presentar los datos de los huracanes

Ahora, mirando nuestros datos, voy a sugerir que separemos las tres métricas: categoría de huracán, presión barométrica y velocidad máxima del viento.

Mi opinión es que no se gana mucho con la complicación añadida al agruparlas, y corremos el riesgo de perder de vista las importantes diferencias entre los incidentes de las tormentas más ligeras y las más graves.

Por supuesto, siempre puedo aislar las métricas individuales para ver cómo serían sus distribuciones. Utilizando value_counts contra la columna de categoría, por ejemplo, me muestra que los huracanes más ligeros de categoría 1 y 2 son mucho más frecuentes que los eventos más peligrosos.

df['Categoría'].value_counts()

1.0    124
2.0     85
3.0     62
4.0     26
5.0      4
Name: Categoria, dtype: int64

El histograma del conjunto de datos nos da una visión general del número de eventos (representados en el eje Y) a lo largo de la historia, pero es posible que perdamos algunos detalles.

A partir de este histograma, es obvio que no ha habido ningún cambio notable en la frecuencia de las tormentas a lo largo del tiempo. Para estar seguro de que mi elección del número de intervalos que utilizamos no está ocultando involuntariamente tendencias importantes, experimente con otros valores además de 25.

df.hist(column='Año', bins=25)
All Hurricane Events
Todos los Eventos de Huracanes

Pero para poder centrarnos en cada métrica, trazaré tres gráficos distintos. Para ello, crearé tres nuevos marcos de datos y rellenaré cada uno de ellos con el contenido de la columna Año y la respectiva columna de datos.

df_categoria = df[['Año','Categoría']]
df_viento = df[['Año','VientoMáximo']]
df_presion = df[['Año','Presión']]

Enviar cada uno de esos marcos de datos (dataframes) directamente a un gráfico no servirá de nada, porque no distinguirá entre la gravedad de las tormentas. Así que le mostraré cómo podemos desglosar los datos por categoría (1-5). Este bucle for iterará a través de los números 1-6 (que es la manera de Python para devolver los números entre 1 y 5) y utiliza cada uno de esos números a su vez para buscar huracanes de esa categoría.

Las filas cuya categoría coincida con el número se escribirán en un nuevo marco de datos (temporal) llamado df1 que, a su vez, se utilizará para trazar un histograma. La línea plt.title aplica un título para el gráfico impreso que incluirá el número de categoría (el valor actual de num_convertido).

El bucle trabajará a través del proceso cinco veces, cada vez escribiendo el número de eventos de la categoría actual en df1. Los cinco histogramas se imprimirán, uno tras otro.

for x in range(1, 6):
    num_cat = x
    num_convertido = str(num_cat) 
    dfcat = df_categoria['Categoría']==(x)
    df1 = df_categoria[dfcat]
    df1.hist(column='Año', bins=20)
    plt.title("Eventos Totales de la Categoría " + (num_convertido))
Category 1 Hurricanes
Huracanes de Categoría 1
Category 2 Hurricanes
Huracanes de Categoría 2
Category 3 Hurricanes
Huracanes de Categoría 3
Category 4 Hurricanes
Huracanes de Categoría 4
Category 5 Hurricanes
Huracanes de Categoría 5

Como se puede ver, no hay pruebas notables de un aumento significativo de la frecuencia de las tormentas a lo largo del tiempo.

Como siempre, analice sus datos (utilizando herramientas como value_counts()) para confirmar que los gráficos tienen sentido en el mundo real.

Datos de tormentas tropicales de Estados Unidos: 1851-1965, 1983-2019

Los huracanes (o ciclones) son, por supuesto, solo una parte de la historia. Un aumento de la frecuencia de las tormentas tropicales destructivas también sería motivo de preocupación.

Afortunadamente, la NOAA pone a disposición los datos pertinentes en un formato muy similar al de sus datos sobre huracanes. Aquí está la página web donde encontrarás el gráfico. Copia los datos en un archivo .csv de la misma manera que antes.

Sin embargo, observe que no hay datos para los años 1966-1982. No me pregunten por qué. Simplemente no hay. Es curioso el clima.

Yo crearía un nuevo Jupyter notebook para esta parte del proyecto, ya que no hay nada que vayamos a necesitar de la versión de huracanes. Por lo tanto, se configurarán las cosas como siempre:

import pandas as pd
import matplotlib as plt
import numpy as np
df = pd.read_csv('tormentas-tropicales-usa-noaa.csv')

Limpiemos Los Datos De Las Tormentas Tropicales

Las filas que representan años sin eventos deberían, de nuevo, ser eliminadas:

df = df[(df.Date.str.contains("None")) == False]

La columna Fecha (Date) de este conjunto de datos tiene caracteres que apuntan a cinco notas a pie de página: $, *, #, % y &. Las notas a pie de página contienen información importante, pero esos caracteres nos darán problemas si no los eliminamos.

Estos comandos lo conseguirán, sustituyendo todas esas cadenas en la columna Fecha por nada:

df['Date'] = df.Date.str.replace('\$', '')
df['Date'] = df.Date.str.replace('\*', '')
df['Date'] = df.Date.str.replace('\#', '')
df['Date'] = df.Date.str.replace('\%', '')
df['Date'] = df.Date.str.replace('\&', '')

A continuación, voy a restablecer los encabezados de las columnas. En primer lugar, porque será más fácil trabajar con nombres bonitos y cortos. Pero principalmente porque, como administrador de sistemas de Linux, encuentro los espacios en los nombres de archivos o en los encabezados moralmente ofensivos.

df.columns =['Tormenta#', 'Fecha', 'Tiempo', 'Lat', 'Lon', 
             'VientoMáximo', 'EstadoTierra', 'NombreTormenta']

Los tipos de datos de las columnas van a necesitar algo de trabajo:

df.dtypes

Tormenta#            object
Fecha                object
Tiempo               object
Lat                  object
Lon                  object
VientoMáximo         float64
EstadoTierra         object
NombreTormenta       object
dtype: object

Veamos cómo se ven nuestros datos:

df.head()


Tormenta#	Fecha	Tiempo	Lat	Lon	VientoMáximo	EstadoTierra	NombreTormenta
1	6	10/19/1851	1500Z	41.1N	71.7W	50.0	NY	NaN
6	3	8/19/1856	1100Z	34.8	76.4	50.0	NC	NaN
7	4	9/30/1857	1000Z	25.8	97	50.0	TX	NaN
8	3	9/14/1858	1500Z	27.6	82.7	60.0	FL	NaN
9	3	9/16/1858	0300Z	35.2	75.2	50.0	NC	NaN

La verdad es que no estoy seguro de lo que significan esos valores de Tormenta#, pero no hacen daño a nadie. Las fechas tienen un formato mucho mejor que el de los datos de los huracanes. Pero tendré que convertirlas a un nuevo formato. Hagámoslo bien y vayamos con datetime.

df.Fecha = pd.to_datetime(df.Fecha)

Cómo presentar los datos de la tormenta tropical

Para nuestros propósitos, la única columna de datos que realmente importa es VientoMáximo - ya que es lo que define la intensidad de la tormenta. Este comando creará un nuevo marco de datos compuesto por las columnas Fecha y VientoMáximo:

df1 = df[['Fecha','VientoMáximo']]

No hay razón para aplazar esto: también podemos disparar un histograma de inmediato. Verás inmediatamente la brecha alrededor de 1970, donde no había datos. También verás que, de nuevo, no parece haber mucha tendencia al alza.

df1['Fecha'].hist()
Histogram of All Tropical Storms
Histograma de Todas las Tormentas Tropicales

Pero realmente deberíamos profundizar un poco más aquí. Después de todo, estos datos sólo mezclan tormentas de 30 nudos con otras de 75 nudos. Definitivamente querremos saber si están ocurriendo o no a ritmos similares.

Averigüemos cuántas filas de datos tenemos. shape nos dice que tenemos 362 eventos en total.

print(df1.shape)

(362, 2)

La impresión de nuestro marco de datos nos muestra que los valores de VientoMáximo son todos múltiplos de 5. Si escaneas los datos por ti mismo, verás que oscilan entre 30 y 70 más o menos.

df1

	Fecha		VientoMaximo
1	1851-10-19	50.0
6	1856-08-19	50.0
7	1857-09-30	50.0
8	1858-09-14	60.0
9	1858-09-16	50.0
...	...	...
391	2017-09-27	45.0
392	2018-05-28	40.0
393	2018-09-03	45.0
394	2018-09-03	45.0
395	2019-09-17	40.0
362 rows × 2 columns

Así que dividamos nuestros datos en cuatro conjuntos más pequeños, como aproximaciones razonables a tormentas de distintos niveles de intensidad. He creado cuatro marcos de datos y los he rellenado con eventos que caen en sus rangos más estrechos (es decir, entre 30 y 39 nudos, 40 y 49, 50 y 59, y 60 y 79). Esto debería darnos un marco de referencia razonable para nuestros eventos.

df_30 = df1[df1['VientoMáximo'].between(30, 39)]
df_40 = df1[df1['VientoMáximo'].between(40, 49)]
df_50 = df1[df1['VientoMáximo'].between(50, 59)]
df_60 = df1[df1['VientoMáximo'].between(60, 79)]

Confirmemos que los puntos de corte que hemos elegido tienen sentido. Este código imprimirá de forma atractiva el número de filas en el índice de cada uno de nuestros cuatro formularios de datos.

st1 = len(df_30.index)
print('El número de tormentas entre 30 y 39: ', st1)
st2 = len(df_40.index)
print('El número de tormentas entre 40 y 49: ', st2)
st3 = len(df_50.index)
print('El número de tormentas entre 50 y 59: ', st3)
st4 = len(df_60.index)
print('El número de tormentas entre 60 y 79: ', st4)

El número de tormentas entre 30 y 39:  51
El número de tormentas entre 40 y 49:  113
El número de tormentas entre 50 y 59:  142
El número de tormentas entre 60 y 79:  56

Probablemente haya una forma elegante de combinar esos cuatro comandos en uno solo. Pero mi filosofía es que la sintaxis que me llevaría una hora averiguar nunca superará la simplicidad de cinco segundos de cortar y pegar. Nunca.

También podemos profundizar un poco más en los datos utilizando nuestro viejo amigo, value_counts(). Esto nos mostrará que hubo 71 eventos de 40 nudos y 42 eventos de 45 nudos a lo largo de nuestro rango de tiempo.

df_40['VientoMáximo'].value_counts()

40.0    71
45.0    42
Name: VientoMáximo, dtype: int64

Podemos trazar un único gráfico de líneas para mostrar los cuatro subconjuntos juntos. Este gráfico añade etiquetas en los ejes y en el gráfico y una leyenda para facilitar la comprensión de los datos. El valor subplot(111) controla el tamaño de la figura.

fig = plt.figure()
ax = plt.subplot(111)
df_30['VientoMáximo'].plot(ax=ax, label='df_30')
df_40['VientoMáximo'].plot(ax=ax, label='df_40')
df_50['VientoMáximo'].plot(ax=ax, label='df_50')
df_60['VientoMáximo'].plot(ax=ax, label='df_60')
ax.set_ylabel('Velocidad del Viento en Nudos')
ax.set_xlabel('Tiempo Entre 1851 y 2019')
plt.title('Tormentas Tropicales por Velocidad del Viento Máximo (nudos)')
ax.legend()
All Tropical Storms
Todas las Tormentas Tropicales

Esto puede ser útil para confirmar que no estamos desordenando los datos. La comprobación visual mostrará, por ejemplo, que en nuestro conjunto de datos sólo hubo un único evento de 30 nudos y que tuvo lugar hacia el final de nuestro marco temporal en 2016. Pero no es una buena manera de mostrarnos los cambios en la frecuencia de los eventos.

Para ello, miraremos los datos que contiene cada uno de nuestros marcos de datos.

df_30['Fecha'].hist(bins=20)
30-39 Knot Events
Eventos de 30-39 Nudos
df_40['Fecha'].hist(bins=20)
40-49 Knot Events
Eventos de 40-49 Nudos
df_50['Fecha'].hist(bins=20)
50-59 Knot Events
Eventos de 50-59 Nudos
df_60['Fecha'].hist(bins=20)
60-79 Knot Events
Eventos de 60-79 Nudos

Un rápido vistazo a estos cuatro gráficos nos muestra una frecuencia de eventos bastante consistente a lo largo de los 150 años de nuestros datos. De nuevo, pruébalo tú mismo utilizando diferentes números de intervalos para asegurarte de que no estamos pasando por alto algunas tendencias importantes.

]]>