DC.js: gráfico compuesto

El gráfico compuesto es un tipo especial de gráfico proporcionado por DC.js. Proporciona una opción para representar varios gráficos en la misma cuadrícula de coordenadas. El gráfico compuesto permite opciones avanzadas de visualización de gráficos con una línea mínima de código.

Métodos de gráficos compuestos

Antes de pasar a dibujar un gráfico compuesto, debemos comprender el dc.compositeChartclase y sus métodos. El dc.compositeChart usa mixins para obtener la funcionalidad básica de dibujar un gráfico. Los mixins utilizados por dc.compositeChart son los siguientes:

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

El diagrama de clases completo del dc.barChart es el siguiente:

El dc.compositeChart obtiene todos los métodos de los mixins especificados anteriormente. Tiene su propio método para dibujar el gráfico compuesto, que se explica a continuación:

compose ([subChartArray])

Configure la colección de gráficos que se renderizarán en el mismo gráfico de cuadrícula de coordenadas.

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

niños()

Obtiene todos los gráficos compuestos en la misma cuadrícula de coordenadas.

childOptions ([childOptions])

Obtiene o establece las opciones de gráfico para todos los gráficos secundarios compuestos en la misma cuadrícula de coordenadas.

shareTitle ([shareTitle])

Obtiene o establece el título compartido del gráfico. Si se establece, se compartirá con todos los gráficos secundarios compuestos en la misma cuadrícula de coordenadas.

shareColors ([shareColors])

Similar a la función shareTitle (), excepto que comparte los colores en lugar del título.

rightY ([yScale])

Obtiene o establece la escala y para el eje derecho del gráfico compuesto.

rightYAxis ([rightYAxis])

Obtiene o establece el eje y derecho del gráfico compuesto.

rightYAxisLabel (rightYAxisLabel [??])

Obtiene o establece la etiqueta del eje y derecho.

alignYAxes ([alignYAxes])

Obtiene o establece la alineación entre el eje y izquierdo y derecho.

useRightAxisGridLines ([useRightAxisGridLines])

Obtiene o establece si se dibujan líneas de cuadrícula desde el eje y derecho del gráfico compuesto. El comportamiento predeterminado es dibujar desde el eje y izquierdo.

Dibujar un gráfico compuesto

Dibujemos un gráfico compuesto usando DC.js. Para hacer esto, debemos seguir los pasos que se detallan a continuación:

Paso 1: definir una variable

Definamos una variable de gráfico como se muestra a continuación:

var chart = dc.compositeChart('#compoiste');

Aquí, la función dc.compositeChart está mapeada con un contenedor que tiene composite como su id.

Paso 2: lee los datos

Leer datos del archivo people.csv -

d3.csv("data/people.csv", function(errors, people) {
    
}

Si los datos no están presentes, devuelve un error. Usaremos el mismo archivo people.csv. El archivo de datos de muestra es el siguiente:

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.............
.............
..............

Paso 3: mapear los datos

Ahora, mapee los datos como se muestra a continuación:

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

Aquí, asignamos la edad de los datos del filtro cruzado. El ~~ es un operador NO bit a bit doble. Se utiliza como sustituto más rápido.

Ahora, aplique la dimensión edad y agrupe los datos de género usando la codificación que se proporciona a continuación:

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

Paso 4: genera un gráfico

Ahora, genere un gráfico compuesto utilizando la codificación que se proporciona a continuación:

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

Aquí,

El ancho del gráfico es 768 y la altura 480.
La función d3.scale.linear se utiliza para construir una nueva escala lineal con el rango de dominio especificado [15, 70].
Asignamos una etiqueta del eje x como edad y una etiqueta del eje y como recuento.
A continuación, renderice las líneas de cuadrícula horizontales como verdaderas.
Componga el valor de los colores del gráfico de líneas: rojo para el género masculino y azul para el femenino.
Finalmente, establecemos el valor brushOn en falso y renderizamos el gráfico.

Paso 5: ejemplo de trabajo

El código completo es el siguiente. Crea una pagina webcomposite.html y agregue los siguientes cambios.

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
    
   <body>
      <div>
         <div id = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

         d3.csv("data/people.csv", function(errors, people) {
            var ndx = crossfilter();

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱