freeCodeCamp/guide/spanish/d3/index.md

68 lines
2.8 KiB
Markdown

---
title: D3
localeTitle: D3
---
# D3: Documentos controlados por datos
**Data-Driven Documents** (D3.js) es una biblioteca de JavaScript para producir visualizaciones de datos dinámicas e interactivas en navegadores web. **D3.js** API contiene varios métodos que se pueden agrupar en las siguientes unidades lógicas: _Selecciones_ , _Transiciones_ , _Arreglos_ , _Matemáticas_ , _Color_ , _Escalas_ , _SVG_ , _Tiempo_ , _Diseños_ , _Geografía_ , _Geometría_ , _Comportamientos_ .
![Logo D3.js](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/d3.jpg?w=312&h=161)
**D3.js lo** ayuda a visualizar datos combinando potentes técnicas de visualización e interacción con un enfoque basado en datos para la manipulación de DOM. También proporciona todas las capacidades de los navegadores modernos al diseñar la interfaz visual adecuada para sus datos.
**La** versión 1.0.0 de **D3.js** se lanzó el 18 de febrero de 2011.
## ¿Por qué, D3.js?
_D3_ \* no introduce una nueva representación visual. A diferencia de **Processing** , **Raphaël** o **Protovis** , _el_ vocabulario de las marcas gráficas de _D3_ proviene directamente de los estándares web: HTML, SVG y CSS - https://d3js.org/
###### Empezar
Hay más de 20,000 ejemplos de **D3.js de los** que podrías aprender, ¡pero nunca sabes qué tan accesible será cualquiera! Entonces, la pregunta es: ¿cómo construyes tu visualización desde los primeros principios? Como probablemente haya visto, la API de D3 es masiva, así que llamemos algunas de las utilidades que serán particularmente útiles desde el principio:
* **escala d3**
![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/scale.png?w=400&h=100)
* **forma d3**
![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/shape.png?w=400&h=100)
* **d3-selección**
![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/selection.gif?w=400&h=100)
* **colección d3**
![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/collection.png?w=400&h=100)
* **jerarquía 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)
* **fuerza d3**
![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/force.gif?w=400&h=100)
Por lo tanto, con solo un conocimiento básico de las últimas funciones HTML5 como SVG, Canvas puede sumergirse en un mundo donde las bibliotecas como **D3.js** dan vida a los datos. ###### Contribución
* 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
* * *