D3.js: API de matriz

D3 contiene una colección de módulos. Puede utilizar cada módulo de forma independiente o una colección de módulos juntos para realizar operaciones. Este capítulo explica en detalle la API de Array.

¿Qué es una matriz?

Una matriz contiene una colección secuencial de tamaño fijo de elementos del mismo tipo. Una matriz se usa para almacenar una colección de datos, pero a menudo es más útil pensar en una matriz como una colección de variables del mismo tipo.

Configuración de API

Puede configurar fácilmente la API utilizando el siguiente script.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

Métodos de API de estadísticas de matriz

A continuación, se muestran algunos de los métodos API de estadísticas de matriz más importantes.

  • d3.min(array)
  • d3.max(array)
  • d3.extent(array)
  • d3.sum(array)
  • d3.mean(array)
  • d3.quantile(array)
  • d3.variance(array)
  • d3.deviation(array)

Analicemos cada uno de estos en detalle.

d3.min (matriz)

Devuelve el valor mínimo en la matriz dada usando el orden natural.

Example - Considere el siguiente guión.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

Result - El script anterior devuelve el valor mínimo en la matriz 20 en su consola.

d3.max (matriz)

Devuelve el valor máximo en una matriz dada.

Example - Considere el siguiente guión.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

Result - El script anterior devuelve el valor máximo en la matriz (100) en su consola.

d3.extent (matriz)

Devuelve el valor mínimo y máximo en la matriz dada.

Example - Considere el siguiente guión.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

Result - El script anterior devuelve un valor de extensión [20,100].

d3.sum (matriz)

Devuelve la suma de la matriz de números dada. Si la matriz está vacía, devuelve 0.

Example - Considere lo siguiente a continuación.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

Result - El script anterior devuelve el valor de la suma 300.

d3.mean (matriz)

Devuelve la media de la matriz de números dada.

Example - Considere lo siguiente a continuación.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

Result - El script anterior devuelve el valor medio como 60. Del mismo modo, puede comprobar el valor medio.

d3.quantile (matriz)

Devuelve el p-cuantil de la matriz ordenada de números dada, donde p es un número en el rango [0, 1]. Por ejemplo, la mediana se puede calcular usando p = 0.5, el primer cuartil en p = 0.25 y el tercer cuartil en p = 0.75. Esta implementación utiliza el método R-7, el lenguaje de programación R predeterminado y Excel.

Example - Considere el siguiente ejemplo.

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100

Del mismo modo, puede comprobar otros valores.

d3.varianza (matriz)

Devuelve la varianza de la matriz de números dada.

Example - Considere el siguiente guión.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

Result - El script anterior devuelve el valor de variación como 1000.

d3 desviación (matriz)

Devuelve la desviación estándar de la matriz dada. Si la matriz tiene menos de dos valores, regresa como indefinido.

Example - Considere lo siguiente a continuación.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

Result - El script anterior devuelve el valor de desviación como 31.622776601683793.

Example- Realicemos todos los métodos de Array API discutidos anteriormente usando el siguiente script. Cree una página web "array.html" y agregue los siguientes cambios.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));  
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

Métodos de la API de búsqueda de matrices

A continuación se muestran algunos métodos importantes de la API de búsqueda de matrices.

  • d3.scan(array)
  • d3 ascendente (a, b)

Entendamos ambos en detalle.

d3.scan (matriz)

Este método se utiliza para realizar una exploración lineal de la matriz especificada. Devuelve el índice del elemento mínimo al comparador especificado. A continuación se define un ejemplo sencillo.

Example -

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1

d3 ascendente (a, b)

Este método se utiliza para realizar la función de comparación. Se puede implementar como:

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

Si no se especifica ninguna función de comparación en el método de clasificación integrado, el orden predeterminado es alfabético. La función anterior devuelve -1, si a es menor que b, o 1, si a es mayor que bo 0.

Del mismo modo, puede realizar el método descendente (a, b). Devuelve -1, si a es mayor que b, o 1, si a es menor que b, o 0. Esta función realiza un orden natural inverso.

Example -

Crea una pagina web array_search.html y agregue los siguientes cambios.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos el siguiente resultado.

API de transformaciones de matriz

A continuación se muestran algunos de los métodos API de transformación de matrices más destacados.

  • d3.cross (a, b [, reductor])
  • d3.merge(arrays)
  • d3.pairs (matriz [, reductor])
  • d3.permute (matriz, índices)
  • d3.zip(arrays)

Entendamos cada uno de estos en detalle.

d3.cross (a, b [, reductor])

Este método se utiliza para devolver el producto cartesiano de las dos matrices ay b dadas. A continuación se define un ejemplo sencillo.

d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge (matrices)

Este método se utiliza para fusionar las matrices y se define a continuación.

d3.merge([[10], [20]]); // output is [10, 20]

d3.pairs (matriz [, reductor])

Este método se utiliza para emparejar elementos de matriz y se define a continuación.

d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]

d3.permute (matriz, índices)

Este método se utiliza para realizar la permutación de la matriz y los índices especificados. También puede convertir los valores de un objeto en una matriz. Se explica a continuación.

var object = {fruit:"mango", color: "yellow"},
   fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"

d3.zip (matrices)

Este método se utiliza para devolver una matriz de matrices. Si las matrices contienen solo una matriz, la matriz devuelta contiene matrices de un elemento. Si no se especifica ningún argumento, la matriz devuelta está vacía. Se define a continuación.

d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]

Example - Crea una página web array_transform y agregue los siguientes cambios.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[10], [30]]));
         console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields)); 
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.