Boost d3.js graphiques avec des gradients SVG

Jan 18, 2026

Comment

[dix] [dix] [dix]

[dix]

NaDieh Bremer sera à Générer London En septembre, où elle démontrera comment prendre Svg au-delà de simples formes , en utilisant JavaScript, CSS et D3.js pour rendre les visualisations de données encore plus amusantes et excitantes. Réservez votre billet maintenant !

[dix]

D3.js a repris le monde de la visualisation des données interactive. Un énorme nombre d'exemples peut être trouvé, chacun présentant sa propre torsion amusante et utile sur la bibliothèque. Vous voyez, D3 n'est pas une bibliothèque de cartographie, mais quelque chose de beaucoup mieux. Il ne vous donne que les outils de base pour créer des visualisations de données et vous permet de créer pratiquement tout ce que vous pouvez penser. Même si certaines idées peuvent prendre plus de temps que d'autres, vous y arriverez finalement. Et cette liberté est exactement ce que j'aime à propos de D3.

À son noyau, chaque visuel D3 est construit d'éléments SVG. Par exemple, pour chaque point de données dans un diagramme de diffattation, pour créer un graphique à barres, sous forme d'axe, de coordonnées parallèles ou d'un graphe de pente, comme des étiquettes et extrêmement utiles pour pratiquement tout le reste. En outre, les SVGS sont indépendants de la résolution, ont donc fière allure sur tout niveau d'affichage ou de zoom.

Même si vous utilisez simplement des SVG pour leurs formes, vous pouvez créer de merveilleuses visualisations. Cependant, ils peuvent faire beaucoup plus - Pensez aux filtres SVG par exemple. Dans ce didacticiel, nous allons passer une plongée profonde dans un aspect spécifique et regarder de différentes manières qu'il peut être appliquée pour éclairer une visualisation. Permettez-moi de vous présenter des dégradés SVG!

Trouvez tous les fichiers dont vous avez besoin pour ce tutoriel ici .

[dix]

Gradients linéaires

Parfois, lorsque je crée un tableau de ligne avec une seule ligne, il se sent un peu trop vide et peut se perdre sur le fond blanc. Pour que cela se démarque plus, je place un gradient léger en dessous de celui de D3 d3.svg.area fonction, remplie d'un gradient SVG (voir fig 1).

Je veux que le dégradé fonctionne verticalement du sommet (où il a la même couleur que la ligne, mais une nuance plus claire) au fond (où elle devrait devenir blanche ou transparente). C'est ce que l'on appelle un gradient linéaire; quelque chose qui change de couleur le long d'une ligne droite.

Figure 1: A smooth SVG gradient applied to an area chart that lies below the line chart — Figure 1: Un gradient SVG lisse appliqué à un tableau de zone située sous le graphique de ligne

Nous commençons avec un SVG. C'est la toile sur laquelle notre carte de ligne sera tirée. Nous créons ensuite un Defs élément sur lequel nous pouvons ajouter un gradient linéaire élément. Il est très important de donner à la gradient une pièce d'identité unique - nous l'utiliserons plus tard lorsque nous devons donner la zone sous la ligne de remplissage.

 Var ArearyGradient = svg.append ("DEFS")
.append ("linéargradient")
.attr ("id", "AreaGradient")
.Attr ("x1", "0%"). ATTR ("Y1", "0%")
.Attr ("x2", "0%"). ATT ("Y2", "100%");

Les deux dernières lignes du code ci-dessus définissent la manière dont le dégradé doit fonctionner. Pensez-y comme une ligne invisible: x1 et y1 sont les positions de départ de la ligne invisible et la x2 et y2 Indiquez son point de fin, donner la direction du gradient. Il est souvent plus facile de les définir comme des pourcentages, bien qu'il soit possible d'utiliser des emplacements de pixels exacts. Par défaut, les emplacements font référence à la zone de sélection de l'élément sur lequel est appliqué le gradient. Nous voulons que le dégradé fonctionne verticalement, alors x1 et x2 devrait être la même ( 0% c'est bien), y1 doit être 0% et Y2 100% .

Maintenant, nous pouvons définir les couleurs du gradient. Au moins deux couleurs sont nécessaires pour un gradient, mais vous pouvez utiliser autant que vous le souhaitez. Pour chaque couleur dans le dégradé, vous ajoutez un arrêter élément. Dans ce cas, vous spécifiez la nuance avec couleur d'arrêt et l'emplacement (le long de la ligne invisible) où vous voulez que cette couleur soit pure (la couleur exacte) avec décalage .

Éventuellement, nous pouvons également définir l'opacité de chaque couleur avec optimisme . Ici, je rends l'ombre légèrement plus claire au sommet et complètement transparent au fond.

 AreaGradient.Append ("Stop")
.attr ("offset", "0%")
.attr ("stop-couleur", "# 21825c")
.attr ("stop-opacité", 0,6);
AreaGradient.Append ("Stop")
.Attr ("offset", "80%")
.attr ("stop-couleur", "blanc")
.Attr ("stop-opacité", 0);

Maintenant, le gradient linéaire est mis en place, nous pouvons créer un tableau de zone et le remplir avec le dégradé. Pour ce faire, utilisez URL (# ID de gradient) Dans le style de remplissage, avec l'ID unique, nous avons défini plus tôt.

 svg.append ("chemin")
.style ("Remplir", "URL (#Areagradient)")
.Attr ("d", zone de fonctionnement (jeu de données));

Ensuite, dessinez la ligne sur cette zone du graphique afin que le visualiseur puisse lire les résultats de votre graphique. Dans mon graphique, j'ai également placé des cercles pour souligner les emplacements de points de données spécifiques.

Don't miss Nadieh and other top web names at Generate London — Ne manquez pas NaDieh et d'autres noms de premier plan sur Generate London

Une légende lisse

Les légendes sont très courantes dans les visualisations de données. Lorsque vous utilisez des couleurs pour représenter un aspect particulier de vos données, vous devez expliquer ce que chaque couleur signifie. C'est là qu'une légende est entrée.

Dans certains graphiques, vous utiliserez des couleurs pour discriminer les cas distincts (par exemple, différents pays), auquel cas les couleurs sont souvent toutes très différentes. Cependant, vous pouvez également utiliser la couleur pour indiquer une valeur quantitative.

Ici, nous représentons la température à l'extérieur (voir fig 2). La couleur change progressivement pour indiquer la température passant de faible à élevé. Pour le montrer dans une légende, nous allons créer un long rectangle et le remplir avec un gradient de gauche à droite. Nous pouvons réutiliser le dégradé que nous avons créé pour notre carte de ligne, mais nous avons renversé de 90 degrés (afin x2 maintenant court à 100% , plutôt que y2 ). Bien que généralement une palette arc-en-ciel n'est pas recommandée dans la visualisation des données, les personnes sont utilisées pour voir des cartes de température colorées et j'ai choisi neuf couleurs à utiliser dans notre exemple.

Figure 2: The gradient of different colours represents the temperature in a location, explained in a legend below — Figure 2: Le gradient de différentes couleurs représente la température dans un endroit, expliquée dans une légende inférieure à

Au lieu d'écrire chaque arrêter Ajoutez, nous pouvons mettre toutes les couleurs dans un jeu de données et utiliser d3 Les données étape pour rendre le processus plus rapide. Avec D3, il est possible d'accéder à toute propriété de l'ensemble de données dans les étapes de chaînage ultérieures à l'aide d'une fonction anonyme, ce qui nous permet de définir la couleur et de décalage en seulement deux lignes.

 SVG.AppEND ("DEFS")
.append ("linéargradient")
.Attr ("id", "légendegradientmulti")
.Attr ("x1", "0%"). ATTR ("Y1", "0%")
.Attr ("x2", "100%"). ATT ("Y2", "0%")
.SelecTall ("Stop")
.Les données([
{offset: "0%", couleur: "# 2c7bb6"},
{offset: "12,5%", couleur: "# 00a6ca"},
{offset: "25%", couleur: "# 00ccbc"},
{offset: "37,5%", couleur: "# 90EB9D"},
{offset: "50%", couleur: "# ffff8c"},
{offset: "62,5%", couleur: "# f9d057"},
{offset: "75%", couleur: "# F29E2E"},
{offset: "87,5%", couleur: "# E76818"},
{offset: "100%", couleur: "# D7191C"}])
.Enter (). Ajouter ("Stop")
.Attr ("décalage", fonction (d) {retour d.offset;})
.attr ("stop-couleur", fonction (d) {retour d.color;});

Comme avant, la dernière étape consiste à créer un record et remplissez cela en utilisant l'ID de dégradé unique.

 svg.append ("rect")
.attr ("x", 0) .attr ("y", 0)
.Attr ("largeur", 500) .attr ("hauteur", 20)
.style ("Remplissez", "URL (#legendgradientmulti)");

Les graphiques que ces légendes vont avec sont recréées après la fabuleuse travail de www.weather-radials.com Montrant la température à New York ou à Beijing en 2015. La température moyenne chaque jour est indiquée par une ligne de couleur, et ces lignes sont agencées pour former un graphique circulaire. La légende ci-dessous explique ce que chaque couleur signifie. Un graphique utilise un gradient d'une couleur à une autre et l'autre progresse à travers les neuf couleurs.

[dix]

Gradients basés sur les données

D'une manière similaire à l'exemple précédent, nous pouvons également créer plusieurs gradients. Nous pourrions faire un gradient unique pour chaque point de données, en fonction d'un aspect particulier des données. J'ai utilisé cette approche dans un Visualisation exoplanète , où chaque planète a reçu un gradient basé sur la classe stellaire de l'étoile It Orbits. J'ai utilisé un effet de sphère subtil pour donner l'impression que chacun était éclairé par l'étoile au centre.

Figure 3: In this exoplanet visualisation, each planet has its own data-based gradient, creating the look of a sphere — Figure 3: Dans cette visualisation exoplanète, chaque planète a son propre gradient basé sur les données, créant le look d'une sphère

Revenons donc aux années 90 et transformons une collection de cercles plats représentant les planètes de notre propre système solaire dans des sphères 3D à la recherche de gradients radiaux (Fig 4). J'ai créé un petit jeu de données contenant le nom et le diamètre de la planète. Chacun sera généralisé par une couleur, que nous allons utiliser pour créer un gradient unique pour chaque planète.

 var gradientradial = svg.append ("defs")
.SelecTall ("radialgradient")
.Data (planètes)
.Enter (). Ajoutez ("radialgradient")
.attr ("id", fonction (d) {retour "gradient-" + d.planet;})
.Attr ("CX", "15%")
.attr ("cy", "50%")
.attr ("r", "85%");

Le code est légèrement différent ici: au lieu de la première annexe d'un élément de gradient, nous appendons maintenant immédiatement la planètes jeu de données et seulement après la Entrer Créons-nous un élément de gradient (dans ce cas radialgradient ). De cette façon, un gradient est créé pour chaque point de l'ensemble de données. Gardez l'identifiant de chaque point unique en le basant sur les données. L'index je fonctionne généralement, mais ici le nom de la planète est plus sûr. Cela garantit que nous pouvons accéder au bon gradient plus tard.

Un gradient radial est légèrement différent de celui linéaire. Nous le créons de la même manière qu'un cercle SVG: approvisionnez le centre du gradient par rapport aux limites de l'objet auquel elle sera appliquée, en utilisant cx et cic . Ces valeurs par défaut à 50% , qui est le centre de l'objet.

Figure 4: Each planet's gradient has been set to make it look like a sphere. Here, the four giant planets are clearly visible — Figure 4: Le gradient de chaque planète a été réglé pour le faire ressembler à une sphère. Ici, les quatre planètes géantes sont clairement visibles

Pour simuler l'apparition d'une étoile brillante sur les planètes d'un côté, nous allons déplacer le centre du gradient à gauche en réglant cx à 15% . Le rayon du gradient (où un arrêt de dégradé de 100% devrait finir) est indiqué par r . Il est également par défaut à 50% , mais à cause de notre cx offset, c'est maintenant 85% Donc, il remplit tout le cercle.

Nous pouvons utiliser les données de planète pour ajouter les arrêts de couleur. Pour créer l'apparence d'une sphère qui est brillée, la couleur à 0% devrait être plus léger. En utilisant d3.rgb (). Brighter (k) Je n'ai pas à spécifier une couleur séparée, car D3 fera ce calcul pour moi. La valeur k Définit combien de briquet je veux que la couleur devienne. Vers 50% J'ai défini la couleur vraie dans l'ensemble de données. Au bord, je veux une couleur légèrement plus sombre, donnant l'apparence de l'ombre. Logiquement, il y a aussi un d3.rgb (). Darker (k) que nous pouvons utiliser.

 gradientradial.append ("Stop")
.attr ("offset", "0%")
.attr ("stop-couleur", fonction (d) {
retour d3.rgb (D.Color) .Brighter (1); });
gradientradial.append ("arrêt")
.attr ("offset", "50%")
.ATTR ("Stop-Color", fonction (D) {retour D.Color;});
gradientradial.append ("arrêt")
.Attr ("offset", "100%")
.attr ("stop-couleur", fonction (d) {
retour d3.rgb (D.Color) .Darker (2.5); });

Si vous deviez inspecter le HTML après avoir exécuté cela, il y aurait huit gradients radiaux différents présents. Enfin, nous devons créer huit cercles, leur donner un rayon tel que défini par les données et les remplir avec le dégradé correct.

 svg.selectall (". Planètes")
.Data (planètes)
.Enter (). Ajouter ("Cercle")
/ * Définissez les attributs de la classe, de l'emplacement et du rayon ... * /
.style ("remplir", fonction (d) {
retour "URL (# gradient-" + d.planet + ")"; });

J'ai aussi ajouté le soleil, qui a son propre dégradé radial, mais je suis parti cx , cic et r avec le réglage par défaut de 50% Pour qu'il ressemble au soleil brille du centre vers l'extérieur.

A Disclaimer: Bien que les diamètres de toutes les sphères soient corrects les uns par rapport à l'autre, les distances sont bien sûr complètement bogus. Et je suis désolé que Saturne n'a pas de bagues

Jouer avec les orientations

Nous avons maintenant exploré comment définir des aspects de couleur basés sur des données, mais il y a beaucoup plus de possibilités. Nous pouvons définir pratiquement tout en fonction de données - même les orientations de chaque gradient.

Pour essayer cela, faisons un diagramme d'accord D3 montrant les collaborations entre les Avengers de l'univers cinématographique Marvel (Fig 5). Les accords qui fonctionnent entre les six vengeurs sont dimensionnés en fonction du nombre de films dans lesquels ils apparaissent tous les deux. Nous allons remplir ces accords avec un gradient linéaire simple, passant de la couleur d'un aveneur à l'autre.

Un accord n'est généralement pas exactement horizontal ni vertical. Nous devrons donc définir le x1, x2 , y1 et y2 valeurs basées sur les emplacements de chaque arc extérieur de chaque aveneur. Ces données ne sont pas dans notre jeu de données d'origine, mais après que nous l'avons fourni à D3's d3.layout.chord fonction, nous récupérerons un nouveau jeu de données contenant les angles de début et de fin de chaque arc (comme d.source.startangle et d.target.entretangle ). Ceci est le jeu de données que nous fournissons tout en créant les gradients.

Figure 5 Each chord has its own unique gradient, where the orientations (and colour) are defined by the data — Figure 5 Chaque accord a son propre gradient unique, où les orientations (et la couleur) sont définies par les données

Nous devons connaître les positions de pixels de la ligne invisible qui fonctionne d'une extrémité d'un accord à l'autre. Ceux-ci sont ensuite utilisés pour donner le x1, .., y2 attributs de chaque gradient. Nous pouvons appliquer une trigonométrie à l'aide du rayon du diagramme d'un accord et de l'emplacement à mi-chemin de chaque AVENGER pour récupérer ces positions. La formule trigonométrique complète a été supprimée du code suivant, mais vous le trouverez dans Le repo GitHub qui accompagne cet article .

Pour créer un identifiant unique pour chaque accord, nous créons une combinaison de chaîne de la valeur d'index du vengeur à chaque extrémité d'un accord. D3 d3.layout.chord Ensemble toujours un (des vengeurs) à la source et l'autre à cibler , qui fait une paire unique. Plus tard, lors du dessin des accords, nous pouvons utiliser la même technique pour appeler le gradient correct.

 var grades = svg.append ("DEFS"). Selectall ("linéargradient")
.Data (chord.chords ())
.Enter (). Ajoutez ("linéargradient")
.Attr ("ID", fonction (D) {Retour "GradientChord-" + D.Source.
Index + "-" + d.Target.index; })
.Attr ("GradientUnits", "UtilisateursPaaceonuse")
// l'emplacement de pixel d'une extrémité d'une corde
.attr ("x1", fonction (d, i) {return / * ... Trichs-trigonométrie basé sur
Les valeurs D.Source ... * /; })
.Attr ("Y1", fonction (D, I) {retour / * ... * /})
// l'emplacement de pixel de l'autre extrémité d'une corde
.Attr ("x2", fonction (d, i) {retour / * ... * /})
.Attr ("Y2", fonction (D, I) {retour / * ... * /});

Étant donné que chaque vengeur est défini par son propre numéro d'index, nous pouvons faire une fonction de couleur, couleurs , qui retourne la couleur de chaque vengeur par valeur index. Cela facilite la référence à la bonne couleur tout en ajoutant les deux arrêts de couleur.

 Grads.Appendez ("Stop")
.attr ("offset", "0%")
.ATTR ("Stop-Color", fonction (D) {Retour Couleurs (D.Source.index);
});
Grads.Appendez ("Stop")
.Attr ("offset", "100%")
.Attr ("stop-couleur", fonction (d) {couleurs de retour (d.target.index);
});

Tout ce qui reste consiste à appeler l'identifiant de dégradé approximatif lors de la définition du style de remplissage des accords (avec la même fonction que nous avons utilisé pour définir l'ID de dégradé).

Arrondir

Pendant ce didacticiel, nous avons examiné quatre manières différentes d'utiliser des gradients SVG dans les visualisations de données, mais il y a toujours plus de choses que vous pouvez faire. Avec des animations de dégradé, vous pouvez simuler un flux d'une partie de la visualisation des données à une autre, par exemple.

Alors la prochaine fois que vous concevez une visualisation des données, laissez votre créativité fonctionner gratuitement. Avec D3.js, vous n'avez pas à être contraint par ce que vous pensez être les limites de l'outil. Avec un peu de réflexion et d'effort hors de la boîte, vous pouvez faire les choses les plus étonnantes.

Ne manquez pas la session de NaDieh, SVG Au-delà de simples formes, à Generate London, 21-23 septembre. Reserve maintenant !

Cet article est apparu à l'origine dans magazine net numéro 280; Achetez-le ici !

[dix] [dix]

[dix]

Boost d3.js graphiques avec des gradients SVG

Gradients linéaires

Une légende lisse

Gradients basés sur les données

Jouer avec les orientations

Arrondir

Comment - Most Popular Articles

Comment configurer et optimiser votre StoreFront SMUGMUG

Adobe Fresco Tutoriel: Créez un portrait dans l'application de peinture

Comment dessiner des muscles

Construire un chatbot à moteur AI

Guide de la vision du cloud de Google

17 façons de dessiner de meilleures créatures

Comment peindre un paysage urbain avec des blocs de couleur

Comment concevoir une couverture de livre dans InDesign

Catégories