Wikiversidade

Observatório de dados/BI/D3.js

< Observatório de dados‎ | BI
Ferramentas de BI:
Componentes

Componente de ferramenta de BI. D3.js, Data-Driven DOM.

O D3 é utilizado principalmente como framework na construção de visualizações especiais e interativas. Para gráficos padronizados (convention over configuration), preferir usar uma "camada acima do D3", NVD3 http://nvd3.org

Carga de CSV editar

A carga de arquivo CSV para poder usar, por exemplo, como array em um gráfico simples, é direta com a função d3.csv(url[[, row], callback]). De qualquer forma, é importante ficar de olho nos problemas com CORS (Cross-origin resource sharing), quando o arquivo CSV se encontra em URL de domínio diferente. 

 const url_dadosCSV = 'https://raw.githubusercontent.com/specialisterne-br/observatorio-dados/master/exemplos01/exemplo01-bom.csv'
 const url_allowCORS = ''; //'https://cors-anywhere.herokuapp.com/' // D3 tem seu próprio allow CORS embutido!
 d3.csv( url_allowCORS + url_dadosCSV,  data => console.log(data) );
 // ver também d3.csvParse() para CSV fornecido por string.

Como a maior parte das soluções de carga de dados em Javascript é assíncrona, deve-se tomar o cuidado de fazer a chamada ao d3.csvParse() (ou uma renderização de dados) somente depois que os dados do CSV foram carregados na array.

Gráfico de barras editar

Suponhamos que o gráfico seja construído sobre SVG, por exemplo uma tag vazia <svg width='200' height='500'></svg>. Existem várias opções, algumas muito parecidas com o G-Charts, mas o diferencial de se usar D3 é a possibilidade de construir cada elemento do gráfico. Vejamos que mesmo neste caso aparenmente complexo, ainda é simples (explicações aqui). Continuando o caso anterior, substituindo o console pela visualização do gráfico: 

 d3.csv( url_allowCORS + url_dadosCSV,  data => {
	var lst = data.map(x=>x['T']); // usando a coluna C, experimente T
	var bar = d3.select('svg');    // o gráfico será renderizado na primeira <svg>
	var barHeight = bar.attr('height')/lst.length;
	if (barHeight<2.0) barHeight=2
	else barHeight=Math.round(barHeight);
	bar
	 .selectAll('rect') // se tiver <rect> usa, senao tudo bem...
	 .data(lst)
	 .enter()
	 .append('rect')   // inclui <rect> quando nao tem.
	 .attr('width',     d=> d  )
	 .attr('height',    barHeight - 1)
	 .attr('transform', (d,i)=> `translate(0,${i*barHeight})`  )
	;
 });

Links externos editar

Obtida de "https://pt.wikiversity.org/w/index.php?title=Observatório_de_dados/BI/D3.js&oldid=118338"