d3.js
Usando D3 con JSON y CSV

Sintaxis

• d3.csv (url [[, fila], devolución de llamada])
• d3.tsv (url [[, fila], devolución de llamada])
• d3.html (url [, devolución de llamada])
• d3.json (url [, devolución de llamada])
• d3.text (url [, devolución de llamada])
• d3.xml (url [, devolución de llamada])

Cargando datos de archivos CSV

Hay varias formas de obtener los datos que enlazará con los elementos DOM. La más simple es tener tus datos en tu script como una matriz ...

var data = [ ... ];

Pero D3.js nos permite cargar datos desde un archivo externo. En este ejemplo, veremos cómo cargar y tratar adecuadamente los datos de un archivo CSV.

Los archivos CSV son valores separados por comas . En este tipo de archivo, cada línea es un registro de datos, cada registro consta de uno o más campos, separados por comas. Es importante saber que la función que estamos a punto de usar, d3.csv , usa la primera línea del CSV como encabezado , es decir, la línea que contiene los nombres de los campos.

Entonces, considera este CSV, llamado "data.csv":

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

Para cargar "data.csv", usamos la función d3.csv . Para hacerlo más fácil, suponga que "data.csv" está en el mismo directorio de nuestro script, y su ruta relativa es simplemente "data.csv". Entonces, escribimos:

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

Observe que, en la devolución de llamada, usamos los data como un argumento. Esa es una práctica común en D3, pero puedes usar cualquier otro nombre.

¿ d3.csv hace d3.csv con nuestro CSV? Convierte el CSV en una matriz de objetos. Si, por ejemplo, console.log nuestros datos:

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

Esto es lo que vamos a ver:

[
    {
        "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"
    }
]

Ahora podemos enlazar esos datos a nuestros elementos DOM.

Observe que, en este ejemplo, la population y el area son cadenas. Pero, probablemente, quieras tratarlos como números. Puede cambiarlos en una función dentro de la devolución de llamada (como forEach ), pero en d3.csv puede usar una función de "acceso":

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

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

También puede usar los d3.tsv en d3.tsv , pero no en d3.json .

Nota: d3.csv es una función asíncrona, lo que significa que el código después de que se ejecute inmediatamente, incluso antes de que se cargue el archivo CSV. Por lo tanto, una atención especial para el uso de sus data dentro de la devolución de llamada.

Uno o dos parámetros en la devolución de llamada: manejo de errores en d3.request ()

Cuando se usa d3.request() o uno de los constructores de conveniencia ( d3.json , d3.csv , d3.tsv , d3.html y d3.xml ) hay muchas fuentes de error. Puede haber problemas con la solicitud emitida o su respuesta debido a errores de red, o el análisis podría fallar si el contenido no está bien formado.

Dentro de las devoluciones de llamadas pasadas a cualquiera de los métodos mencionados anteriormente, es conveniente, por lo tanto, implementar algún manejo de errores. Para este propósito, las devoluciones de llamada pueden aceptar dos argumentos, el primero es el error, si hay alguno, el segundo son los datos. Si se produjo algún error durante la carga o el análisis, la información sobre el error se pasará como primer error argumento con los data null .

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

Usted, en todo caso, no está obligado a proporcionar dos parámetros. Está perfectamente bien usar los métodos de solicitud con una devolución de llamada que presenta solo un parámetro. Para manejar este tipo de devoluciones de llamada, hay una función privada fixCallback() en request.js, que ajusta la forma en que se pasa la información al único argumento del método.

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

Esto será invocado por D3 para todas las devoluciones de llamada que tengan un solo parámetro, que por definición son los datos.

No importa cuántos parámetros se proporcionen a la devolución de llamada del método de solicitud, la regla para el parámetro de data es:

• Si la solicitud falla, los data serán null
• Si la solicitud tiene éxito, los data contendrán los contenidos cargados (y analizados)

La única diferencia entre la versión de un parámetro y la versión de dos parámetros es la forma en que se proporciona la información sobre el error que puede ocurrir. Si se omite el parámetro de error , el método fallará silenciosamente dejando los data como null . Si, por otro lado, la devolución de llamada está definida para tener dos argumentos, la información sobre un error durante la carga o el análisis se pasará al primer parámetro que le permitirá manejarlo adecuadamente.

Las siguientes cuatro llamadas a d3.json demuestran los escenarios posibles para archivos existentes / no existentes frente a un parámetro / dos devoluciones de llamada de parámetros:

// 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);
});