DC.js - Dashboard-Arbeitsbeispiel

In diesem Kapitel entwickeln wir ein Dashboard in DC, indem wir auf ein Diagramm klicken und es auswählen.

Arbeitsbeispiel

Jetzt haben wir den Hintergrund und können anfangen, Code zu schreiben. Es enthält die folgenden Schritte:

Schritt 1: Stile hinzufügen

Fügen wir dem CSS Stile hinzu, indem wir die unten angegebene Codierung verwenden.

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

Hier haben wir Stile für das Diagramm, die Gitteroberseite und das Gitterelement zugewiesen.

Schritt 2: Erstellen Sie eine Variable

Lassen Sie uns eine Variable in DC erstellen, wie unten gezeigt.

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

Hier haben wir eine barChart-Variablen-ID in der Zeile zugewiesen, die countChart-ID ist mystats, pieChart ist pie und die gridChart-ID ist mygrid.

Schritt 3: Lesen Sie die Daten

Lesen Sie die Daten aus der Datei people.csv wie unten gezeigt.

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

Wenn die Daten nicht vorhanden sind, wird ein Fehler zurückgegeben. Ordnen Sie nun die Daten einem Crossfilter zu. Hier haben wir das gleiche verwendetpeople.csvDatei, die wir in unseren vorherigen Diagrammbeispielen verwendet haben. Es sieht aus wie unten gezeigt.

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

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

Schritt 4: Stellen Sie die Dimension für das Alter ein

Sie können die Dimension mithilfe der folgenden Codierung festlegen.

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

Nachdem die Dimension zugewiesen wurde, gruppieren Sie das Alter mit der unten angegebenen Codierung.

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

Schritt 5: Legen Sie die Dimension für das Geschlecht fest

Sie können die Dimension mithilfe der folgenden Codierung festlegen.

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

Schritt 6: Erstellen Sie ein Balkendiagramm

Generieren Sie nun ein Balkendiagramm mit der folgenden Codierung.

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

Hier,

Wir haben die Diagrammbreite als 400 und die Höhe als 200 zugewiesen.
Als nächstes haben wir den Domänenbereich als [15, 70] angegeben.
Wir haben die Beschriftung der x-Achse als Alter und die Beschriftung der y-Achse als Anzahl festgelegt.
Wir haben die elastische Y- und X-Funktion als wahr angegeben.

Schritt 7: Erstellen Sie ein Kreisdiagramm

Generieren Sie nun ein Kreisdiagramm mit der folgenden Codierung.

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

Hier,

Wir haben die Diagrammbreite als 200 und die Höhe als 100 zugewiesen.
Gruppieren Sie nun die Dimension nach Geschlecht.

Schritt 8: Erstellen Sie das Raster und das Zähldiagramm

Erstellen Sie nun das Raster und zählen Sie das Diagramm mit der unten angegebenen Codierung.

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

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

Schritt 9: Rendern Sie das Raster und zählen Sie

Rendern Sie nun das Raster und zählen Sie mit der folgenden Codierung.

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

Hier haben wir den Namen mit der Funktion html () sortiert und schließlich das Diagramm gerendert.

Schritt 10: Arbeitsbeispiel

Der vollständige Code lautet wie folgt. Erstellen Sie eine Webseitedashboard.html und fügen Sie die folgenden Änderungen hinzu.

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

Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.

Sie können sich selbst überprüfen, indem Sie auf Balken und Kreisdiagramme klicken und sehen, wie sich die Daten ändern.