DC.js - Gráfico de dispersão

Um gráfico de dispersão é um tipo de diagrama matemático. Ele é representado usando as coordenadas cartesianas para exibir valores para normalmente duas variáveis para um conjunto de dados. Os dados são exibidos como uma coleção de pontos e os pontos podem ser coloridos. Este capítulo explica em detalhes um gráfico de dispersão.

Métodos de gráfico de dispersão

Antes de passar para desenhar um gráfico de dispersão, devemos entender o dc.scatterPlotclasse e seus métodos. O dc.scatterPlot usa mixins para obter a funcionalidade básica de desenho de um gráfico. O mixin usado por dc.scatterPlot é fornecido abaixo -

dc.coordinateGridMixin

O diagrama de classe completo do dc.scatterPlot é o seguinte -

O dc.scatterPlot obtém todos os métodos dos mixins especificados acima. Ele tem seus próprios métodos para desenhar o gráfico de dispersão, que são explicados a seguir.

customSymbol ([símbolo])

Este método é usado para obter ou definir o gerador de símbolos.

emptySize ([size])

Este método é usado para definir ou obter o raio dos símbolos quando o grupo está vazio.

excludedColor ([color])

Este método é usado para obter ou definir a cor dos símbolos excluídos do filtro do gráfico.

excludedOpacity ([opacity])

Este método é usado para obter ou definir a opacidade dos símbolos excluídos do filtro do gráfico.

excludedSize ([size])

É usado para definir ou obter o tamanho dos símbolos excluídos do filtro do gráfico.

tamanho destacado ([tamanho])

É usado para definir ou obter o raio dos símbolos destacados.

símbolo ([tipo])

É usado para obter ou definir o tipo de símbolo usado para cada ponto.

Desenhe um gráfico de dispersão

Vamos desenhar um gráfico de dispersão em DC. Neste exemplo, vamos pegar um conjunto de dados denominado comohowell1.csvArquivo. O arquivo de dados de amostra é o seguinte -

"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

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

O arquivo de amostra acima contém muitos registros. Podemos baixar o arquivo clicando no link a seguir e salvando-o em nosso DC.

howell1.csv

Agora, vamos seguir as etapas subsequentes para desenhar um gráfico Scatter em DC.

Etapa 1: definir uma variável

Vamos definir uma variável como mostrado abaixo -

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

Aqui, a função scatterplot () é mapeada com a dispersão id.

Etapa 2: leia os dados

Leia os dados do arquivo howell1.csv conforme mostrado abaixo -

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

Se os dados não estiverem presentes, ele retornará um erro. Posteriormente, atribua os dados a um filtro cruzado.

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";
   }
});

Aqui, verificamos o gênero.

Etapa 4: definir a dimensão

Você pode definir a dimensão usando a codificação fornecida abaixo -

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

Depois que a dimensão for atribuída, agrupe o gênero usando a codificação fornecida abaixo -

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

Etapa 5: gerar um gráfico

Agora, gere um mapa de calor usando a codificação fornecida abaixo -

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);

Aqui,

Atribuímos a largura do gráfico como 800 e a altura como 600.
Aplicou a função d3.scale.linear () para os eixos x e y.
Valor brushOn habilitado como falso.
Em seguida, foi atribuído o rótulo do eixo x como altura e o rótulo do eixo y como peso.
Defina o tamanho do símbolo como oito e o valor de preenchimento como 10.
Finalmente, agrupe os dados e renderize o gráfico.

Etapa 6: Exemplo de trabalho

A lista de códigos completa é a seguinte. Crie uma página da webscatter.html e adicione as seguintes alterações a ele.

<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>

Agora, solicite o navegador e veremos a seguinte resposta.