D3.js - API Array

D3 contient une collection de modules. Vous pouvez utiliser chaque module indépendamment ou une collection de modules ensemble pour effectuer des opérations. Ce chapitre explique en détail l'API Array.

Qu'est-ce qu'un tableau?

Un tableau contient une collection séquentielle de taille fixe d'éléments du même type. Un tableau est utilisé pour stocker une collection de données, mais il est souvent plus utile de considérer un tableau comme une collection de variables du même type.

Configurer l'API

Vous pouvez facilement configurer l'API à l'aide du script ci-dessous.

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

Méthodes de l'API Array Statistics

Voici quelques-unes des méthodes d'API de statistiques de tableau les plus 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)

Laissez-nous discuter de chacun d'eux en détail.

d3.min (tableau)

Il renvoie la valeur minimale dans le tableau donné en utilisant l'ordre naturel.

Example - Considérez le script suivant.

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

Result - Le script ci-dessus renvoie la valeur minimale dans le tableau 20 de votre console.

d3.max (tableau)

Il renvoie la valeur maximale dans un tableau donné.

Example - Considérez le script suivant.

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

Result - Le script ci-dessus renvoie la valeur maximale du tableau (100) de votre console.

d3.extent (tableau)

Il renvoie la valeur minimale et maximale du tableau donné.

Example - Considérez le script suivant.

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

Result - Le script ci-dessus renvoie une valeur d'extension [20,100].

d3.sum (tableau)

Il renvoie la somme du tableau de nombres donné. Si le tableau est vide, il renvoie 0.

Example - Considérez ce qui suit ci-dessous.

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

Result - Le script ci-dessus renvoie la valeur de la somme est 300.

d3.mean (tableau)

Il renvoie la moyenne du tableau de nombres donné.

Example - Considérez ce qui suit ci-dessous.

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

Result - Le script ci-dessus renvoie la valeur moyenne à 60. De même, vous pouvez vérifier la valeur médiane.

d3.quantile (tableau)

Il renvoie le p-quantile du tableau trié de nombres donné, où p est un nombre compris dans la plage [0, 1]. Par exemple, la médiane peut être calculée en utilisant p = 0,5, le premier quartile à p = 0,25 et le troisième quartile à p = 0,75. Cette implémentation utilise la méthode R-7, le langage de programmation R par défaut et Excel.

Example - Prenons l'exemple suivant.

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

De même, vous pouvez vérifier d'autres valeurs.

d3.variance (tableau)

Il renvoie la variance du tableau de nombres donné.

Example - Considérez le script suivant.

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

Result - Le script ci-dessus renvoie la valeur de la variance comme 1000.

d3.deviation (tableau)

Il renvoie l'écart type du tableau donné. Si le tableau a moins de deux valeurs, il retourne comme indéfini.

Example - Considérez ce qui suit ci-dessous.

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

Result - Le script ci-dessus renvoie la valeur de l'écart sous la forme 31,622776601683793.

Example- Exécutons toutes les méthodes de l'API Array décrites ci-dessus à l'aide du script suivant. Créez une page Web «array.html» et ajoutez-y les modifications suivantes.

<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>

Maintenant, demandez le navigateur et nous verrons la réponse suivante.

Méthodes de l'API Array Search

Voici quelques méthodes d'API de recherche Array importantes.

d3.scan(array)
d3.ascendant (a, b)

Comprenons ces deux en détail.

d3.scan (matrice)

Cette méthode est utilisée pour effectuer une analyse linéaire du tableau spécifié. Il renvoie l'index du moindre élément au comparateur spécifié. Un exemple simple est défini ci-dessous.

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.ascendant (a, b)

Cette méthode est utilisée pour exécuter la fonction de comparateur. Il peut être implémenté comme -

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

Si aucune fonction de comparateur n'est spécifiée dans la méthode de tri intégrée, l'ordre par défaut est alphabétique. La fonction ci-dessus renvoie -1, si a est inférieur à b, ou 1, si a est supérieur à b, ou 0.

De même, vous pouvez exécuter la méthode décroissante (a, b). Elle renvoie -1, si a est supérieur à b, ou 1, si a est inférieur à b, ou 0. Cette fonction effectue un ordre naturel inverse.

Example -

Créer une page Web array_search.html et ajoutez-y les modifications suivantes.

<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>

Maintenant, demandez le navigateur et nous verrons le résultat suivant.

API de transformation de tableau

Voici quelques-unes des méthodes API les plus importantes pour les transformations de tableaux.

d3.cross (a, b [, réducteur])
d3.merge(arrays)
d3.pairs (tableau [, réducteur])
d3.permute (tableau, index)
d3.zip(arrays)

Comprenons chacun de ces éléments en détail.

d3.cross (a, b [, réducteur])

Cette méthode est utilisée pour renvoyer le produit cartésien des deux tableaux a et b donnés. Un exemple simple est défini ci-dessous.

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

d3.merge (tableaux)

Cette méthode est utilisée pour fusionner les tableaux et elle est définie ci-dessous.

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

d3.pairs (tableau [, réducteur])

Cette méthode est utilisée pour appairer des éléments de tableau et est définie ci-dessous.

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

d3.permute (tableau, index)

Cette méthode est utilisée pour effectuer la permutation à partir du tableau et des index spécifiés. Vous pouvez également exécuter les valeurs d'un objet dans un tableau. Cela est expliqué ci-dessous.

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

d3.zip (tableaux)

Cette méthode est utilisée pour renvoyer un tableau de tableaux. Si les tableaux ne contiennent qu'un seul tableau, le tableau renvoyé contient des tableaux à un élément. Si aucun argument n'est spécifié, le tableau retourné est vide. Il est défini ci-dessous.

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

Example - Créer une page Web array_transform et ajoutez-y les modifications suivantes.

<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>

Maintenant, demandez le navigateur et nous verrons la réponse suivante.

↰ Previous page Next page ↱

D3.js - API Array

Qu'est-ce qu'un tableau?

Configurer l'API

Méthodes de l'API Array Statistics

d3.min (tableau)

d3.max (tableau)

d3.extent (tableau)

d3.sum (tableau)

d3.mean (tableau)

d3.quantile (tableau)

d3.variance (tableau)

d3.deviation (tableau)

Méthodes de l'API Array Search

d3.scan (matrice)

d3.ascendant (a, b)

API de transformation de tableau

d3.cross (a, b [, réducteur])

d3.merge (tableaux)

d3.pairs (tableau [, réducteur])

d3.permute (tableau, index)

d3.zip (tableaux)

Tutoriel D3.js