d3.js
Rendre robuste, réactif et réutilisable (r3) pour d3

Introduction

Scatter Plot

Cet exemple contient plus de 1000 lignes de code au total (trop à incorporer ici). Pour cette raison, tout le code est accessible sur http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (également hébergé sur https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Notez que bl.ocks.org utilise l'iframe donc pour voir le redimensionnement, vous devrez cliquer sur le bouton ouvert (coin inférieur droit de l'iframe). Comme il y a beaucoup de code, il a été divisé en plusieurs fichiers et le segment de code correspondant fera référence à la fois par nom de fichier et par numéro de ligne. Veuillez ouvrir cet exemple au fur et à mesure.

Qu'est-ce qui fait un graphique?

Il existe plusieurs composants de base qui entrent dans un tableau complet; à savoir ceux-ci comprennent:

• Titre
• les axes
• étiquettes d'axes
• les données

D'autres aspects pourraient être inclus en fonction du graphique - par exemple, une légende de graphique. Cependant, bon nombre de ces éléments peuvent être contournés avec une info-bulle. Pour cette raison, il existe des éléments spécifiques au graphique interactif - par exemple des boutons pour basculer entre les données.

Puisque le contenu de notre graphique sera interactif, il serait approprié que le graphique lui-même soit dynamique - par exemple, redimensionne lorsque la taille de la fenêtre change. SVG est évolutif, vous pouvez donc simplement adapter votre graphique en conservant la perspective actuelle. Cependant, en fonction de la perspective définie, le graphique peut devenir trop petit pour être lisible même s'il reste suffisamment d'espace pour le graphique (par exemple, si la largeur est supérieure à la hauteur). Par conséquent, il peut être préférable de simplement redessiner le graphique dans la taille restante.

Cet exemple explique comment calculer de manière dynamique le placement des boutons, des titres, des axes, des étiquettes d'axes, ainsi que gérer des jeux de données de quantités variables de données.

Installer

Configuration

Comme nous visons la réutilisation du code, nous devrions créer un fichier de configuration contenant des options globales pour certains aspects de notre graphique. Un exemple d'un tel fichier de configuration est charts_configuration.json .

Si nous regardons ce fichier, nous pouvons voir que j'ai inclus plusieurs éléments qui devraient déjà avoir une utilisation claire pour notre graphique:

• fichiers (stocke la chaîne où se trouve notre graphique)
• document_state (quel bouton est actuellement sélectionné pour notre graphique)
• chart_ids (identifiants HTML pour les graphiques que nous allons faire)
• svg (options pour le svg, par exemple la taille)
• plot_attributes
  • title (définir divers attributs de police)
  • infobulle (définir diverses propriétés de style d'info-bulle)
  • axes (définir divers attributs de police)
  • boutons (définir divers attributs de police et de style)
• parcelles
  • diffusion (définir divers aspects de notre nuage de points, par exemple rayon de point)
• couleurs (une palette de couleurs spécifique à utiliser)

Fonctions d'aide

En plus de définir ces aspects globaux, nous devons définir certaines fonctions d'assistance. Ceux-ci peuvent être trouvés sous helpers.js

• ajax_json (charge les fichiers json de manière synchrone ou asynchrone)
• keys (renvoie les clés de l'objet donné - équivalent à d3.keys ())
• parseNumber (une analyse générale des nombres au cas où nous ne saurions pas quel type ou quel nombre est)
• typeofNumber (renvoie le type de numéro)

index.html

Enfin, nous devrions configurer notre fichier HTML. Dans le cadre de cet exemple, nous placerons notre graphique dans une balise de section où l' id correspond à l'identifiant fourni dans le fichier de configuration (ligne 37). Comme les pourcentages ne fonctionnent que s’ils peuvent être calculés à partir de leur membre parent, nous incluons également des styles de base (lignes 19-35).

Faire notre nuage de points

Ouvrons make_scatter_chart.js . Maintenant, portons une attention particulière à la ligne 2, où plusieurs des variables les plus importantes sont prédéfinies:

• svg - d3 selection du svg du graphique
• chart_group - sélection d3 du groupe dans le svg dans lequel les données seront placées
• canvas - aspects fondamentaux de l'extrait de svg pour plus de commodité
• marges - les marges à prendre en considération
• maxi_draw_space les plus grandes valeurs de x et y dans lesquelles nous pouvons dessiner nos données
• doc_state - l'état actuel du document si nous utilisons des boutons (dans cet exemple, nous sommes)

Vous avez peut-être remarqué que nous n'avons pas inclus le svg dans le HTML. Par conséquent, avant de pouvoir faire quelque chose avec notre graphique, nous devons ajouter svg à index.html s'il n'existe pas encore. Ceci est réalisé dans le fichier make_svg.js par la fonction make_chart_svg . En regardant make_svg.js nous voyons que nous utilisons la fonction d'assistance parseNumber sur la configuration du graphique pour la largeur et la hauteur de svg. Si le nombre est un flottant, la largeur et la hauteur du svg sont proportionnelles à la largeur et à la hauteur de la section. Si le nombre est un nombre entier, il sera simplement défini sur ces nombres entiers.

Lignes 6 - 11 teste pour voir - en effet - s'il s'agit du premier appel ou non et définit le chart_group (et l'état du document s'il s'agit du premier appel).

La ligne 14-15 extrait les données actuellement sélectionnées par le bouton cliqué. la ligne 16 définit data_extent . Alors que d3 a une fonction pour extraire l'étendue des données, je préfère stocker l'étendue des données dans cette variable.

Les lignes 27 à 38 contiennent la magie qui définit notre graphique en faisant les marges, les boutons, le titre et les axes. Celles-ci sont toutes déterminées dynamiquement et peuvent sembler un peu complexes, nous allons donc les examiner à tour de rôle.

make_margins (dans make_margins.js)

Nous pouvons voir que l’objet des marges prend en compte de l’espace à gauche, à droite, en haut et en bas du graphique (respectivement x.left, x.right, y.top, y.bottom), le titre, les boutons et les axes.

Nous voyons également que les marges des axes sont mises à jour à la ligne 21.

Pourquoi faisons-nous cela? Eh bien, à moins de spécifier le nombre de tics, les étiquettes à cocher la taille à cocher et la taille de la police à cocher, nous n'avons pas pu calculer la taille nécessaire aux axes. Même dans ce cas, il faudrait encore évaluer l’espace entre les étiquettes de tiques et les tiques. Par conséquent, il est plus facile de créer des axes fictifs à l'aide de nos données, de voir la taille des éléments svg correspondants, puis de renvoyer la taille.

En fait, nous n'avons besoin que de la largeur de l'axe y et de la hauteur de l'axe x, ce qui est stocké dans axes.y et axes.x.

Avec nos marges par défaut définies, nous calculons alors l' max_drawing_space (lignes 29-34 dans make_margins.js)

make_buttons (dans make_buttons.js)

La fonction crée un groupe pour tous les boutons, puis un groupe pour chaque bouton, qui à son tour stocke un cercle et un élément de texte. La ligne 37 - 85 calcule la position des boutons. Pour ce faire, il vérifie si le texte à droite de la longueur de chaque bouton est plus long que l'espace autorisé (ligne 75). Si c'est le cas, il laisse tomber le bouton sur une ligne et met à jour les marges.

make_title (dans make_title.js)

make_title est similaire à make_buttons dans la mesure où il divisera automatiquement le titre de votre graphique en plusieurs lignes et coupera le trait si nécessaire. C'est un peu piraté car il ne possède pas la sophistication du schéma de césure de TeX, mais il fonctionne suffisamment bien. Si nous avons besoin de plus de lignes, les marges sont mises à jour.

Avec les boutons, le titre et les marges définis, nous pouvons créer nos axes.

make_axes (dans make_axes.js)

La logique de make_axes reflète celle du calcul de l'espace requis par les axes factices. Ici, cependant, il ajoute des transitions pour changer entre les axes.

Enfin notre nuage de points

Avec tous ces réglages effectués, nous pouvons enfin créer notre nuage de points. Comme nos ensembles de données peuvent comporter un nombre de points différent, nous devons en tenir compte et tirer parti des événements d’entrée et de sortie de d3 en conséquence. L'obtention du nombre de points déjà existants est faite à la ligne 40. L'instruction if de la ligne 45 - 59 ajoute plus d'éléments de cercle si nous avons plus de données, ou transpose les éléments supplémentaires dans un coin et les supprime s'il y en a trop.

Une fois que nous savons que nous avons le bon nombre d'éléments, nous pouvons transférer tous les éléments restants à leur position correcte (ligne 64)

Enfin, nous ajoutons une info-bulle aux lignes 67 et 68. La fonction tooltip se trouve dans make_tooltip.js

Tableau des boîtes et moustaches

Pour montrer la valeur de faire des fonctions généralisées comme celles de l'exemple précédent (make_title, make_axes, make_buttons, etc.), considérez cette case et cette grille: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Bien que le code pour créer les boîtes et les moustaches soit plus intense que le simple placement des points, nous constatons que les mêmes fonctions fonctionnent parfaitement.

Diagramme à bandes

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248