68 lines
2.8 KiB
Markdown
68 lines
2.8 KiB
Markdown
|
---
|
||
|
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
|
||
|
|
||
|
|
||
|
* * *
|