Visualização de dados com D3 (Português)

até agora os dados estavam incluídos no ficheiro script.js. É possível (e até recomendado) colocar os seus dados num ficheiro separado.

D3 aceita muitos formatos de ficheiro de dados: CSV, TSV, JSON…(se necessário, para saber mais sobre estes formatos, verifique estas actividades).

D3 fornece métodos para recuperar estes dados:

  • o método d3.csv() recupera dados em formato CSV
  • o método d3.O método tsv() recupera dados em formato TSV
  • o método d3.json() recupera dados em formato JSON

Em todos os casos, estes métodos aceitam dois parâmetros: o caminho para o ficheiro que contém os dados e uma função anónima.

A função anónima é uma função de retorno, será executada assim que os dados estiverem “prontos”.

Faça você mesmo 12.1

Download do ficheiro data.csv

Abrir com uma folha de cálculo ou editor de texto.

No resto desta actividade utilizaremos o ficheiro data.csv, coloque-o no mesmo directório que o ficheiro script.js

Faça-o você mesmo 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") });}); 

Analisar e testar este código

A função de retorno (d3.csv(“data.csv”,function(data)) toma um parâmetro: data, este parâmetro contém os “dados” que acabaram de ser descarregados.

No .text(function(d,i) o parâmetro d, corresponde a uma linha no ficheiro CSV (a primeira linha corresponde aos cabeçalhos das colunas). Existem tantas &ltp&gl tags como existem linhas no ficheiro CSV (excepto para a linha que contém os cabeçalhos). d.day recupera os dados contidos na coluna que tem o dia como cabeçalho (o mesmo para d.nbre_visitors).

Div>Dividamos a estrutura dos dados. No nosso caso, temos:

 

Como pode ver, temos um conjunto de objectos JavaScript. Cada objecto na matriz corresponde a uma linha no ficheiro CSV.

Nas funções de retorno de chamada o parâmetro d corresponde a um dos objectos da matriz, pelo que a utilização da notação pontilhada (por exemplo, d.nbre_visitors) faz sentido.

Para fazer você mesmo 12,3

Usando o que acabou de ser visto, complete o programa seguinte de modo a exibir o 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 pode ver, temos um ligeiro problema uma vez que obtemos uma concatenação em vez de uma soma.

Os valores da matriz de dados são considerados strings e não números. Veremos um pouco mais tarde como resolver este problema.

No exemplo acima, utilizámos um laço “clássico” para percorrer todos os elementos da matriz, D3js oferece outra solução com dados.forEach

Para se fazer a si próprio 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");}); 

Analizar e testar este código

Como se pode ver, forEach é um método que toma como parâmetro uma função anónima. Esta função anónima toma como parâmetro d o que corresponde a um elemento dos dados da matriz. forEach permite fazer loop sobre todos os elementos da matriz.

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

é equivalente a

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

Ainda temos de resolver o problema de concatenação (d.nbre_visitors é uma string não é um número).

Aqui também, D3js facilita a nossa vida fornecendo uma “instrução” para “automaticamente” transformar a string num número (quando possível, claro):

d.nbre_visiteurs= +d.nbre_visiteurs 

permite transformar as strings em números em toda a matriz de dados.

Para se fazer 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");}); 

Analizar e testar este código

Como pode ver, tudo funciona normalmente.

Para se fazer 12.6

Usando o ficheiro data.csv, crie um programa para obter isto:

Para o ajudar:

P>Pode construir sobre o que foi feito na Actividade 8 (“Do it yourself 8.5”)

P>Pode evitar ter de escrever todos os dias da semana:

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

por escrito:

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

data.map(function(d,i) { return d.day; }) retorna um array

p>Similiarmente, uma vez que pode não saber o valor máximo, é possível substituir:

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

with:

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

d3.max(data, function(d,i) { return d.nbre_visitors; }) é equivalente a .domain(). O método d3.max devolve o valor máximo.

Como já foi dito acima, também é possível trabalhar com dados em formatos TSV ou JSON, o princípio é exactamente o mesmo.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *