Index

---

• Data-Driven Documents D3js
• Descarga D3js
• c3js
• Descarga C3js
• Getting Started - c3js

---

D3

D3.js es una biblioteca de JavaScript para manipular documentos basados en datos.

D3 le ayuda a dar vida a los datos mediante HTML, SVG y CSS.

El énfasis de D3 en los estándares web le brinda todas las capacidades de los navegadores modernos sin atarse a un marco propietario, combinando poderosos componentes de visualización y un enfoque basado en datos para la manipulación del DOM.

Estas notas se realizaron con la versión (6.3.1): d3.zip

C3 es una biblioteca de gráficos reutilizable basada en D3 que permite una integración más profunda de gráficos en aplicaciones web.

Estas notas se realizaron con la versión (0.7.20): 0.7.20

En el sitio de https://c3js.org/gettingstarted.html se indica un ejemplo del uso de la herramienta.

Se debe contar con el archivo d3.js y c3.js en la versión de conveniencia.

En el ejemplo se usa un tag div de HTML para que en este se presente la gráfica que se genera con c3

<div id="chart"></div>

A continuación el código para generar la gráfica y relacionarla con el tag div de HTML.

Practicamente se invoca el método generate() de c3 y como argumentos el vinculo a un tag de HTML (bindto) para presentar el resultado y los datos que se emplearan para ello (data)

var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } });

El gráfico se puede personalizar dando algunas opciones al generar.

Es posible introducir un eje adicional para data2. Agregando data.axes y de la siguiente manera:

var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ], axes: { data2: 'y2' // ADD } }, axis: { y2: { show: true // ADD } } });

El estilo (look and feel) de la visualización dependerá de la biblioteca o css de conveniencia.

También se puede cambiar el tipo de gráfico: type: "bar"

Así como dar formato a los valores de cada dato: axis.y.tick.format

Algo muy atractivo es que mediante el uso de API, puede actualizar el gráfico después de que se haya renderizado. Las API se pueden llamar a través del objeto devuelto por generate ().

Y mucho más.. (examples.html)

---

References