Observatório de dados/BI/D3.js
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 | editar código-fonte]
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 | editar código-fonte]
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 | editar código-fonte]
- https://d3js.org
- D3 vs JQuery - https://stackoverflow.com/a/16290975
- Tutoriais:
- https://www.codewall.co.uk/getting-started-with-nvd3-js
- https://d3js.org/#properties
- Array rearranjada em D3.bin para histogramas e distribuições https://observablehq.com/@d3/d3-bin?collection=@d3/d3-array
- Representação básica de histograma https://observablehq.com/@d3/histogram
- Demos:
- https://gerardofurtado.com/demos.html
- https://jsfiddle.net/xameeramir/zcgLybpd/
- ...
- (time series chart) Convert ISO Date to a scale.ordinal(), see http://jsfiddle.net/ee2todev/3Lu46oqg/
- An NVD3 example, http://nvd3.org/livecode/index.html#codemirrorNav