DC.js - Gráfico de burbujas
Se utiliza un gráfico de burbujas para mostrar tres dimensiones de los datos. Es una variación del gráfico de dispersión, en el que los puntos de datos se reemplazan con burbujas. Los tamaños de las burbujas se representan con respecto a la dimensión de datos. Utiliza ejes horizontales y verticales como ejes de valor. Este capítulo explica en detalle el gráfico de burbujas.
Métodos de gráficos de burbujas
Antes de pasar a dibujar un gráfico de burbujas, debemos comprender el dc.bubbleChartclase y sus métodos. El dc.bubbleChart usa mixins para obtener la funcionalidad básica de dibujar un gráfico, que se enumeran a continuación:
- dc.bubbleMixin
- dc.coordinateGridMixin
El diagrama de clases completo del dc.bubbleChart es el siguiente:
El dc.bubbleChart obtiene todos los métodos de los mixins especificados anteriormente. También tiene sus propios métodos para dibujar el gráfico de burbujas, que se explican a continuación:
elasticRadius ([radio])
Este método se utiliza para habilitar el radio de burbuja. Si desactivamos esto, el radio de la burbuja se reescalará automáticamente.
sortBubbleSize ([sortBubbleSize])
Este método se utiliza para habilitar la función de clasificación en burbujas. Primero aparecerán burbujas más pequeñas y luego aumentarán gradualmente.
Dibujar un gráfico de burbujas
Dibujemos un gráfico de burbujas en DC. Para hacer esto, debemos seguir los pasos que se detallan a continuación:
Paso 1: definir una variable
Definamos una variable como se muestra a continuación:
var chart = dc.bubbleChart('#bubble');Aquí, la función bubbleChart se asigna con la burbuja de identificación.
Paso 2: lee los datos
Leer datos del howell1.csv archivo.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Si no hay datos, devuelve un error. Ahora, asigne los datos a un filtro cruzado. Aquí, ya hemos descargado el archivo howell1.csv. Aquí se utilizará el mismo archivo y se verá similar al siguiente bloque de código.
"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
....................
.....................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";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});Aquí, hemos verificado el género y hemos establecido el rango de altura y ancho del eje x usando la fórmula anterior.
Paso 4: establece la dimensión
Podemos establecer la dimensión utilizando la codificación que se proporciona a continuación:
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});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 genderGroup = genderDimension.group().reduceCount();Paso 5: generar el gráfico
Ahora, genere un gráfico de burbujas utilizando la codificación que se proporciona a continuación:
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})Aquí,
Hemos asignado el ancho del gráfico como 1200 y la altura como 400.
A continuación, hemos especificado los puntos de margen.
Luego le hemos asignado la dimensión de género y el grupo.
El descriptor de acceso de clave y valor devuelve la clave y el valor de las burbujas.
Calcule la función de acceso al valor del radio usando la fórmula - Math.floor((p.value / 10)) + 1.
Paso 6: Dibuja burbujas
Ahora, dibuja las burbujas usando la codificación que se proporciona a continuación:
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});Aquí,
La función d3.scale.linear se utiliza para construir una nueva escala lineal con el rango de dominio especificado [0,240] para el eje x.
De manera similar, asignamos valores de escala lineal yy radio.
Especificamos el valor de etiqueta de radio mínimo como 1000, los valores de relleno del eje xy el eje y como 200 y 100 respectivamente.
A continuación, hemos especificado un valor de tamaño relativo máximo de burbuja como 0,7.
Renderice las líneas de cuadrícula horizontales y verticales, luego mapee con el título de la clave y los valores de burbuja.
Paso 7: Establecer TickFormat
Establezca los formatos de ticket para los ejes xey utilizando la codificación que se proporciona a continuación:
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});Finalmente, renderice el gráfico usando el chart.render() método.
Paso 8: ejemplo de trabajo
La lista completa de códigos se muestra en el siguiente bloque de código. Crea una pagina webbubble.html y agregue los siguientes cambios.
<html>
<head>
<title>Bubble 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 = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
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";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>Ahora, solicita el navegador y veremos la siguiente respuesta.