DC.js - Graphique composite

Le graphique composite est un type spécial de graphique fourni par DC.js. Il fournit une option pour rendre plusieurs graphiques dans la même grille de coordonnées. Le graphique composite permet des options de visualisation de graphique avancées avec une ligne de code minimale.

Méthodes de graphique composite

Avant de commencer à dessiner un graphique composite, nous devons comprendre le dc.compositeChartclass et ses méthodes. Le dc.compositeChart utilise des mixins pour obtenir les fonctionnalités de base de dessin d'un graphique. Les mixins utilisés par le dc.compositeChart sont les suivants -

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

Le diagramme de classes complet de dc.barChart est le suivant -

Le dc.compositeChart obtient toutes les méthodes des mixins spécifiés ci-dessus. Il a sa propre méthode pour dessiner le graphique composite, qui est expliquée ci-dessous -

compose ([subChartArray])

Définissez la collection de graphiques à rendre dans le même graphique en grille de coordonnées.

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

enfants ()

Obtient tous les graphiques composés dans la même grille de coordonnées.

childOptions ([childOptions])

Obtient ou définit les options de graphique pour tous les graphiques enfants composés dans la même grille de coordonnées.

shareTitle ([shareTitle])

Obtient ou définit le titre partagé du graphique. S'il est défini, il sera partagé avec tous les graphiques enfants composés dans la même grille de coordonnées.

shareColors ([shareColors])

Similaire à la fonction shareTitle (), sauf qu'elle partage les couleurs au lieu du titre.

rightY ([yScale])

Obtient ou définit l'échelle des y pour l'axe droit du graphique composite.

rightYAxis ([rightYAxis])

Obtient ou définit l'axe y droit du graphique composite.

rightYAxisLabel (rightYAxisLabel [??])

Obtient ou définit l'étiquette de l'axe y droite.

alignYAxes ([alignYAxes])

Obtient ou définit l'alignement entre les axes y gauche et droit.

useRightAxisGridLines ([useRightAxisGridLines])

Obtient ou définit s'il faut dessiner le quadrillage à partir de l'axe y droit du graphique composite. Le comportement par défaut consiste à dessiner à partir de l'axe y gauche.

Dessiner un graphique composite

Dessinez un graphique composite en utilisant DC.js. Pour ce faire, nous devons suivre les étapes ci-dessous -

Étape 1: définir une variable

Définissons une variable de graphique comme indiqué ci-dessous -

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

Ici, la fonction dc.compositeChart est mappée avec un conteneur ayant composite comme son id.

Étape 2: lire les données

Lire les données du fichier people.csv -

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

Si les données ne sont pas présentes, cela renvoie une erreur. Nous utiliserons le même fichier people.csv. L'exemple de fichier de données est le suivant -

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

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

Étape 3: mappez les données

Maintenant, mappez les données comme indiqué ci-dessous -

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

Ici, nous avons attribué l'âge à partir des données Crossfilter. Le ~~ est un double opérateur PAS au niveau du bit. Il est utilisé comme un substitut plus rapide.

Maintenant, appliquez la dimension âge et regroupez les données de genre en utilisant le codage ci-dessous -

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

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

Étape 4: Générer un graphique

Maintenant, générez un graphique composite en utilisant le codage donné ci-dessous -

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

Ici,

La largeur du graphique est de 768 et la hauteur de 480.
La fonction d3.scale.linear est utilisée pour construire une nouvelle échelle linéaire avec la plage de domaine spécifiée [15, 70].
Nous attribuons une étiquette de l'axe des x comme âge et une étiquette de l'axe des y comme compte.
Ensuite, rendez les lignes de quadrillage horizontales comme vraies.
Composez la valeur des couleurs du graphique en courbes - rouge pour le sexe masculin et bleu pour la femme.
Enfin, nous définissons la valeur brushOn sur false et rendons le graphique.

Étape 5: Exemple de travail

Le code complet est le suivant. Créer une page Webcomposite.html et ajoutez-y les modifications suivantes.

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

Maintenant, demandez le navigateur et nous verrons la réponse suivante.