freeCodeCamp/guide/portuguese/d3/index.md

68 lines
2.8 KiB
Markdown
Raw Normal View History

---
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
* * *