---
title: D3
localeTitle: D3
---
# D3: documentos orientados por dados

**Documentos controlados por dados** (D3.js) é uma biblioteca JavaScript para produzir visualizações de dados dinâmicas e interativas em navegadores da web. **A** API **D3.js** contém vários métodos que podem ser agrupados nas seguintes unidades lógicas - _Seleções_ , _Transições_ , _Matrizes_ , _Matemática_ , _Cor_ , _Escalas_ , _SVG_ , _Tempo_ , _Layouts_ , _Geografia_ , _Geometria_ , _Comportamentos_ .

![Logo D3.js](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/d3.jpg?w=312&h=161)

**O D3.js** ajuda você a visualizar dados combinando técnicas poderosas de visualização e interação com uma abordagem baseada em dados para manipulação de DOM. Ele também fornece recursos completos de navegadores modernos, projetando a interface visual correta para seus dados.

**D3.js** version 1.0.0 foi lançado em 18 de fevereiro de 2011.

## Por que, D3.js?

_D3_ \* não introduz uma nova representação visual. Ao contrário do **Processing** , **Raphaël** ou **Protovis** , _o_ vocabulário de marcas gráficas _do D3_ vem diretamente dos padrões web: HTML, SVG e CSS - https://d3js.org/

###### Iniciar

Existem mais de **20.000 +** exemplos de **D3.js com os quais** você pode aprender, mas você nunca sabe o quão acessível qualquer um será! Então, a questão é: como você constrói sua visualização a partir dos primeiros princípios? Como você provavelmente já viu, a API do D3 é enorme, então vamos falar sobre alguns dos utilitários que serão particularmente úteis no início:

*   **d3-scale**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/scale.png?w=400&h=100)

*   **d3-shape**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/shape.png?w=400&h=100)

*   **d3-selection**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/selection.gif?w=400&h=100)

*   **d3-collection**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/collection.png?w=400&h=100)

*   **hierarquia d3**

![](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/hierarchy.png?w=400&h=100)

*   **d3-zoom**

![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/zoom.gif?w=400&h=100)

*   **d3-force**

![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/force.gif?w=400&h=100)

Assim, com apenas alguns conhecimentos básicos dos recursos mais recentes do HTML5, como o SVG, o Canvas, você pode mergulhar em um mundo onde a biblioteca como o **D3.js** traz dados para a vida! ###### Contribuição

*   https://github.com/d3/
    
    ### Recursos
    
*   https://en.wikipedia.org/wiki/D3.js
    
*   https://en.wikipedia.org/wiki/Document _Object_ Model
    
*   http://blockbuilder.org/search
    
*   https://d3indepth.com/
    
*   https://davidwalsh.name/learning-d3
    

* * *