Fermer

août 24, 2018

Comparer D3 à l'interface utilisateur Kendo pour la visualisation de données JavaScript


Bien sûr que je prenais. Naturellement, j'ai demandé si je pouvais utiliser les graphiques de Kendo UI, car je les connais bien, mais le cours demandait spécifiquement D3. Donc, pour m'amuser, j'ai essayé de créer un graphique en D3 et en Kendo UI en même temps pour voir les différences.

Les interfaces D3 et Kendo ne sont que deux des façons de créer des graphiques dans une application Web et des options de simplement dessiner des formes à l'écran en utilisant des composants graphiques sophistiqués. Les deux D3 et Kendo UI sont populaires et les deux vont faire le travail. Les similitudes s'arrêtent là, cependant, et les deux représentent des approches très différentes, avec des caractéristiques très différentes.

D3

D3 signifie Data-Driven Documents et c'est une bibliothèque JavaScript pour créer des visualisations de données dynamiques et interactives . Il a été publié en 2011 et comprend un ensemble de fonctionnalités très flexibles et puissantes pour vous aider à créer diverses visualisations de données graphiques.

Interface utilisateur Kendo

L'interface utilisateur Kendo est un ensemble de bibliothèques JavaScript qui comprend un large éventail de composants, allant des grilles de données et des diagrammes aux planificateurs, aux menus déroulants et même aux boutons. Kendo UI a été initialement développé par la société Telerik, qui fait désormais partie de Progress . Kendo UI est une bibliothèque commerciale et il existe des versions disponibles qui prennent en charge les frameworks Angular, React, et Vue ainsi que les environnements jQuery de base. Les composants du graphique Kendo UI incluent un large éventail de types de graphiques populaires, y compris les barres, les camembert, les lignes et autres.

Mise en route

Mon objectif est d'utiliser les deux outils pour Le graphique que je veux implémenter (dessiné ici dans Excel, pour être neutre) est:

 graphique cible

En outre, pour montrer comment faire de l’animation de base, ajoutons également un outil astuces pour que lorsque vous passez la souris sur l'une des barres, vous voyez la valeur de cette barre.

Cela signifie que nous devons faire trois choses de base:

  1. Dessine les barres de base qui reflètent les valeurs de données individuelles
  2. Draw les axes X et Y et les étiquettes d'affichage
  3. Créer des info-bulles pour le graphique

Plutôt que de décrire les bibliothèques plus en détail, commençons et voyons à quoi elles ressemblent.

Configuration du fichier

nous devons faire est d'inclure ces deux bibliothèques. Par souci de simplicité et de portabilité, je chargerai tout depuis le net au lieu de supposer que vous avez téléchargé les bibliothèques. Nous commencerons par ajouter deux bibliothèques CSS que la bibliothèque du Kendo UI utilisera. Ensuite, nous ajoutons dans la bibliothèque jQuery que Kendo UI utilise également. Ensuite, nous établissons un lien dans la bibliothèque du Kendo UI. Enfin, nous incluons un lien vers la bibliothèque D3.




     

Nous utiliserons également le même ensemble de données pour les deux graphiques, à savoir:

 var data = [454, 660, 721, 746, 808, 704, 775, 756, 688, 733, 693, 564, 537, 628, 630, 611, 600, 640,694, 708 ]; 

The Markup

peu de choses à faire en HTML en plus de placer un espace réservé pour chaque graphique et de spécifier la taille de la zone graphique.

Graphique D3


Graphique de l'interface utilisateur Kendo

Création d'un graphique D3 de base

la partie amusante! Nous allons commencer avec le graphique D3 en premier. Il y a plusieurs choses à faire. Outre l'identification de l'emplacement du graphique, nous devons définir les échelles x et y, gérer la taille et le positionnement, puis ajouter les données à la zone du graphique. Voici le code pour cela:

 function drawDChart () {
  var svg = d3.select ("# chart1");
  var margin = 5;
  var width = + svg.attr ("width") - 30;
  var height = + svg.attr ("height") - margin - 40;
  var y = d3.scaleLinear ()
    .domain ([0, 800])
    .range ([height, 0]);
  var x = d3.scaleLinear ()
    .domain ([0, data.length])
    .range ([0, width - 20]);
  var g = svg.append ("g")
    .attr ("transformer", "translate (0," + margin + ")");
  g.append ("g")
    .attr ("transformer", "translate (55, 0)")
    .selectAll ("rect")
    .data (données)
    .enter (). append ("rect")
    .attr ("width", (width / data.length - 15))
    .attr ("height", function (d) {return height - y (d);})
    .attr ("x", fonction (d, i) {return x (i) + 5;})
    .attr ("y", function (d) {return y (d);})
    .attr ("fill", function (d, i) {return "steelblue"});
}; 

Dans la première ligne, nous sélectionnons le graphique qui a l'identifiant de "chart1". Les quelques lignes suivantes déterminent la hauteur et la largeur du graphique en fonction des dimensions spécifiées dans le code HTML, moins certaines marges et la possibilité de placer un axe.

Les deux sections suivantes établissent les échelles des deux axes. Ceux-ci seront utilisés pour traduire les valeurs de données réelles en coordonnées sur le graphique. J'ai codé en dur le "800" comme limite supérieure de l'échelle Y. Dans une utilisation réelle, nous souhaitons trouver le maximum dans les données à afficher et ensuite arrondir. Dans ce cas, la plus grande valeur est 775 et j'ai arrondi à 800 parce que nous ne voulons pas que notre graphique s'arrête à 775 car cela semblerait étrange. L'axe des X est mis à l'échelle par le nombre de valeurs dans notre ensemble de données. Dans la section suivante, nous poussons un peu le graphique dans la zone d'affichage.

Nous arrivons maintenant à la section D3. Nous indiquons ici à D3 les données que nous allons utiliser et spécifions les éléments de base de chaque barre du graphique. Nous lui indiquons la largeur de chaque barre, nous lui indiquons la hauteur de la barre (en prenant la valeur de données et en la mettant à l'échelle). Nous lui disons où placer chaque barre, en spécifiant les valeurs X et Y en utilisant les échelles spécifiées précédemment. Enfin, je lui ai dit de colorier chaque barre avec "steelblue" juste parce que j'aime le bleu.

Remarquez au milieu que nous "entrons" la nouvelle information. Cela fait partie d'un concept de base de D3. Vous pouvez faire trois choses avec un graphique: entrer, mettre à jour et quitter. Enter prend de nouvelles données et les ajoute à un graphique existant – il ajoute de nouvelles barres au graphique. La mise à jour modifie les valeurs des barres existantes. Quitter supprime les éléments (barres) du graphique. Nous n'avons pas besoin d'entrer dans les détails ici, mais sachez simplement que c'est un concept avec lequel vous devez vous familiariser si vous voulez faire quelque chose de compliqué avec D3.

Avec le code que nous avons spécifié jusqu'à présent , voici ce que nous obtenons:

 Exemple de graphique D3

Notez qu'il n'y a pas d'axe car nous n'en avons pas encore spécifié, ce n'est qu'un ensemble de barres.

Passons maintenant au même graphique avec l'interface Kendo. C'est vraiment compliqué (je plaisante). Fondamentalement, tout ce que nous avons à faire est de lui dire quel type de graphique et quelles sont les données. Le code pour ceci est:

 function drawKChart () {
  $ ("# chart2"). kendoChart ({
    seriesDefaults: {
      type: "colonne"
    },
    série: [{
      data: data,
      color: "steelblue"
    }]
  })
} 

Pas grand chose à dire à ce sujet ici. Cela nous donne le tableau:

 Exemple de graphique Kendo UI

Vous verrez quelques différences tout de suite. Notez que nous n'avons pas eu besoin de dire au graphique de l'interface utilisateur du Kendo ce que devrait être notre axe Y maximum. Il examine les données, les arrondit et choisit une plage raisonnable à utiliser. De même, nous n’avons rien dit au sujet de l’axe des X – il a simplement compté le nombre de points de données et a évolué ici en conséquence. Bien qu'il n'ait pas dessiné un axe X avec des étiquettes, parce que nous ne l'avons pas donné, il a au moins dessiné les lignes d'axe. Il a également pris le "steelblue" que j'ai spécifié et ajouté un peu d'ombrage pour le rendre un peu plus intéressant.

Enfin, il a ajouté des lignes de grille. C'est un bon exemple de l'approche différente adoptée par les deux bibliothèques. D3 fait ce que je lui dis et seulement ce que je lui dis. Cela suppose que si je veux des lignes de grille, je lui dirai d'utiliser des lignes de grille. Kendo UI suppose que je veux dessiner un graphique utile et agréable. Donc, il fait des suppositions sur ce que je vais vouloir. Je peux désactiver les lignes de la grille, mais la valeur par défaut est que je les aurai probablement, alors au lieu de les ajouter (D3), avec le Kendo UI, je devrais les désactiver. Une approche différente.

Making it Work

Et comme je déteste toujours quand les gens donnent des exemples partiels que je ne peux pas exécuter, je vais aussi énumérer le dernier élément de mon programme dont j'ai besoin pour exécuter ces deux fonctions. est:

 $ (document) .ready (function () {
  drawDChart ();
  drawKChart ();
}); 

Cela attend que le document soit prêt et exécute ensuite les deux fonctions du graphique. Maintenant, vous avez le code entier.

Prochaines étapes

Allons un peu plus loin et désactivons tout d'abord ces lignes de grille pour que nos deux graphiques correspondent. Cela se fait facilement dans le code Kendo UI en ajoutant deux sections supplémentaires au kendoChart. Celles-ci désactivent les lignes de grille horizontales et verticales pour correspondre au graphique D3, et obligent également l'axe Y à utiliser 800 comme valeur maximale au lieu des 900 qu'il a sélectionnées. Cela correspond également à ce que nous avons dit à notre tableau D3.

 categoryAxis: {
  majorGridLines: {
    visible: faux
  }
},
valueAxis: {
  max: 800,
  majorGridLines: {
    visible: faux
  }
} 

Ajout de l'axe

La prochaine chose qui manque est l'axe Y sur notre graphique D3. Nous n'avons pas eu à dire au Kendo UI d'ajouter un axe Y, il l'a fait automatiquement. Encore une fois, le Kendo UI fait ce qu'il pense que nous aurons besoin dans un graphique, D3 ne fait que ce que nous disons. Alors que nous y sommes, ajoutons un axe X sur les deux graphiques. Pour ajouter les deux axes sur le graphique D3, il suffit d'ajouter le code:

 // crée l'axe des y
g.append ("g)
  .attr ("transformer", "translate (40, 0)")
  .call (d3.axisLeft (y));
// crée l'axe des x
g.append ("g")
  .attr ("transformer", "translate (40," + height + ")")
  .call (d3.axisBottom (x)); 

C'est assez simple. Nous disons simplement à D3 où nous voulons le placer avec translate puis nous lui demandons simplement d’ajouter l’axe et de lui donner les données.

Du côté du Kendo UI, nous avons déjà lignes pour l'axe X, nous avons juste besoin des étiquettes. Pour cela, il suffit d'ajouter des données à la section CategoryAxis avant de nous donner:

 categoryAxis: {
  catégories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
  majorGridLines: {
    visible: faux
  }
} 

Cela nous donne deux graphiques très proches. Il y a quelques détails mineurs que je pourrais peaufiner pour les rendre exactement les mêmes, mais cela est assez proche.

 Cartes d'interface utilisateur D3 et Kendo

Une dernière chose que j'ajouterai aux deux graphiques est un ensemble d'outils des astuces pour nous donner des détails sur les données lorsque nous survolons un bar. Cela mettra en évidence la façon dont nous ajoutons l'animation.

Pour le graphique du Kendo UI, il suffit d'ajouter la section suivante à notre code graphique:

 info-bulle: {
  visible: vrai,
  template: "Données: # = valeur #"
} 

Et nous obtenons ceci:

 Diagramme Kendo UI

Du côté D3, bien sûr, nous avons besoin d'un peu plus d'informations. Nous devons d'abord ajouter une section définissant exactement l'aspect de l'info-bulle. Ceci est fait avec le code:

 // définit les paramètres des info-bulles
var ttip = d3.select ("body")
  .append ("div")
  .style ("position", "absolute")
  .style ("z-index", "10")
  .style ("visibilité", "caché")
  .style ("background", "white") 

Ensuite, nous devons ajouter l'action à la section graphique en ajoutant:

 // définir l'info-bulle
.on ("mouseover", fonction (d, i) {
  .ttip.style ("visibility", "visible")
  .style ("left", (d3.event.pageX) + "px")
  .style ("top", (d3.event.pageY) + "px")
  .html ("Données:" + d)
})
.on ("mouseout", function () {ttip.style ("visibility", "hidden")}); 

Les deux sont assez simples. Ce code indique que lorsque nous survolons une colonne, affichez l'info-bulle à un emplacement spécifique. La dernière ligne de cette section est similaire à celle du côté de l'interface utilisateur Kendo où nous avons la possibilité de fournir un modèle pour ce qui est affiché exactement dans l'info-bulle. Pour le graphique D3, cela nous donne:

 Exemple d'info-bulle Kendo UI

Le code complet de cet exemple est disponible pour vous sur GitHub .

Tant le D3 que le Kendo UI sont largement utilisés et il n'est pas juste de dire que l'un est meilleur que l'autre. Ils sont à différents niveaux d'abstraction et servent des objectifs différents. D3 vous permet d'avoir un contrôle détaillé sur tous les aspects de la visualisation. Kendo UI vous permet également de contrôler de nombreux paramètres, mais émet un certain nombre d’hypothèses sur ce que vous voulez voir. Vous pouvez faire en sorte que D3 fasse tout ce que fait automatiquement le Kendo UI, mais vous devez lui dire explicitement de faire chaque chose individuellement. Et lorsque D3 exige que vous exécutiez un certain niveau de programmation pour chaque nouvelle fonctionnalité, pour le Kendo UI, ce ne sont que des paramètres supplémentaires que vous pouvez paramétrer.

Si vous avez besoin d'un travail besoin de soutien au cas où vous seriez coincé ou que quelque chose ne va pas, alors une bibliothèque commerciale comme Kendo UI est votre meilleur choix. Si vous faites quelque chose de vraiment inhabituel qui nécessite une personnalisation extrême, ou qui travaille sur un projet de classe ou une autre application non commerciale et que vous aimez simplement jouer avec du code, alors D3 convient parfaitement. Les deux options sont certainement meilleures que dessiner des rectangles individuels!

Pour plus d'informations, consultez:


Les commentaires sont désactivés en mode de prévisualisation.


[ad_2]
Source link