Ce graphique linéaire présente les mêmes données que le graphique à barres empilées, mais utilise des points pour marquer les points de données et des lignes pour les relier. L'interrupteur à bascule (créé dans MUI) permet de passer d'un simple graphique en courbes à un graphique en aires. Les deux visualisations de données utilisent pratiquement le même code D3.js.
Les diagrammes à aires fonctionnent mieux comme visualisation de données lorsqu'il s'agit d'ensembles de données uniques : ils aident les utilisateurs à voir plus clairement la valeur totale représentée par les points de données, car celle-ci est proportionnelle à la taille de la zone ombrée. En revanche, lorsqu'il y a plusieurs points de données, les zones ombrées peuvent prêter à confusion, car une zone peut masquer les zones situées derrière elle. D3.js permet un contrôle total sur ce point : par exemple, nous pouvons réduire l'opacité de certaines ou de toutes les zones, ou même réduire l'opacité des zones qui chevauchent celles qui se trouvent en dessous. Les diagrammes de surface peuvent également prêter à confusion lorsqu'ils affichent des valeurs négatives, bien que D3.js offre des moyens de contourner ce problème, comme l'utilisation de couleurs différentes pour les valeurs positives et négatives.
Comme dans l'exemple du Bar Chart, il est possible d'utiliser des contrôles d'interface utilisateur pour mettre l'accent sur un ensemble de données particulier dans la visualisation de données, et de les relier au code D3.js. Cependant, dans ce cas, des cases à cocher sont utilisées plutôt que des boutons radio. Avec les boutons radio, vous devez sélectionner une seule option, alors qu'avec les cases à cocher, chaque case peut être sélectionnée ou désélectionnée indépendamment des autres. Avec cette interface, il est donc possible de sélectionner n'importe quelle permutation d'ensembles de données : par exemple, un seul organe, deux organes ou les trois organes. Le codage est un peu plus complexe, surtout lorsqu'il y a plus qu'un petit nombre de points de données.
D3.js nous permet également de sélectionner la courbe utilisée pour relier les données. En règle générale, nous choisissons la courbe la mieux adaptée à la visualisation des données et nous la codons en dur. Cependant, pour illustrer ce qui est possible, nous avons ajouté une série de boutons radio pour que les utilisateurs puissent choisir la leur. Certaines courbes, telles que Catmull-Rom, passent par tous les points de données, tandis que d'autres, telles que la courbe de base, ne le font pas. L'avantage de ne pas passer par tous les points de données est qu'il est possible de très bien montrer les tendances dans les données. À l'inverse, la courbe de Catmull-Rom inclut tous les points de données réels, mais comprend des dépassements et des sous-dépassements, ce qui rend plus difficile la mise en évidence des tendances.
Le coût d'un graphique linéaire ou d'un graphique en aires D3.js dépend fortement de la mesure dans laquelle il doit être codé sur mesure. Les Add-ons tels que les infobulles, les animations personnalisées, etc. augmentent légèrement le coût mais améliorent considérablement l'expérience de l'utilisateur. La page Prix vous donnera une idée générale. La page Prix vous donnera une idée générale. Toutefois, n'hésitez pas à nous contacter pour discuter gratuitement avec un développeur afin de déterminer ce qui vous convient le mieux.