Visualización de datos con D3 (Español)

Hasta ahora los datos se incluían en el archivo script.js. Es posible (e incluso recomendable) poner sus datos en un archivo separado.

D3 acepta muchos formatos de archivos de datos: CSV, TSV, JSON…(si lo necesita, para aprender más sobre estos formatos, consulte estas actividades).

D3 proporciona métodos para recuperar estos datos:

  • el método d3.csv() recupera los datos en formato CSV
  • el método d3.tsv() recupera los datos en formato TSV
  • el método d3.json() recupera los datos en formato JSON
  • En todos los casos, estos métodos aceptan dos parámetros: la ruta del archivo que contiene los datos y una función anónima.

    La función anónima es una función de devolución de llamada, se ejecutará en cuanto los datos estén «listos».

    Hazlo tú mismo 12.1

    Descarga el archivo data.csv

    Abrelo con una hoja de cálculo o un editor de texto.

    En el resto de esta actividad utilizaremos el archivo data.csv, colócalo en el mismo directorio que el archivo script.js

    Hazlo tú mismo 12.2

    script.js

var body=d3.select("body");d3.csv("donnees.csv",function(data){ var para=body.selectAll("p").data(data); para.enter() .append("p") .text(function(d,i){ return ("Le "+d.jour+" il y a eu "+d.nbre_visiteurs+" visiteurs") });}); 

Analiza y prueba este código

La función callback (d3.csv(«data.csv»,function(data)) toma un parámetro: data, este parámetro contiene los «datos» que se acaban de descargar.

En la función .text(d,i) el parámetro d, corresponde a una fila del archivo CSV (la primera fila corresponde a las cabeceras de las columnas). Hay tantas etiquetas &ltp&gl como filas hay en el archivo CSV (excepto la fila que contiene las cabeceras). d.day recupera los datos contenidos en la columna que tiene el día como cabecera (lo mismo para d.nbre_visitors).

Desglosemos una la estructura de los datos. En nuestro caso, tenemos:

 

Como puedes ver, tenemos un array de objetos JavaScript. Cada objeto del array se corresponde con una fila del fichero CSV.

En las funciones de callback el parámetro d se corresponde con uno de los objetos del array, por lo que utilizar la notación de puntos (por ejemplo, d.nbre_visitors) tiene sentido.

Para hacer tú mismo 12.3

Utilizando lo que se acaba de ver, completa el siguiente programa para que muestre el número total de visitantes.

 var body=d3.select("body");d3.csv("donnees.csv", function(data) {var somme=0;for (i=0;i&ltdata.length;i++){.....................}body.append("p").text("Il y a eu "+somme+" visiteurs");}); 

Como puedes ver, tenemos un pequeño problema ya que obtenemos una concatenación en lugar de una suma.

Los valores del array de datos se consideran cadenas y no números. Veremos un poco más adelante cómo resolver este problema.

En el ejemplo anterior, hemos utilizado un bucle «clásico» para recorrer todos los elementos del array, D3js ofrece otra solución con datos.forEach

Para hacer tú mismo 12.4

script.js

var body=d3.select("body");d3.csv("donnees.csv", function(data) {var somme=0;data.forEach(function(d){somme=somme+d.nbre_visiteurs;});body.append("p").text("Il y a eu "+somme+" visiteurs");}); 

Analiza y prueba este código

Como puedes ver, forEach es un método que toma como parámetro una función anónima. Esta función anónima toma como parámetro d que corresponde a un elemento del array data. forEach permite hacer un bucle sobre todos los elementos del array.

data.forEach(function(d){ somme=somme+d.nbre_visiteurs;}); 

Es equivalente a

for (i=0;i&ltdata.length;i++){ somme=somme+data.nbre_visiteurs;} 

Todavía tenemos que resolver el problema de concatenación (d.nbre_visitors es una cadena no un número).

Aquí también, D3js nos facilita la vida proporcionando una «instrucción» para transformar «automáticamente» la cadena en un número (cuando sea posible, por supuesto):

d.nbre_visiteurs= +d.nbre_visiteurs 

permite transformar las cadenas en números en todo el array de datos.

Para hacer tú mismo 12.5

script.js

var body=d3.select("body");d3.csv("donnees.csv", function(data) {var somme=0;data.forEach(function(d){ d.nbre_visiteurs= +d.nbre_visiteurs;somme=somme+d.nbre_visiteurs;});body.append("p").text("Il y a eu "+somme+" visiteurs");}); 

Analiza y prueba este código

Como puedes ver, todo funciona con normalidad.

Para hacer tú mismo 12.6

Utilizando el archivo data.csv, crea un programa para obtener esto:

Para ayudarte:

Puedes basarte en lo realizado en la actividad 8 («Hazlo tú mismo 8.5»)

Se puede evitar tener que escribir todos los días de la semana:

var echelleX=d3.scale.ordinal() .domain() .rangeBands(); 

escribiendo:

var echelleX=d3.scale.ordinal() .rangeBands();....................echelleX.domain(data.map(function(d,i) { return d.jour; })); 

data.map(function(d,i) { return d.day; }) devuelve un array

De forma similar, ya que se puede desconocer el valor máximo, es posible sustituir:

var echelleY=d3.scale.linear() .domain() .range(); 

por:

var echelleY=d3.scale.linear() .range();....................echelleY.domain(); 

d3.max(data, function(d,i) { return d.nbre_visitors; }) es equivalente a .domain(). El método d3.max devuelve el valor máximo.

Como ya se ha dicho anteriormente, también es posible trabajar con datos en formato TSV o JSON, el principio es exactamente el mismo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *