12 - Types de données

Lien vers le tutoriel original : http://alignedleft.com/tutorials/d3/data-types

Types de données

Dernière mise à jour le 30 décembre 2012

D3 est vraiment flexible pour ce qui est des données en entrée. Cet article introduit les structures de D3 communément utilisées avec JavaScript et D3.

Variables

Une variable est le plus petit élément de données. La variable est le fondement de toutes les autres structures de données, qui sont juste différentes configurations de variables.

Si vous êtes nouveau en JavaScript, sachez que c’est un langage faiblement typé, ce qui veut dire que vous n’avez pas besoin de spécifier quel type d’information sera stocké dans une variable à l’avance. Beaucoup d’autres langages, comme Java (qui est complètement différent de JavaScript !), requièrent que vous déclariez un type de données, comme int, float, boolean, ou String.

// Déclarer des variables en Java
int number = 5;
float value = 12.3467;
boolean active = true;
String text = "Crystal clear";

JavaScript, au contraire, assigne automatiquement un type à une variable, en fonction de l’information que vous lui assignez. (Notez que ’‘ ou ”“ indique une chaîne de caractères. Je préfère les guillemets doubles ”“, mais d’autres préfèrent les guillemets simples ’‘.)

// Déclarer des variables en JavaScript
var number = 5;
var value = 12.3467;
var active = true;
var text = "Crystal clear";

Fastidieux — var, var, var, var ! — et pourtant utile, car on peut déclarer et nommer des variables avant même de savoir quels types de données elles vont stocker. Vous pouvez changer le type d’une variable à la volée sans que JavaScript ne flippe (without JavaScript freaking on you).

var value = 100;
value = 99.9999;
value = false;
value = "This can't possibly work.";
value = "Argh, it does work! No errorzzzz!";

Tableaux

Un tableau est une séquence de valeurs, stockée de manière bien pratique dans une simple variable.

Garder une trace de valeurs qui sont apparentées dans des variables séparées n’est pas efficace :

var numberA = 5;
var numberB = 10;
var numberC = 15;
var numberD = 20;
var numberE = 25;

Réécrit en tableau, ces valeurs sont bien plus simples. Les crochets [] indique un tableau, tandis que les valeurs sont séparées par des virgules :

var numbers = [ 5, 10, 15, 20, 25 ];

Les tableaux sont partout en visualisation de données, donc vous devriez devenir plus à l’aise avec eux. Vous pouvez accéder (récupérer) une valeur dans un tableau en utilisant la notation crochets :

numbers[2]  // Retourne 15

Le nombre dans les crochets correspond à une position dans le tableau. Rappelez-vous bien cela, les positions dans un tableau démarrent à zéro, donc la première position est 0, la seconde est 1, et ainsi de suite.

numbers[0]  // Retourne 5
numbers[1]  // Retourne 10
numbers[2]  // Retourne 15
numbers[3]  // Retourne 20
numbers[4]  // Retourne 25

Certaines personnes pourraient trouver utile de penser aux tableaux en termes spaciaux, comme s’ils avaient des lignes et des colonnes, comme dans un tableur :

ID | Valeur
------------
 0  |  5
 1  |  10
 2  |  15
 3  |  20
 4  |  25

Les tableaux peuvent contenir n’importe quel type de données, et pas seulement des entiers.

var percentages = [ 0.55, 0.32, 0.91 ];
var names = [ "Ernie", "Bert", "Oscar" ];

percentages[1]  // Retourne 0.32
names[1]        // Retourne "Bert"

What Arrays Are Made for()

Le titre ci-dessus est un jeu de mots entre l’expression “Ce pourquoi les tableaux sont faits” et la fonction for().

La visualisation de données basée sur du code ne serait pas possible sans tableaux et sans la puissante boucle for(). Ensemble, ils forment le duo dynamique des geeks des données. (Si vous ne vous considérez pas comme un “geek des données,” alors je dois vous rappelez que vous êtes en train de lire un document intitulé “Types de données.”)

Un tableau organise un grand nombre de valeurs dans un seul endroit. Puis for() peut rapidement “itérer” sur chaque valeur dans un tableau et effectuer quelques actions dessus — comme exprimer la valeur dans une forme visuelle. D3 s’occupe souvent de ces boucles pour nous, avec sa méthode magique data(), mais il est important de pouvoir écrire vos propres boucles.

Je n’irai pas dans les détails du fonctionnement des boucles for() ici ; c’est un tutoriel complètement différent. Mais considérez cet exemple, qui itère à travers les valeurs de numbers défini plus haut.

for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);  // Affiche la valeur dans la console
}

Vous voyez ce numbers.length ? C’est ce qui est beau. Si numbers est long de dix valeurs, la boucle sera exécutée dix fois. Si c’est long de dix millions de valeurs … ouais, vous avez pigé. C’est ce pourquoi les ordinateurs sont bons : prendre un ensemble d’instructions et les exécuter encore et encore. Et c’est au coeur même de ce pour quoi la visualisation de données peut être aussi satisfaisante — vous concevez et codez le système de visualisation, et le système répondra de manière appropriée, même si vous lui donnez des données différentes. Les règles de cartographie du système sont cohérentes, même lorsque vos données ne le sont pas.

Objets

Les tableaux sont pratiques pour des listes simples de valeurs, mais avec des ensembles de données plus complexes, vous voudrez mettre vos données dans un objet. Pour notre besoin (la visualisation de données), pensez aux objets JavaScript comme à des structures de données personnalisées. On utilise des accolades {} pour indiquer un objet. Entre les accolades, on met des indices et des valeurs. Deux points : séparent chaque index et sa valeur, et une virgule sépare chaque paire index/valeur.

var fruit = {
    kind: "grape",
    color: "red",
    quantity: 12,
    tasty: true
};

Pour référencer chaque valeur, on utilise la notation à points, en spécifiant le nom de l’index :

fruit.kind      // Retourne "grape"
fruit.color     // Retourne "red"
fruit.quantity  // Retourne 12
fruit.tasty     // Retourne true

Pensez à la valeur comme “appartenant” à l’objet. Oh, regardez, un fruit. “Quelle sorte de fruit c’est ?” vous vous demanderez peut-être. Il se trouve que fruit.kind (kind : sorte) est “grape” (du raisin). “Sont-ils savoureux ?” Oh, certainement, car fruit.tasty est true.

Objets + Tableaux

Vous pouvez combiner ces deux structures pour créer des tableaux d’objets, ou des objets de tableaux, ou des objets d’objets, ou, eh bien, n’importe quelle structure qui aurait du sens pour votre ensemble de données.

Disons que l’on a acquis d’autres fruits, et que l’on veut étendre notre catalogue en conséquence. On utilise les crochets [] à l’extérieur, pour indiquer un tableau, suivis par des accolades {} et la notation objet à l’intérieur, chaque objet étant séparé par des virgules.

var fruits = [
    {
        kind: "grape",
        color: "red",
        quantity: 12,
        tasty: true
    },
    {
        kind: "kiwi",
        color: "brown",
        quantity: 98,
        tasty: true
    },
    {
        kind: "banana",
        color: "yellow",
        quantity: 0,
        tasty: true
    }
];

Pour accéder à ces données, on suit juste la trace des indices jusqu’aux valeurs que l’on veut. Rappelez-vous, [] signifient un tableau, et {} signifie un objet. fruits est un tableau, donc en premier on utilise la notation crochets pour spécifier l’index dans le tableau :

fruit[1]

Ensuite, chaque élément du tableau est un objet, donc on fait suivre les crochets par un point et un index :

fruit[1].quantity   // Retourne 98

Voilà une carte sur la manière d’accéder chaque valeur dans le tableau d’objets fruits :

fruits[0].kind      ==  "grape"
fruits[0].color     ==  "red"
fruits[0].quantity  ==  12
fruits[0].tasty     ==  true

fruits[1].kind      ==  "kiwi"
fruits[1].color     ==  "brown"
fruits[1].quantity  ==  98
fruits[1].tasty     ==  true

fruits[2].kind      ==  "banana"
fruits[2].color     ==  "yellow"
fruits[2].quantity  ==  0
fruits[2].tasty     ==  true

Oui, c’est vrai, nous avons fruits[2].quantity bananes.

JSON

À un certain moment dans votre carrière D3, vous rencontrerez la notation d’objet JavaScript JSON (JavaScript Object Notation). Vous pouvez en lire ici les détails, mais JSON est fondamentalement une syntaxe spécifique pour organiser des données en objets JavaScript. La syntaxe est optimisée pour être utilisée avec JavaScript (évidemment) et les requêtes AJAX, c’est pourquoi vous en verrez un tas dans les APIs basées sur le web qui vous sortent les données en JSON. C’est plus rapide et plus facile à analyser avec JavaScript que XML, et bien sûr D3 fonctionne bien avec.

Malgré tout ça, c’est pas bien différent que ce que l’on a déjà vu :

var jsonFruit = {
    "kind": "grape",
    "color": "red",
    "quantity": 12,
    "tasty": true
};

La seule différence c’est que nos indices sont entourés par des guillemets doubles ”“, les transformant en chaîne de caractères.

GeoJSON

Tout comme JSON est juste une formalisation de la notation objet JavaScript existante, GeoJSON est une syntaxe formalisée d’objets JSON, optimisée pour stocker des geodonnées. Tous les objets GeoJSON sont des objets JSON, et tous les objets JSON sont des objets JavaScript.

GeoJSON peut stocker des points dans un espace géographique (typiquement en coordonnées longitude/latitude), mais aussi des formes (comme des lignes et des polygones) et d’autres éléments spatiaux. Si vous avez beaucoup de géodonnées, il vaut le coût de les transformer au format GeoJSON pour une meilleure utilisation avec D3.

On entrera plus dans les détails de GeoJSON lorsque l’on parlera des mappes (geomaps), mais pour l’instant, sachez juste que le GeoJSON ressemble à ça :

var geodata = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [ 150.1282427, -24.471803 ]
            },
            "properties": {
                "type": "town"
            }
        }
    ]
};

(Ça peut prêter à confusion, la longitude étant toujours listée avant la latitude. Habituez-vous à penser en termes de lon/lat plutôt que lat/lon.)