Podemos cargar datos externos usando d3.json, d3.csv, d3.tsv o d3.xml. Estas funciones reciben la URL del archivo de datos y una función callback, que será invocada una vez que el archivo de datos sea descargado completamente.
Cuando abrimos un archivo html, el browser lo abre usando el protocolo file://. Debido a consideraciones de seguridad, el browser no permite usar las funciones tipo d3.json.
Para poder cargar datos externos, se debe acceder al archivo html usando un servidor. Podemos servir el contenido de un directorio usando python o algún otro servidor estático.
// Sirve el directorio actual en http://localhost:8000
// python -m SimpleHTTPServer
Archivos JSON
JSON es un formato de archivos usado para serializar objetos JavaScript. Por ejemplo, los datos de los alimentos ahora están en un archivo JSON.
Esta es la manera de cargar un archivo JSON:
d3.json('/assets/data/food.json', function(error, data) {
// Se lanza un error si el archivo no es accesible o si no se puede procesar
if (error) { console.error(error); }
console.log(data);
});
Esta función es asíncrona, esto quiere decir que mientras los datos se bajan, el script JavaScript se sigue ejecutando.
// Declaramos la variable data en el contexto global
var food;
// Cargamos los datos usando `d3.json`
d3.json('/assets/data/food.json', function(error, data) {
// Se lanza un error si el archivo no es accesible o si no se puede procesar
if (error) {
console.error(error);
}
food = data;
console.log('[callback] food =', food);
});
// En este punto, la variable `food` no está definida aun
console.log('[script] food =', food);
Archivos CSV
Para cargar un archivo CSV, el código es similar. En este caso, el archivo CSV contiene datos de países.
Lamentablemente, hay que convertir los campos numéricos manualmente, porque CSV no especifica el formato de cada columna. Pero se pueden convertir fácilmente.
d3.csv('/assets/data/wbdata.csv', function(error, data) {
if (error) { console.error(error); }
// Convertimos los campos numericos a numero
data.forEach(function(d) {
d.GDP = +d.GDP;
d.LifeExpectancy = +d.LifeExpectancy;
d.Population = +d.Population;
d.GDPCapita = +d.GDPCapita;
});
console.log(data);
});
Con los datos ya cargados, podemos usar los gráficos reutilizables de la sección anterior. Por ejemplo, podemos configurar el barchart para usar estos nuevos datos.
Cargamos los datos nuevamente, y agregamos botones para visualizar distintas variables. Recordar que hay que agregar callbacks para el evento click de cada botón.