Visualiser l'état du Web

L'interface utilisateur Kendo fournit des widgets riches pour visualiser les données de manière significative. Dans cet article, John Bristowe vous montre comment afficher vos données de manière créative.

Récemment, les gens de dev.to ont mené leur enquête sur l’état du Web qui a été achevée. par 1899 répondants. Les résultats ont été partagés en ligne et un appel aux armes a été lancé: État des données sur le Web – Appel à analyse! J'ai relevé le défi de visualiser ces données avec Kendo UI ] SOTW Survey 2018 + Visualisation des déclarations d'opinion

Le sondage sur l'état du Web demandait aux développeurs de donner leur avis sur une série de Par exemple:

L’innovation Web dépasse le niveau natif

On a demandé aux répondants de donner leur avis sur la seize en les notant de 0 (pas d'accord) à 10 (d'accord).

Au total, 18 déclarations ont été notées avec 11 valeurs différentes (0-10 inclusivement). ; excluant les notes vierges). Étant donné l'étendue des valeurs de score sur un grand nombre d'énoncés, j'estimais que la grille était le meilleur contrôle à utiliser pour afficher ces données de manière significative.

Pour commencer, j'ai compilé ces opinions dans la structure de données suivante:

 // opinionData.json

[
  {
    "text": "Web innovation is outpacing native",
    "a0": 32,
    "a1": 10,
    "a2": 29,
    "a3": 39,
    "a4": 76,
    "a5": 286,
    "a6": 253,
    "a7": 401,
    "a8": 361,
    "a9": 131,
    "a10": 209,
    "Blank": 72
  },
  // other opinions and vote totals here...
]

Chaque opinion ( text ) est représentée dans un tableau avec le total des votes pour chaque réponse ( a0 égale 0 ou pas d'accord, a10 égale 10 ou d'accord). Par la suite, j'ai lié ces données à une grille avec un ID d'élément, opinionGrid :

 $ ("# opinionGrid"). KendoGrid ({
  colonnes: [
    { field: "text", title: "Opinion (0: Disagree, 10: Agree)" },
    { field: "a0", title: "0" },
    { field: "a1", title: "1" },
    { field: "a2", title: "2" },
    { field: "a3", title: "3" },
    { field: "a4", title: "4" },
    { field: "a5", title: "5" },
    { field: "a6", title: "6" },
    { field: "a7", title: "7" },
    { field: "a8", title: "8" },
    { field: "a9", title: "9" },
    { field: "a10", title: "10" }
  ],
  dataSource: {data: opinionData}
}); 

Cette configuration génère une grille d'information :

La grille fournit un certain nombre de fonctionnalités intégrées telles que pagination, tri et filtrage. L'activation du tri est facile; Il suffit de définir la propriété sortable sur true et vos utilisateurs pourront effectuer des opérations de tri en cliquant sur l'en-tête de la colonne. Tri par colonne, 10 – indiquant le plus d’accord avec une opinion – on peut voir que beaucoup de développeurs se sont sentis plus fortement opposés aux publicités en ligne:

ne raconte pas toute l'histoire. D'autres questions demeurent. Par exemple, où sont regroupées les opinions? La majorité des développeurs sont-ils d'accord ou pas d'accord avec une opinion? Ou sont-ils indifférents? Les données, telles qu'elles sont présentées ici, n'ont pas beaucoup de poids sémantique.

Ajoutons de la couleur

La bonne nouvelle est que nous pouvons améliorer cette situation en ajoutant de la couleur pour indiquer la valeur d'une cellule. Ceci est accompli en définissant un modèle de ligne pour la grille . Il s'agit d'un mécanisme d'extensibilité utile de la grille qui nous permet de contrôler le balisage généré pour chaque ligne. Nous pouvons combiner cette caractéristique avec chroma.js pour générer une échelle de couleurs basée sur la valeur de chaque cellule:

 importation de chroma à partir de "chroma-js";

const voteBackgroundColor = chroma.scale (["fff","66f"]). domain ([min,max]);
const voteColumnColor = fonction (votes) {
                          return voteBackgroundColor (votes) .luminance ()> 0.5?
                                 "noir" :
                                 "blanc";
                        };

$ ("# opinionGrid"). kendoGrid ({
  // ...
  rowTemplate: function (e, data) {
    var template = "" +
                   "" + e.text + "" + // colonne d'opinion
                   "" + e.a0 + "";

    // affiche d'autres colonnes (e.a1, e.a2, etc.)

    template + = "";
modèle de retour;
  }
}); 

J'ai utilisé chroma.js pour définir une fonction d'échelle de couleur appelée voteBackgroundColor basée sur le minimum ( min ) et maximum ( max ). ) valeurs dans la grille . (Ceux-ci sont calculés ailleurs.) Les valeurs faibles sont représentées par un arrière-plan plus clair (blanc) tandis que les valeurs élevées sont représentées par un arrière-plan plus foncé (bleu). Ces valeurs sont générées via l'API hex () et appliquées via le style background-color . L'API luminance () de chroma.js est utilisée pour la fonction voteColumnColor afin de déterminer le style de couleur pour la cellule. Les couleurs plus claires utilisent le noir alors que les couleurs plus foncées utilisent le blanc. Cela fournit un niveau de contraste pour une meilleure expérience utilisateur.

Comme vous pouvez le voir, l'ajout de la couleur fournit plus d'informations sur les groupes de partitions autour d'opinions particulières. Un rapide coup d’œil à ces données révèle un regroupement d’opinions telles que «Je suis satisfait de l’état des outils de test A / B pour le Web» et «Je n'aime pas les publicités sur le Web». nous obtenons une meilleure idée de l'apparence générale après avoir utilisé la luminance de la couleur d'arrière-plan pour déterminer la couleur de la police:

sans affecter la fonctionnalité de la grille Par exemple, nous pouvons toujours trier les données:

Calcul et affichage des moyennes

Allons plus loin en ajoutant une colonne pour afficher un score moyen pour chaque ligne. Cela nous permettra de déterminer les opinions les plus / les moins soutenues. Si je calcule ces valeurs à la volée dans la fonction rowTemplate la grille ne serait pas en mesure de les trier. Cela est dû au fait que les opérations (comme le tri) sont effectuées par le biais de la source de données liée ; pas le contrôle auquel il est lié (c'est-à-dire Grid ). Par conséquent, pour conserver les capacités de tri de la grille je dois conserver le score moyen dans la source de données liée:

 // les scores sont compris entre 0 et 10 (inclus)
Fonction calculerAvis (avis) {
  pour (var i = 0; i <opinions.length; i ++) {
    var avg = 0;
    pour (var j = 0; j <11; j ++) {
      avg + = j opinions [i]["a" + j];
    }
    avg = moyenne / totale;
    opinions [i] .avg = avg;
  }
  retourner des avis;
} 

Une fois que le score moyen a été ajouté à la source de données liée, nous pouvons l'afficher dans la grille comme suit:

 $ ("# opinionGrid"). KendoGrid ({
  colonnes: [
    { field:  "avg", title:  "Avg" }
    // other columns here...
  ]
})

Voici la grille triée par une colonne moyenne:

Wow. Les développeurs n'aiment pas vraiment les annonces sur le Web. ? Ils sont également optimistes quant à l'avenir des PWA et estiment que le Web s'améliore pour les utilisateurs finaux. Inversement, ils semblent en désaccord avec les opinions, «le Web de bureau est généralement lent et lent» et «Je suis satisfait de l'état des outils de test A / B pour le Web».

Grille en utilisant l'approche utilisée précédemment pour colorer chaque cellule en fonction de sa valeur. Ici, nous allons définir une autre fonction d'échelle de couleurs appelée fAvg basée sur les scores minimums ( minAvg ) et maximum ( minAvg ):

 const fAvg = chroma.scale (["fff","999"]). domain ([minAvg,minAvg]);

$ ("# opinionGrid"). kendoGrid ({
  // ...
  rowTemplate: function (e, data) {
    // ...
    var avgColumnColor = fAvg (e.avg) .luminance ()> 0.5? "noir blanc";
    template + = "" + e.a0 + "";
// ...
  }
}); 

Voici la grille avec cette modification:

Les capacités de visualisation des données prennent en charge les éléments SVG et HTML5 . Pour plus de Zing

A Sparkline est un petit graphique que vous pouvez incorporer à d'autres contrôles comme la grille . Il est super économique en termes de surface d'écran car il contient beaucoup d'informations dans un espace réduit.

Ajoutons une autre colonne pour afficher un Sparkline pour chaque ligne. Nous devrons faire un peu de créativité pour cela car la grille a un rowTemplate défini. Je vais créer une fonction qui affichera le balisage requis pour créer un Sparkline de manière déclarative (via les attributs data - * ):

 function getSparkline (data) {
  retourner "
";
} 

Je vais ajouter un gestionnaire pour l'événement dataBound qui se déclenche pour la grille pour initialiser chaque Sparkline et générer le Sparkline via la fonction rowTemplate :

 $ ("# opinionGrid"). kendoGrid ({
  // ...
  colonnes: [
    // other columns here...
    { } // add a column for the sparkline
  ],
  dataBound: fonction (e) {
    kendo.bind (". sparkline");
  }
  rowTemplate: function (e, data) {
    // ...
    template + = getSparkline (avis);
  }
}); 

Voici le résultat:

Malgré sa taille, un Sparkline préserve la fidélité des données en rendant le contenu sous forme de SVG. Voici un exemple à un niveau de zoom de 500%:

Le Sparkline peut également rendre un élément HTML5 .

Interactions avec l'utilisateur

Par Par défaut, les lignes sont mises en évidence dans la grille lorsqu'un utilisateur les survole. Comme nous avons appliqué des styles dans chacune des cellules pour la couleur d'arrière-plan, cela remplace le comportement par défaut. Par exemple, si vous survolez une ligne, le style de la ligne est remplacé par ceux ajoutés précédemment dans la fonction rowTemplate :

Corrigeons ce comportement avec une règle de style met en évidence chaque ligne:

 #opinionGrid tbody> tr: hover> td {
  background-color: #ffa! important;
  couleur: noir! important;
} 

Je ne suis pas fan de l'utilisation de ! Important mais il est nécessaire dans ce cas de remplacer les styles de couleur appliqués précédemment. Avec ce changement, les lignes individuelles seront mises en surbrillance lorsque la souris les survolera:

Visualisation des questions oui / non

Une autre section de l'enquête demandait aux développeurs de répondre par oui ou non à une série de questions. Par exemple:

Votre équipe / projet prend-il en charge IE 10 et moins?

Au total, 9 questions ont été répondues (excluant les notes vides): oui ou non totaux. Une approche appropriée pour visualiser ces données consiste à utiliser la grille en combinaison avec un Sparkline pour créer un diagramme oui / non:

voir que peu de développeurs utilisent des images au format WebP dans leurs applications Web. J'aurais spéculé que plus de développeurs utilisent le format ces jours-ci. Je suppose que l'adoption de nouveaux formats d'image peut prendre beaucoup de temps.

La configuration utilisée pour créer cette visualisation est assez simple:

 $ ("# yesNoGrid"). KendoGrid ({
  colonnes: [
    { field:  "Question"  },
    { field:  "No", headerAttributes:  { style:  "text-align:right;"  }  },
    { field:  "Yes"  }
  ],
  dataBound: fonction (e) {
    kendo.bind (". yesNoSparkline");
  },
  dataSource: {data: yesNoData, sort: {champ: "Non", dir: "desc"}},
  rowTemplate: function (e, data) {
    retour "" +
            "" + e.Question + "" +
            getYesNoColumn ("No", e.No, "# f66") +
            getYesNoColumn ("Yes", e.Yes, "# 00b312") +
            "";
  },
  scrollable: false,
  triable: vrai
}); 

Nous utilisons ici la même technique que celle utilisée pour créer la grille dans la section précédente en définissant une fonction rowTemplate . Cela utilise une fonction appelée getYesNoColumn qui est une fonction d'assistance pour générer le Sparkline : fonction

 getYesNoColumn (vote, voteCount, couleur) {
  var votePosition = voteCount> 400? "insideEnd": "outsideEnd";
  var voteLabelColor = voteCount> 400? "#fff": "# 000";
  var reverse = vote == "Non"? ", inverse: vrai": "";
  var textAlignment = vote == "Non"? "style = " text-align: right;  "": "";
  retourner "
";
} 

Cette fonction permet de déterminer où placer les étiquettes pour chaque widget Sparkline généré dans la grille . Notez que l'étiquette est placée à l'extérieur de Sparkline si sa valeur est trop petite pour y être rendue:

Go Have Some Fun!

L'interface utilisateur du Kendo constitue la clé de voûte de la création de riches visualisations de données. Cependant, cela ne vous empêche pas de faire preuve de créativité. En fait, il est amusant de peindre en dehors des lignes parfois. Comme vous l'avez vu dans cet article, il existe de nombreuses manières de visualiser les données avec l'interface utilisateur Kendo.

Vous pouvez consulter la visualisation complète des données d'enquête avec Kendo UI sur StackBlitz: SOTW Survey 2018 . En attendant, n'ayez pas peur de vous amuser en utilisant l'interface utilisateur Kendo pour vos projets de visualisation de données!