d3.js
Utiliser D3 avec JSON et CSV

Syntaxe

• d3.csv (URL [[, ligne], rappel])
• d3.tsv (url [[, ligne], rappel])
• d3.html (url [, callback])
• d3.json (url [, callback])
• d3.text (url [, callback])
• d3.xml (url [, callback])

Chargement de données à partir de fichiers CSV

Il existe plusieurs façons d'obtenir les données que vous allez lier aux éléments DOM. Le plus simple est d'avoir vos données dans votre script en tant que tableau ...

var data = [ ... ];

Mais D3.js nous permet de charger des données à partir d'un fichier externe. Dans cet exemple, nous verrons comment charger et traiter correctement les données d'un fichier CSV.

Les fichiers CSV sont des valeurs séparées par des virgules . Dans ce type de fichier, chaque ligne est un enregistrement de données, chaque enregistrement consistant en un ou plusieurs champs, séparés par des virgules. Il est important de savoir que la fonction que nous allons utiliser, d3.csv , utilise la première ligne du d3.csv CSV comme en- tête , c'est-à-dire la ligne contenant les noms des champs.

Alors, considérez ce CSV, nommé "data.csv":

city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70

Pour charger "data.csv", nous utilisons la fonction d3.csv . Pour simplifier, supposons que "data.csv" se trouve dans le même répertoire que notre script et que son chemin relatif est simplement "data.csv". Donc, nous écrivons:

d3.csv("data.csv", function(data){
    //code dealing with data here
});

Notez que, dans le rappel, nous avons utilisé des data comme argument. C'est une pratique courante dans D3, mais vous pouvez utiliser n'importe quel autre nom.

Que fait d3.csv avec notre CSV? Il convertit le CSV dans un tableau d'objets. Si, par exemple, nous console.log nos données:

d3.csv("data.csv", function(data){
    console.log(data)
});

C'est ce que nous allons voir:

[
    {
        "city": "New York",
        "population": "3400",
        "area": "210"
    },{
        "city": "Melbourne",
        "population": "1200",
        "area": "350"
    },{
        "city": "Tokyo",
        "population": "5200",
        "area": "125"
    },{
        "city": "Paris",
        "population": "800",
        "area": "70"
    }
]

Nous pouvons maintenant lier ces données à nos éléments DOM.

Notez que, dans cet exemple, la population et la area sont des chaînes. Mais, probablement, vous voulez les traiter en chiffres. Vous pouvez les changer dans une fonction dans le callback (en tant que forEach ), mais dans d3.csv vous pouvez utiliser une fonction "accessor":

d3.csv("data.csv", conversor, function(data){
    //code here
});

function conversor(d){
    d.population = +d.population;
    d.area = +d.area;
    return d;
}

Vous pouvez également utiliser des accesseurs dans d3.tsv , mais pas dans d3.json .

Remarque: d3.csv est une fonction asynchrone, ce qui signifie que le code après sera exécuté immédiatement avant même le chargement du fichier CSV. Donc, une attention particulière pour l'utilisation de vos data dans le rappel.

Un ou deux paramètres dans le rappel - gestion des erreurs dans d3.request ()

Lorsque vous utilisez d3.request() ou l'un des constructeurs de commodité ( d3.json , d3.csv , d3.tsv , d3.html et d3.xml ), il existe de nombreuses sources d'erreur. Il peut y avoir des problèmes avec la demande émise ou sa réponse en raison d'erreurs de réseau, ou l'analyse peut échouer si le contenu n'est pas bien formé.

Dans les rappels passés à l'une des méthodes mentionnées ci-dessus, il est donc souhaitable de mettre en œuvre une gestion des erreurs. À cette fin, les rappels peuvent accepter deux arguments, le premier étant l'erreur, le cas échéant, le second étant les données. Si une erreur est survenue lors du chargement ou de l'analyse, des informations sur l'erreur seront transmises en tant que première error argument error les data étant null .

d3.json{"some_file.json", function(error, data) {
  if (error) throw error;   // Exceptions handling
  // Further processing if successful
});

Vous n'êtes pas obligé de fournir deux paramètres. Il est parfaitement correct d'utiliser les méthodes de requête avec un rappel ne comportant qu'un seul paramètre. Pour gérer ces types de rappels, il existe une fonction privée fixCallback() dans request.js, qui ajuste la façon dont les informations sont transmises à l'argument unique de la méthode.

function fixCallback(callback) {
  return function(error, xhr) {
    callback(error == null ? xhr : null);
  };
}

Ceci sera invoqué par D3 pour tous les rappels ayant un seul paramètre, qui par définition sont les données.

Quel que soit le nombre de paramètres fournis au rappel de la méthode de requête, la règle pour le paramètre data est la suivante:

• si la requête échoue, les data seront null
• si la demande réussit, les data contiendront le contenu chargé (et analysé)

La seule différence entre la version à un paramètre et la version à deux paramètres réside dans la manière dont les informations sont fournies sur l'erreur pouvant survenir. Si le paramètre error est omis, la méthode échouera silencieusement, laissant les data à la valeur null . Si, par contre, le callback est défini pour avoir deux arguments, les informations sur une erreur lors du chargement ou de l'analyse seront transmises au premier paramètre pour vous permettre de le gérer correctement.

Les quatre appels suivants à d3.json illustrent les scénarios possibles pour les fichiers existants / non existants par rapport à un paramètre / deux paramètres de rappel:

// FAIL: resource not available or content not parsable
// error contains information about the error
// data will be null because of the error
d3.json("non_existing_file.json", function(error, data) {
  console.log("Fail, 2 parameters: ", error, data);
});

// FAIL: resource not available or content not parsable
// no information about the error
// data will be null because of the error
d3.csv("non_existing_file.json", function(data) {
  console.log("Fail, 1 parameter: ", data);
});

// OK: resource loaded successfully
// error is null
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(error, data) {
  console.log("OK, 2 parameters: ", error, data);
});

// OK: resource loaded successfully
// no information about the error; this fails silently on error
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(data) {
  console.log("OK, 1 parameter: ", data);
});