D3.js – Gerando gráficos em Javascript

Você já ouviu falar no D3.js? Não? Você precisa criar um gráfico no front end de maneira simples e flexível? Sim? Então este post é para você!

Que bom que você se interessou pelo assunto abrindo este post! Para deixar você ainda mais animado antes de continuar lendo, veja o vídeo abaixo. Ele mostra o poder do D3.js, que é o assunto desta página.

Para provar que tudo isso acontece no navegador, veja a versão online aqui.

SAPUI5 vs OpenUI5

Os termos SAPUI5 e OpenUI5 quase sempre querem dizer a mesma coisa, mas é importante ressaltar que estas são duas bibliotecas diferentes (apesar do core ser exatamente o mesmo). O modelo de licença de ambas também é diferente, sendo o OpenUI5 – adivinhe, Open Source. Mas tecnicamente falando, qual a diferença entre as duas?

O SAPUI5 tem uma biblioteca gráfica enquanto o OpenUI5 não tem (pelo menos até a data que este post é escrito). A parte gráfica do SAPUI5 é conhecida como sap.viz, pois é o nome do pacote no qual as classes de gráficos estão. Um dos primeiros posts aqui no HanaBrasil foi justamente como criar gráficos usando o sap.viz do SAPUI5.

Mas isso quer dizer que não é possível criar gráficos em aplicações OpenUI5? É possível, mas você precisará de uma biblioteca a parte já que o sap.viz não está no OpenUI5. E quais são as possibilidades?

Bibliotecas gráficas em Javascript

As opções são diversas. Divulgo aqui uma lista de bibliotecas que pode ser encontrada no livro “Interactive Data Visualization for the Web” – de Scoot Murray. Eu não explicarei os detalhes de cada uma (até porque nunca usei todas elas) mas fica a seu critério o interesse em testar cada uma delas.

Geradores de gráficos

Geradores de Grafos

Geomapping

From scratch (criando gráficos do zero)

3D

D3.js

d3js logo

Como você pode ter notado, opções não faltam. A lista também não é exaustiva. Estamos ainda somente falando de Javascript. Mas por que focar no D3.js?

Basicamente, ele é criado por quem entende do assunto e nasceu da evolução de outras bibliotecas que tinham a mesma finalidade. O D3 dá liberdade total ao desenvolvedor e está muito além de um mero gerador de gráficos.

Recomendo muito olhar os exemplos de gráficos feitos em D3.js para ter uma noção do que é possível.

Ainda, se você baixar o fonte do OpenUI5 vai notar que na pasta “thirdparty” o D3.js já está lá. Ou seja, a própria SAP usa o D3 em aplicações dela. E acredite, não é por acaso.

D3.js + OpenUI5

A SCN ainda carece de exemplos de aplicações feitas em OpenUI5 que usam o D3. Em algum blog achei este JSBin que mostra uma integração bem legal entre o OpenUI5 e o D3. Vale a pena conferir!

Livros sobre D3.js

Leave a Reply

Your email address will not be published. Required fields are marked *