DC.js - Exemple de travail de tableau de bord

Dans ce chapitre, nous développerons un tableau de bord dans DC en cliquant et en sélectionnant un graphique.

Exemple de travail

Maintenant, nous avons le contexte et pouvons commencer à écrire du code. Il contient les étapes suivantes -

Étape 1: ajouter des styles

Ajoutons des styles dans le CSS en utilisant le codage ci-dessous.

<style>
   .dc-chart { font-size: 12px; }
   .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
   .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>

Ici, nous avons attribué des styles pour le graphique, le haut de la grille et l'élément de la grille.

Étape 2: créer une variable

Créons une variable dans DC comme indiqué ci-dessous.

var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

Ici, nous avons attribué un identifiant de variable barChart en ligne, countChart id est mystats, pieChart est pie et gridChart id est mygrid.

Étape 3: lire les données

Lisez les données du fichier people.csv comme indiqué ci-dessous.

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

Si les données ne sont pas présentes, cela renvoie une erreur. Maintenant, attribuez les données à un filtre croisé. Ici, nous avons utilisé le mêmepeople.csvfile, que nous avons utilisé dans nos exemples de graphiques précédents. Il ressemble à l'illustration ci-dessous.

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 4: définir la dimension pour l'âge

Vous pouvez définir la dimension en utilisant le codage ci-dessous.

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Une fois la dimension attribuée, groupez l'âge en utilisant le codage ci-dessous.

var ageGroup = ageDimension.group().reduceCount();

Étape 5: définir la dimension du genre

Vous pouvez définir la dimension en utilisant le codage ci-dessous.

// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();

Étape 6: Générer un graphique à barres

Maintenant, générez un graphique à barres en utilisant le codage ci-dessous.

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

Ici,

Nous avons attribué la largeur du graphique à 400 et la hauteur à 200.
Ensuite, nous avons spécifié la plage de domaine comme [15, 70].
Nous avons défini l'étiquette de l'axe des x comme âge et l'étiquette de l'axe des y comme nombre.
Nous avons spécifié la fonction ElasticY et X comme true.

Étape 7: Générer un graphique à secteurs

Maintenant, générez un graphique à secteurs en utilisant le codage ci-dessous.

pieChart
   .width(200)
   .height(100)
   .dimension(genderDimension)
   .group(genderGroup);

Ici,

Nous avons attribué la largeur du graphique à 200 et la hauteur à 100.
Maintenant, regroupez la dimension par sexe.

Étape 8: Créer la grille et compter le graphique

Maintenant, créez la grille et comptez le graphique en utilisant le codage ci-dessous.

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

Étape 9: rendre la grille et compter

Maintenant, rendez la grille et comptez en utilisant le codage ci-dessous.

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
pieChart.render();
countChart.render();
gridChart.render();

Ici, nous avons trié le nom en utilisant la fonction html () et avons finalement rendu le graphique.

Étape 10: Exemple de travail

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

<html>
   <head>
      <title>DC dashboard sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
      
      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
               <div id = "pie"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var pieChart = dc.pieChart('#pie'); //, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

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

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

         barChart
            .width(400)
            .height(200)
            .x(d3.scale.linear().domain([15,70]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .elasticY(true)
            .elasticX(true)
            .dimension(ageDimension)
            .group(ageGroup);

         pieChart
            .width(200)
            .height(100)
            .dimension(genderDimension)
            .group(genderGroup);

         countChart
            .dimension(mycrossfilter)
            .group(mycrossfilter.groupAll());

         gridChart
            .dimension(ageDimension)
            .group(function (data) {
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
            })
            .size(100)
            .htmlGroup (function(d) { 
               return 'Age: ' + d.key +
               '; Count: ' + d.values.length +
               ' people'
            })
            .html (function(d) { return d.name; })
            .sortBy(function (d) {
               return d.name;
            })
            .order(d3.ascending);

         barChart.render();
         pieChart.render();
         countChart.render();
         gridChart.render();
      });
      </script>
   </body>
</html>

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

Vous pouvez vous vérifier en cliquant sur des barres, des graphiques à secteurs et voir comment les données changent.