freeCodeCamp/curriculum/challenges/spanish/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-f...

3.2 KiB

id title required challengeType videoUrl localeTitle
587d7fac367417b2b2512bdc Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
src
https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js
6 Utilice las funciones d3.max y d3.min para buscar valores mínimos y máximos en un conjunto de datos

Description

Los métodos D3 domain() y range() configuran esa información para su escala basándose en los datos. Hay un par de métodos para hacer eso más fácil. A menudo, cuando configura el dominio, querrá usar los valores mínimo y máximo dentro del conjunto de datos. Intentar encontrar estos valores manualmente, especialmente en un conjunto de datos de gran tamaño, puede causar errores. D3 tiene dos métodos: min() y max() para devolver esta información. Aquí hay un ejemplo:
const exampleData = [34, 234, 73, 90, 6, 52];
d3.min (exampleData) // Devuelve 6
d3.max (exampleData) // Devuelve 234
Un conjunto de datos puede tener matrices anidadas, como los pares de coordenadas [x, y] que estaban en el ejemplo de diagrama de dispersión. En ese caso, debe indicar a D3 cómo calcular el máximo y el mínimo. Afortunadamente, los métodos min() y max() toman una función de devolución de llamada. En este ejemplo, el argumento d la función de devolución de llamada es para la matriz interna actual. La devolución de llamada debe devolver el elemento de la matriz interna (el valor de x o y) sobre el que desea calcular el máximo o el mínimo. Aquí hay un ejemplo de cómo encontrar los valores mínimo y máximo con una matriz de matrices:
const locationData = 1, 7], [6, 3], [8, 3;
// Devuelve el número más pequeño de los primeros elementos
const minX = d3.min (locationData, (d) => d [0]);
// minX comparó 1, 6 y 8 y se establece en 1

Instructions

La variable positionData contiene una matriz tridimensional (3D). Utilice un método D3 para encontrar el valor máximo de la coordenada z (el tercer valor) de las matrices y guárdelo en la variable de output . Nota
Dato curioso: D3 puede trazar arrays 3D.

Tests

tests:
  - text: El texto en el <code>h2</code> debe ser 8.
    testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the <code>h2</code> should be 8.");'
  - text: Su código debe utilizar el método <code>max()</code> .
    testString: 'assert(code.match(/\.max/g), "Your code should use the <code>max()</code> method.")'

Challenge Seed

<body>
  <script>
    const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
    // Add your code below this line

    const output = undefined; // Change this line

    // Add your code above this line

    d3.select("body")
      .append("h2")
      .text(output)
  </script>
</body>

Solution

// solution required