Visualización de datos con D3

Encapsulando el Gráfico

En la sección anterior, seguimos una serie de pasos para crear el gráfico. Las etapas para crear el gráfico son las siguientes:

Configuración

Definir el arreglo de datos.
Definir la configuración del gráfico y las funciones de acceso.
Seleccionamos el div contenedor y vinculamos los datos.

Creación del Gráfico

Crear SVG y grupos para el gráfico y los ejes
Trasladar grupos y ajustar el tamaño del SVG
Definir las escalas
Definir y dibujar los ejes.
Crear los círculos (binding, enter, update y exit).

Ahora, vamos a encapsular este código de forma progresiva hasta llegar a escribir un gráfico reutilizable. Volveremos a usar los datos de la sección anterior. También vamos a definir dos subconjuntos de datos para usarlos más adelante.

Como siempre, empezamos con vinculando los datos. Para lograr hacer gráficos reutilizables, es necesario entender algunos detalles internos de cómo funcionan las selecciones con datos vinculados.

var divs01 = d3.select('#ejemplo-a01').selectAll('.div-a01').data([datosA, datosB]);

La selección precedente es un arreglo. Podemos recorrerlo y operar sobre cada uno de sus elementos usando el método each. El contexto this referencia al elemento del DOM correspondiente al elemento de la selacción. Resulta útil inspeccionar estos arreglos con la consola para aclarar los conceptos anteriores.

divs01.each(function(data) { var div = d3.select(this); console.log(div); });

Ahora, con esta sintaxis, tenemos acceso a la selección del div, y a los datos que estan vinculados al div. Como recordarán de la sección precedente, esto es todo lo que necesitamos, además de la configuración, para crear un gráfico. Empezaremos creando un SVG para cada div:

var divs02 = d3.select('#ejemplo-a02').selectAll('.div-a02').data([datosA, datosB]); divs02.each(function(data) { var div = d3.select(this), svg = div.selectAll('svg').data([data]); svg.enter().append('svg') .attr('width', 200) .attr('height', 50); });

En vez de usar una función anónima en each, podemos usar una función creada explícitamente para encapsular la creación de los elementos internos.

var divs03 = d3.select('#ejemplo-a03').selectAll('.div-a03').data([datosA, datosB]); function createChartDiv(data) { var div = d3.select(this), svg = div.selectAll('svg').data([data]); svg.enter().append('svg') .attr('width', 200) .attr('height', 50); } divs03.each(createChartDiv);

Pero podemos encapsular un poco más el asunto:

var divs04 = d3.select('#ejemplo-a04').selectAll('.div-a04').data([datosA, datosB]); function createChartDiv(data) { var div = d3.select(this), svg = div.selectAll('svg').data([data]); svg.enter().append('svg') .attr('width', 200) .attr('height', 50); } function createCharts(selection) { selection.each(createChartDiv); } // divs04.call(createCharts); createCharts(divs04);

Podemos usar la sintaxis .call, y ni siquiera necesitamos nombrar la selección:

function createChartDiv(data) { var div = d3.select(this), svg = div.selectAll('svg').data([data]); svg.enter().append('svg') .attr('width', 200) .attr('height', 50); } function createCharts(selection) { selection.each(createChartDiv); } d3.select('#ejemplo-a05').selectAll('.div-a05') .data([datosA, datosB]) .call(createCharts);

Podemos generalizar este código aún más:

function createCharts(selection) { selection.each(function(data) { var div = d3.select(this), svg = div.selectAll('svg').data([data]); svg.enter().append('svg') .attr('width', 200) .attr('height', 50); }); } d3.select('#ejemplo-a06').selectAll('.div-a06') .data([datosA, datosB]) .call(createCharts);

Hemos creado nuestro primer gráfico reusable. Vamos a definir los valores de configuración de la sección anterior y pegar el código de creación del gráfico.

Ahora escribimos una nueva función createScatterPlot a partir de createCharts usando el código de la sección anterior:

Finalmente, usaremos la función con una selección que tiene datos bindeados:

d3.select('#ejemplo-b03').selectAll('.div-b03') .data([datosA, datosB]) .call(createScatterPlot);

Y como si esto fuera poco, podemos los divs con la misma sintaxis con la que hemos creado los rectángulos en los ejemplos anteriores:

var divs04 = d3.select('#ejemplo-b04').selectAll('.div-b04').data([datosA, datosB, datosC]); divs04.enter().append('div') .attr('class', 'div-b04') .attr('id', function(d, i) { return 'ejemplo-b04-' + (i + 1); }); divs04.call(createScatterPlot);

Nótese que no necesitamos escribir código adicional para crear más gráficos. El próximo paso consiste en encapsular la definición de los parámetros del gráfico. Para esto, se necesita entender algunas particularidades de JavaScript.