DC.js - Mapa de Calor
Um mapa de calor é uma representação gráfica dos dados na forma de um mapa, no qual os valores dos dados são representados como cores. Este capítulo explica sobre um mapa de calor em detalhes.
Antes de prosseguirmos para desenhar um mapa de calor, devemos entender o dc.heatMapclasse e seus métodos. O dc.heatMap usa mixins para obter a funcionalidade básica de desenho de um gráfico, que estão listados abaixo -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
O diagrama de classe completo do dc.heatMap é o seguinte -
O dc.heatMap obtém todos os métodos dos mixins especificados acima. Ele tem seus próprios métodos para desenhar o mapa de calor, que são explicados abaixo -
boxOnClick ([handler])
Este método é usado para obter ou definir o manipulador, quando uma célula individual é clicada no mapa de calor.
cols ([cols])
Este método é usado para obter ou definir as chaves para criar as colunas do mapa de calor.
colsLabel ([rótulo])
Este método é usado para obter ou definir o rótulo da coluna, que é representado como o nome da coluna. Da mesma forma, podemos executar um rótulo de linha também.
linhas ([linhas])
Este método é usado para obter ou definir os valores usados para criar as linhas do mapa de calor.
xAxisOnClick ([handler])
Este método é usado para obter ou definir o manipulador, quando uma marca de coluna é clicada no eixo x.
xBorderRadius ([border])
Este método é usado para definir o raio da borda X. Se o valor for definido como 0, você obterá retângulos completos.
Desenhe um mapa de calor
Vamos desenhar um mapa de calor em DC. Para fazer isso, precisamos seguir as etapas fornecidas abaixo -
Etapa 1: definir uma variável
Vamos definir uma variável como mostrado abaixo -
var chart = dc.heatMap('#heatmap');Aqui, a função heatMap é mapeada com o mapa de calor id.
Etapa 2: leia os dados
Leia os dados do howell1.csv arquivo como mostrado abaixo -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Aqui, usamos o mesmo arquivo howell1.csv e ele se parece com o mostrado abaixo -
"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
......................
......................Etapa 3: buscar os registros
Vamos buscar os registros usando a codificação fornecida a seguir -
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;
}
});Aqui, verificamos o gênero e definimos a faixa de altura e largura do eixo x usando a fórmula acima.
Etapa 4: definir a dimensão
Você pode definir a dimensão usando a codificação fornecida abaixo -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Depois que a dimensão for atribuída, agrupe o gênero usando a codificação fornecida abaixo -
var genderGroup = genderDimension.group().reduceCount();Etapa 5: gerar um gráfico
Agora, gere um mapa de calor usando a codificação fornecida abaixo -
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();
});Aqui,
- Atribuímos a largura do gráfico como 20 × 45 + 80 e a altura como 2 × 45 + 40.
- Em seguida, atribuímos a dimensão e o grupo de gênero.
- O acessador de chave e valor retorna a chave e o valor dos mapas de calor.
- Temos que usar a função colorAccessor () para retornar a cor.
- Por fim, defina o título e renderize o gráfico.
Etapa 6: Exemplo de trabalho
A codificação completa é a seguinte. Crie uma página da webheatmap.html e adicione as seguintes alterações a ele.
<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>Agora, solicite o navegador e veremos a seguinte resposta.