DC.js: gráfico de barras

El gráfico de barras es uno de los tipos de gráficos más utilizados y se utilizan para mostrar y comparar el número, la frecuencia u otra medida (por ejemplo, la media) para diferentes categorías o grupos discretos. El gráfico está construido de manera que las alturas o longitudes de las diferentes barras sean proporcionales al tamaño de la categoría que representan.

El eje x (el eje horizontal) representa las diferentes categorías que no tiene escala. El eje y (el eje vertical) tiene una escala y esto indica las unidades de medida. Las barras se pueden dibujar de forma vertical u horizontal según el número de categorías y la longitud o complejidad de la categoría.

Métodos de gráfico de barras

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

dc.stackMixin
dc.coordinateGridMixin

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

El dc.barChart obtiene todos los métodos de los mixins especificados anteriormente. Además, también tiene sus propios métodos para dibujar el gráfico de barras. Se explican de la siguiente manera:

alwaysUseRounding ([ronda])

Este método se utiliza para obtener o establecer si el redondeo está habilitado cuando las barras están centradas.

barPadding ([pad])

Este método se utiliza para obtener o establecer el espacio entre barras como una fracción del tamaño de la barra. Los posibles valores de relleno están entre 0-1.

centerBar ([centerBar])

Este método se utiliza para establecer la barra, centrada alrededor de la posición de los datos en el eje x.

brecha ([brecha])

Este método se utiliza para establecer un espacio fijo entre las barras.

externalPadding ([pad])

Este método se utiliza para establecer el relleno exterior en un gráfico de barras ordinal.

Dibujar un gráfico de barras

Dibujemos un gráfico de barras en DC. 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.barChart('#bar');

Aquí, la función dc.barChart se asigna con un contenedor que tiene bar como el id.

Paso 2: lee los datos

Leer datos del archivo people.csv.

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

Si los datos no están presentes, devuelve un error. Ahora, asigne los datos a Crossfilter. Para este ejemplo, usaremos el mismo archivo people.csv, que tiene el siguiente aspecto:

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: crea una dimensión de edad

Ahora, cree una dimensión para la edad como se muestra a continuación:

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

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

Ahora, agrúpelo usando el reduceCount() función que se muestra a continuación -

var ageGroup = ageDimension.group().reduceCount();

Paso 4: genera un gráfico

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

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Aquí,

El ancho del gráfico es 800 y la altura 300.
La función d3.scale.linear se utiliza para construir una nueva escala lineal con el rango de dominio especificado [15, 70].
A continuación, establecemos el valor brushOn en falso.
Asignamos la etiqueta del eje y como recuento y la etiqueta del eje x como edad.
Finalmente, agrupe la edad usando la función ageGroup.

Paso 5: ejemplo de trabajo

La lista de códigos completa es la siguiente. Crea una pagina webbar.html y agregue los siguientes cambios.

<html>
   <head>
      <title>DC Bar chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.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 = "bar"></div>
      </div>

      <script language = "javascript">
         var chart = dc.barChart('#bar');

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

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱