DC.js - Gráfico de bolhas
Um gráfico de bolhas é usado para exibir três dimensões dos dados. É uma variação do gráfico de dispersão, no qual os pontos de dados são substituídos por bolhas. Os tamanhos das bolhas são representados em relação à dimensão dos dados. Ele usa eixos horizontais e verticais como eixos de valor. Este capítulo explica o gráfico de bolhas em detalhes.
Métodos de gráfico de bolhas
Antes de prosseguirmos para desenhar um gráfico de bolhas, devemos entender o dc.bubbleChartclasse e seus métodos. O dc.bubbleChart usa mixins para obter a funcionalidade básica de desenho de um gráfico, que estão listados abaixo -
- dc.bubbleMixin
- dc.coordinateGridMixin
O diagrama de classe completo do dc.bubbleChart é o seguinte -
O dc.bubbleChart obtém todos os métodos dos mixins especificados acima. Ele também tem seus próprios métodos para desenhar o gráfico de bolhas, que são explicados abaixo -
elasticRadius ([radius])
Este método é usado para habilitar o raio da bolha. Se desativarmos isso, o raio da bolha será redimensionado automaticamente.
sortBubbleSize ([sortBubbleSize])
Este método é usado para habilitar o recurso de classificação em bolhas. Bolhas menores virão primeiro e depois aumentarão gradualmente.
Desenhe um gráfico de bolhas
Vamos desenhar um gráfico de bolhas 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.bubbleChart('#bubble');
Aqui, a função bubbleChart é mapeada com a bolha id.
Etapa 2: leia os dados
Leia os dados do howell1.csv Arquivo.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
Se os dados não estiverem presentes, ele retornará um erro. Agora, atribua os dados a um filtro cruzado. Aqui, já baixamos o arquivo howell1.csv. O mesmo arquivo será usado aqui e será semelhante ao seguinte bloco 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
....................
.....................
Etapa 3: buscar os registros
Vamos buscar os registros usando a codificação fornecida a seguir -
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);
});
Aqui, verificamos o gênero e definimos a altura do eixo x e a faixa de largura usando a fórmula acima.
Etapa 4: definir a dimensão
Podemos definir a dimensão usando a codificação fornecida abaixo -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
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 o gráfico
Agora, gere um gráfico de bolhas usando a codificação fornecida abaixo -
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);
})
Aqui,
Atribuímos a largura do gráfico como 1200 e a altura como 400.
A seguir, especificamos os pontos de margem.
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 das bolhas.
Calcule a função acessadora do valor do raio usando a fórmula - Math.floor((p.value / 10)) + 1.
Etapa 6: desenhar bolhas
Agora, desenhe as bolhas usando a codificação fornecida abaixo -
.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;
});
Aqui,
A função d3.scale.linear é usada para construir uma nova escala linear com o intervalo de domínio especificado [0,240] para o eixo x.
Da mesma forma, atribuímos valores de escala linear de y e raio.
Especificamos o valor mínimo do rótulo do raio como 1000, os valores de preenchimento do eixo xey como 200 e 100, respectivamente.
Em seguida, especificamos um valor máximo de tamanho relativo da bolha como 0,7.
Renderize as linhas de grade horizontais e verticais e mapeie com o título para a chave e os valores da bolha.
Etapa 7: Definir TickFormat
Defina os formatos de tíquete para os eixos xey usando a codificação fornecida abaixo -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
Finalmente, renderize o gráfico usando o chart.render() método.
Etapa 8: Exemplo de trabalho
A listagem de código completa é mostrada no bloco de código a seguir. Crie uma página da webbubble.html e adicione as seguintes alterações a ele.
<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>
Agora, solicite o navegador e veremos a seguinte resposta.