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.