Blog

Conheça a biblioteca D3.js

facestory

Uma nova biblioteca JavaScript para manipulação de dados em gráficos dinâmicos está trazendo novas possibilidades. Veja como funciona o que ela tem de melhor

Por Felipe de Sousa

A nova sensação da web em questões de bibliotecas JavaScript acabou de dar as caras. O D3.js é uma biblioteca que permite manipular dados gerando gráficos usando HTML, SVG e CSS. Com essa nova forma de manipulação, os desenvolvedores não precisam gastar linhas e mais linhas de código, já que o D3 associa os dados ao Document Object Model (DOM) e aplica as transformações baseadas em documentos.

Programadores familiarizados com outras estruturas DOM, como JQuery ou Prototype, devem se acostumar sem dificuldades com o D3, por conta das inúmeras semelhanças entre eles. A nova biblioteca age diretamente no problema que muitos desenvolvedores tem para criar gráficos em páginas web: ele manipula os documentos com base em dados. Isso evita a representação exclusiva e oferece uma grande flexibilidade, expondo as capacidades dos padrões da web, como CSS3, HTML5 e SVG. O D3 possui sobrecarga mínima e suporta grandes conjuntos de dados e comportamentos dinâmicos de interação e animação.

A biblioteca não é uma nova representação gráfica. Ao contrário de outras, o D3 utiliza diretamente padrões web, como o HTML, SVG e o CSS. Isso permite que, mesmo que os desenvolvedores de navegadores introduzam novas funcionalidades futuramente, você poderá utilizá-las sem problema algum sem precisar atualizar o kit de ferramentas necessário.

Apesar de ser uma nova ferramenta para JavaScritpt, o D3 parece ser um bom aliado para quem necessita lançar mão de muitos gráficos em páginas da web. A biblioteca consegue, de uma forma simples e poderosa, plotar gráficos diferentes, e muito bonitos visualmente, com uma facilidade incrível e sem exigir muito do navegador. Excelente para os padrões atuais, nos quais não se deve sobrecarregar o navegador e fazer os usuários esperarem para ver conteúdo.

facestory

O www.facebookstories.com usa a tecnologia. O desenvolvedor responsável pela página, Mike Byrne, usou o D3.js para ajudar no mapeamento e animações do site

Veja outros exemplos de representação de dados do site oficial do D3.js:

Comente