Comment ajouter des graphiques à votre site WordPress en utilisant D3.js

Vous connaissez peut-être le terme « visualisation des données », car il est devenu plus courant en tant que pratique et cheminement de carrière. Il y a une raison pour laquelle ce domaine émergent est bien avancé - il est important que nous en apprenions constamment plus sur nos utilisateurs, ainsi que de leur montrer les données pour étayer nos affirmations.

Lorsque les données sont présentées de manière claire et professionnelle, elles sont faciles à comprendre et à interpréter. Dans la plupart des cas, vos utilisateurs sont des personnes visuelles, alors quelle meilleure façon d'illustrer les données qu'avec des graphiques ? D3.js, également appelé documents pilotés par les données, est un excellent moyen d'ajouter des graphiques à votre site WordPress.

Pourquoi D3 ?

Cette bibliothèque aide les concepteurs à présenter des données sur le Web. Les possibilités sont infinies, ce qui en fait une bibliothèque très populaire. Du simple au complexe en passant par tout ce qui se trouve entre les deux, D3 peut être personnalisé pour restituer à peu près n'importe quel type de graphique. Il fonctionne bien avec les technologies Web standard, peut manipuler le DOM, est super flexible et les graphiques peuvent être personnalisés exactement à votre goût.

À ce jour, vous avez très probablement rencontré des graphiques vectoriels évolutifs, souvent appelés SVG. C'est le type de format créé par la bibliothèque D3. Les SVG sont géniaux car ils sont de petite taille, évolutifs et indépendants de la résolution.

Juste pour être clair, cette solution n'est pas livrée avec des graphiques pré-construits prêts à l'emploi - vous devrez créer les vôtres ! Jetez un œil à la galerie D3 et vous pourrez voir de nombreux exemples intéressants pour vous inspirer.

En tant que solution Open Source, vous n'avez pas à vous soucier des licences et des coûts. Parce qu'il est Open Source, le développement est en cours. Pour vous tenir au courant de la dernière version, vous pouvez bifurquer D3 sur Github.

Créer un graphique D3 simple

Maintenant que nous savons à quel point D3 est génial, construisons quelque chose. Nous allons créer un graphique en anneau simple, qui couvrira les concepts de base de D3.

Première étape : ajouter les scripts à votre site

Tout d'abord, vous devrez ajouter le script D3 à votre site WordPress. Le site Web d3 le propose en téléchargement ou vous pouvez accéder directement à la dernière version. Vous remarquerez que j'utilise une version minifiée pour ce tutoriel. D3 est naturellement assez petit en taille, mais le minifié est toujours légèrement plus petit à seulement 148 Ko.

Ensuite, vous allez créer un nouveau fichier JavaScript dans lequel le script de graphique personnalisé va. Donnez au fichier un nom reconnaissable afin qu'il soit facile à trouver.

Il est très important que le script D3 soit appelé avant le JavaScript spécifique au graphique. Si les éléments ne sont pas appelés dans le bon ordre, les graphiques ne seront pas rendus. (Je le sais par expérience personnelle, et si vous ne l'attrapez pas tout de suite, vous passerez probablement beaucoup de temps à essayer de réparer des choses qui ne sont pas cassées.)

Ces scripts doivent être ajoutés à votre site après la balise body de fermeture. Lors de l'inspection de la page, assurez-vous qu'elle ressemble à ceci :

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Gardez à l'esprit que votre chemin de fichier peut être différent de celui-ci, en fonction de la structure de votre fichier.

Deuxième étape : ajouter des scripts pour créer le graphique

Vous ne toucherez pas du tout au fichier d3.js , vous ne travaillerez que dans votre fichier graphique spécifique. Dans ce cas, il s'appelle charts.js .

Décomposons les choses pièce par pièce. Tout d'abord, créez votre variable et établissez ce dont vous aurez besoin dans votre fonction. Je nommerai cette variable donut .

var donut = (function(one) {
})();

À l'intérieur des accolades, vous ajouterez vos informations de dimensionnement.

var width = 400,

height = 400,

radius = 200

Ensuite, définissez vos couleurs. Que diriez-vous d'un graphique gris et bleu? La première couleur répertoriée ici est un gris clair qui sera la couleur par défaut. La seconde est la couleur bleue qui représentera les données.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Vous aurez besoin de quelques données pour tester cela, alors ajoutons-les ensuite. Pour ce didacticiel, les données sont codées en dur, mais vous pouvez également utiliser des données de feuille de calcul et des données dynamiques avec D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Vous pouvez maintenant ajouter plus de détails qui aident à définir le rendu du graphique.

L'arc définit le rayon intérieur. Imaginez le rayon extérieur du graphique - vous voudrez qu'il soit assez épais, donc soustraire 100 devrait être suffisant.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Cela crée le conteneur SVG et le #donut est ce que vous ciblerez sur votre page pour afficher le graphique. C'est là que vous commencerez à voir vos couleurs à partir de l'étape ci-dessus.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Code fini

Juste au cas où vous voudriez comparer ce que vous avez à l'échantillon, voici l'extrait de code complet.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Voir le tableau

Vous devrez créer une nouvelle page ou publier afin de pouvoir "appeler" le graphique en anneau pour le voir réellement. Assurez-vous que vous êtes en mode d'édition de texte.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Viewbox et rapport d'aspect par rapport à la taille

Il y a quelque chose de plus dans la balise SVG, qui est la viewBox et preserveAspectRatio . Cela n'a pas été généré par D3 et est totalement facultatif. Vous pouvez avoir une autre méthode de dimensionnement préférée, mais cela a tendance à bien fonctionner et cela aide à la réactivité des graphiques.

Surtout dans ce cas, étant donné que nous voulons conserver une forme parfaitement ronde, la définition d'un rapport d'aspect garantira que le SVG s'adapte. C'est là que la viewBox entre en jeu. L'avantage de la viewBox est qu'elle définit comment toutes les mesures et coordonnées utilisées à l'intérieur du SVG doivent être mises à l'échelle pour s'adapter à l'espace disponible. Si vous utilisez également 400 comme mesure, voici une explication rapide sur la façon de conserver la forme circulaire.

Nous avons deux valeurs de 400 qui sont identiques ; la raison en est que l'image est correctement mise à l'échelle. Avec notre viewBox="0 0 400 400" , nous créons un système de coordonnées pour le graphique. Il mesure 400 unités de large et 400 unités de haut. La largeur et la hauteur du graphique SVG établissent la zone visible et la définition d'un viewBox vous permet de spécifier que vos graphiques peuvent s'étirer pour s'adapter à un certain conteneur (probablement la fenêtre d'affichage par défaut, qui est la partie de la page Web que l'utilisateur peut voir actuellement).

Il y a un peu plus car même avec la viewBox définie, elle ne sera toujours pas parfaitement mise à l'échelle. Il ne sera pas déformé, ce qui est une bonne chose, mais il y a plus dans l'équation. Rencontrez l'ailier, preserveAspectRatio . Il n'a aucun effet à moins qu'il y ait un viewBox qui définit le rapport d'aspect de l'image. L'échelle sera ajustée afin de préserver le rapport d'aspect, afin que vous puissiez conserver votre graphique parfaitement circulaire. Lorsque vous incluez le preserveAspectRatio , vous planifiez des cas où le viewBox ne correspond pas au rapport d'aspect de la fenêtre ou du conteneur dans lequel se trouve le graphique. Dans la plupart des cas, par défaut, l'image sera mise à l'échelle jusqu'à ce qu'elle corresponde à la fois à la hauteur et à la largeur, mais se centre dans tout espace supplémentaire. Nous avons inclus preserveAspectRatio="xMidYMid" qui indique au navigateur de centrer le graphique dans la fenêtre d'affichage dans les deux sens.

Le plus important à retenir est de savoir que le graphique ne sera pas coupé et qu'il est évolutif. La clé pour vraiment comprendre cela est d'expérimenter avec les valeurs. Une bonne façon de le faire est de voir ce qui se passe lorsque les valeurs sont modifiées et comment cela se rapporte à la fenêtre d'affichage.

Prise en charge du navigateur et d3

Il y a de fortes chances que vous utilisiez un navigateur moderne, mais cela vaut la peine de mentionner si vous devez prendre en charge des navigateurs plus anciens. Dans l'ensemble, la prise en charge des navigateurs est excellente et vous ne rencontrerez probablement aucun problème, mais D3.js ne fonctionne pas bien avec les navigateurs plus anciens comme IE8.

La création d'un graphique simple est un excellent moyen d'être opérationnel avec D3.js. Connaître les bases et se familiariser avec les graphiques de démarrage D3 vous seront très utiles lorsque vous concevez vos données et passez à d'autres types de graphiques. Du simple au complexe, les options de conception sont infinies.

Comment votre graphique s'est-il avéré ? Faites le nous savoir dans les commentaires!

Et après?

Téléchargez cet ebook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs ! Nous avons trouvé que tous ces plugins étaient simples à utiliser, pas trop performants sur votre site et tout simplement fiables.

Prêt à installer votre nouveau plugin préféré ? Cliquez ci-dessous !