DC.js: gráfico de dispersión

Un diagrama de dispersión es un tipo de diagrama matemático. Se representa utilizando las coordenadas cartesianas para mostrar valores de dos variables típicas de un conjunto de datos. Los datos se muestran como una colección de puntos y los puntos pueden colorearse. Este capítulo explica en detalle un diagrama de dispersión.

Métodos de gráficos de dispersión

Antes de pasar a dibujar un diagrama de dispersión, debemos entender el dc.scatterPlotclase y sus métodos. El dc.scatterPlot usa mixins para obtener la funcionalidad básica de dibujar un gráfico. El mixin utilizado por dc.scatterPlot se da a continuación:

dc.coordinateGridMixin

El diagrama de clases completo de dc.scatterPlot es el siguiente:

El dc.scatterPlot obtiene todos los métodos de los mixins especificados anteriormente. Tiene sus propios métodos para dibujar el diagrama de dispersión, que se explican a continuación.

customSymbol ([símbolo])

Este método se utiliza para obtener o configurar el generador de símbolos.

emptySize ([tamaño])

Este método se utiliza para establecer u obtener el radio de los símbolos cuando el grupo está vacío.

excluidoColor ([color])

Este método se utiliza para obtener o establecer el color de los símbolos excluidos del filtro del gráfico.

excluidoOpacidad ([opacidad])

Este método se utiliza para obtener o establecer la opacidad de los símbolos excluidos del filtro del gráfico.

excludedSize ([tamaño])

Se utiliza para establecer u obtener el tamaño de los símbolos excluidos del filtro del gráfico.

resaltadoTamaño ([tamaño])

Se utiliza para establecer u obtener el radio de los símbolos resaltados.

símbolo ([tipo])

Se utiliza para obtener o establecer el tipo de símbolo utilizado para cada punto.

Dibujar un diagrama de dispersión

Dibujemos un diagrama de dispersión en DC. En este ejemplo, tomemos un conjunto de datos denominado comohowell1.csvarchivo. El archivo de datos de muestra es el siguiente:

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

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

El archivo de muestra anterior contiene muchos registros. Podemos descargar el archivo haciendo clic en el siguiente enlace y guardándolo en nuestra ubicación de DC.

howell1.csv

Ahora, sigamos los pasos siguientes para dibujar un gráfico de dispersión en DC.

Paso 1: definir una variable

Definamos una variable como se muestra a continuación:

var chart = dc.scatterPlot('#scatter');

Aquí, la función scatterplot () se asigna con el id scatter.

Paso 2: lee los datos

Lea los datos del archivo howell1.csv como se muestra a continuación:

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

Si los datos no están presentes, devuelve un error. Posteriormente, asigne los datos a un filtro cruzado.

Paso 3: recuperar los registros

Busquemos los registros utilizando la codificación que se proporciona a continuación:

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

Aquí, hemos comprobado el género.

Paso 4: establece la dimensión

Puede establecer la dimensión utilizando la codificación que se proporciona a continuación:

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

Después de que se haya asignado la dimensión, agrupe el género utilizando la codificación que se proporciona a continuación:

var hwGroup = hwDimension.group().reduceCount();

Paso 5: genera un gráfico

Ahora, genere un mapa de calor utilizando la codificación que se proporciona a continuación:

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

Aquí,

Hemos asignado el ancho del gráfico como 800 y la altura como 600.
Se aplicó la función d3.scale.linear () tanto para el eje x como para el eje y.
Se habilitó el valor brushOn como falso.
Luego, asigne la etiqueta del eje x como altura y la etiqueta del eje y como peso.
Establezca el tamaño del símbolo en ocho y el valor de relleno en 10.
Finalmente, agrupe los datos y renderice el gráfico.

Paso 6: ejemplo de trabajo

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

<html>
   <head>
   <title>Scatter plot 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 = "scatter"></div>
      </div>

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

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

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

            chart.render();
         });
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱