DC.js - Gráfico Composto

O gráfico composto é um tipo especial de gráfico fornecido pelo DC.js. Ele fornece uma opção para renderizar vários gráficos na mesma grade de coordenadas. O gráfico composto permite opções de visualização de gráfico avançadas com uma linha mínima de código.

Métodos de gráfico composto

Antes de passar a desenhar um gráfico composto, precisamos entender o dc.compositeChartclasse e seus métodos. O dc.compositeChart usa mixins para obter a funcionalidade básica de desenho de um gráfico. Os mixins usados pelo dc.compositeChart são os seguintes -

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

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

O dc.compositeChart obtém todos os métodos dos mixins especificados acima. Ele tem seu próprio método para desenhar o gráfico composto, que é explicado a seguir -

compor ([subChartArray])

Defina a coleção de gráficos a serem renderizados no mesmo gráfico de grade de coordenadas.

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

crianças()

Obtém todos os gráficos compostos na mesma grade de coordenadas.

childOptions ([childOptions])

Obtém ou define as opções de gráfico para todos os gráficos filho compostos na mesma grade de coordenadas.

shareTitle ([shareTitle])

Obtém ou define o título compartilhado do gráfico. Se definido, ele será compartilhado com todos os gráficos filhos compostos na mesma grade de coordenadas.

shareColors ([shareColors])

Semelhante à função shareTitle (), exceto que compartilha as cores em vez do título.

rightY ([yScale])

Obtém ou define a escala y para o eixo direito do gráfico composto.

rightYAxis ([rightYAxis])

Obtém ou define o eixo y direito do gráfico composto.

rightYAxisLabel (rightYAxisLabel [??])

Obtém ou define o rótulo correto do eixo y.

alignYAxes ([alignYAxes])

Obtém ou define o alinhamento entre os eixos y esquerdo e direito.

useRightAxisGridLines ([useRightAxisGridLines])

Obtém ou define se deseja desenhar linhas de grade do eixo y direito do gráfico composto. O comportamento padrão é desenhar a partir do eixo y esquerdo.

Desenhe um gráfico composto

Vamos desenhar um gráfico composto usando DC.js. Para fazer isso, devemos seguir as etapas abaixo -

Etapa 1: definir uma variável

Vamos definir uma variável de gráfico conforme mostrado abaixo -

var chart = dc.compositeChart('#compoiste');

Aqui, a função dc.compositeChart é mapeada com um contêiner tendo composite como seu id.

Etapa 2: leia os dados

Leia os dados do arquivo people.csv -

d3.csv("data/people.csv", function(errors, people) {
    
}

Se os dados não estiverem presentes, ele retornará um erro. Usaremos o mesmo arquivo people.csv. O arquivo de dados de amostra é o seguinte -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

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

Etapa 3: Mapeie os dados

Agora, mapeie os dados conforme mostrado abaixo -

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

Aqui, atribuímos a idade dos dados do Crossfilter. O ~~ é um operador duplo NOT bit a bit. É usado como um substituto mais rápido.

Agora, aplique a dimensão idade e agrupe os dados de gênero usando a codificação fornecida abaixo -

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

Etapa 4: gerar um gráfico

Agora, gere um gráfico composto usando a codificação fornecida abaixo -

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

Aqui,

A largura do gráfico é 768 e a altura 480.
A função d3.scale.linear é usada para construir uma nova escala linear com o intervalo de domínio especificado [15, 70].
Atribuímos um rótulo do eixo x como idade e rótulo do eixo y como contagem.
Em seguida, renderize as linhas de grade horizontais como verdadeiras.
Componha o valor das cores do gráfico de linha - vermelho para sexo masculino e azul para feminino.
Finalmente, definimos o valor brushOn como false e renderizamos o gráfico.

Etapa 5: Exemplo de trabalho

O código completo é o seguinte. Crie uma página da webcomposite.html e adicione as seguintes alterações a ele.

<html>
   <head>
      <title>DC composite 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 = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

Agora, solicite o navegador e veremos a seguinte resposta.