DC.js - Mapa de calor
Un mapa de calor es una representación gráfica de datos en forma de mapa, en el que los valores de los datos se representan como colores. Este capítulo explica en detalle un mapa de calor.
Antes de pasar a dibujar un mapa de calor, debemos comprender el dc.heatMapclase y sus métodos. El dc.heatMap usa mixins para obtener la funcionalidad básica de dibujar un gráfico, que se enumeran a continuación:
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
El diagrama de clases completo de dc.heatMap es el siguiente:
El dc.heatMap obtiene todos los métodos de los mixins especificados anteriormente. Tiene sus propios métodos para dibujar el mapa de calor, que se explican a continuación:
boxOnClick ([controlador])
Este método se usa para obtener o configurar el controlador, cuando se hace clic en una celda individual en el mapa de calor.
cols ([cols])
Este método se utiliza para obtener o establecer las claves para crear las columnas del mapa de calor.
colsLabel ([etiqueta])
Este método se utiliza para obtener o establecer la etiqueta de la columna, que se representa como el nombre de la columna. De manera similar, también podemos realizar una etiqueta de fila.
filas ([filas])
Este método se utiliza para obtener o establecer los valores utilizados para crear las filas del mapa de calor.
xAxisOnClick ([controlador])
Este método se utiliza para obtener o configurar el controlador, cuando se hace clic en una marca de columna en el eje x.
xBorderRadius ([borde])
Este método se utiliza para establecer el radio del borde X. Si el valor se establece en 0, obtendrá rectángulos completos.
Dibujar un mapa de calor
Dibujemos un mapa de calor 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.heatMap('#heatmap');Aquí, la función heatMap se asigna con el mapa de calor id.
Paso 2: lee los datos
Lea los datos del howell1.csv archivo como se muestra a continuación -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Aquí, hemos utilizado el mismo archivo howell1.csv y se ve como se muestra a continuación:
"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 usando la codificación que se proporciona a continuación:
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});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
Puede establecer la dimensión utilizando la codificación que se proporciona a continuación:
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});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: genera un gráfico
Ahora, genere un mapa de calor utilizando la codificación que se proporciona a continuación:
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";
})
.calculateColorDomain()
chart.render();
});Aquí,
- Hemos asignado el ancho del gráfico como 20 × 45 + 80 y el alto como 2 × 45 + 40.
- 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 los mapas de calor.
- Tenemos que usar la función colorAccessor () para devolver el color.
- Finalmente, establezca el título y renderice el gráfico.
Paso 6: ejemplo de trabajo
La codificación completa es la siguiente. Crea una pagina webheatmap.html y agregue los siguientes cambios.
<html>
<head>
<title>DC heat map 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 = "heatmap"></div>
</div>
<script language = "javascript">
var chart = dc.heatMap('#heatmap');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " +
(d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";})
.calculateColorDomain()
chart.render();
});
</script>
</body>
</html>Ahora, solicita el navegador y veremos la siguiente respuesta.