Graphique en 3 dimensions (X, Y et Z) utilisant D3.js
Je cherche un graphique qui a 3 dimensions (x, y et z) et utilise D3.js. S'il vous plaît, faites-moi savoir s'il existe un site de visualisation de données où je peux trouver un tel graphique ou s'il en existe un sur d3js.org que j'ai oubliée d'une manière ou d'une autre.
Le diagramme de dispersion 3D lié à VividD et à Lars Kotthoff est probablement le meilleur exemple de ce que vous demandez, mais je vais être contraire et suggérer que vous posez peut-être la mauvaise question.
Essayer de simuler trois dimensions {spatiales} sur un écran plat sera toujours imparfait et rendra la lecture des données difficile. Cependant, il est très facile de représenter graphiquement trois dimensions données dans D3. Vous utilisez les dispositions horizontale et verticale pour deux de vos variables de données, puis la taille, la forme, la couleur ou l'ombrage pour la troisième variable.
Si les trois variables de données sont mieux représentées par des nombres continus, la meilleure solution consiste à utiliser un diagramme de dispersion des bulles, où vos trois dimensions d'affichage sont les positions horizontale, verticale et la taille de la bulle.
Voici un exemple qui utilise également le composant interactif en ligne pour ajouter une quatrième dimension affichée via le mouvement:
Vous avez dit que vos trois dimensions sont Client, Produit et contenu. Je ne sais pas quel type de valeur est "contenu" (nombre ou catégorie), mais je suis à peu près sûr que "client" et "produit" sont des catégories.
Voici un exemple où deux dimensions catégoriques sont utilisées pour mettre en forme un tableau, puis chaque cellule du tableau contient un cercle dimensionné par la troisième dimension numérique. Si votre troisième variable est une catégorie, vous pouvez utiliser une forme pour indiquer le type de "contenu" (le cas échéant) associé à chaque association de "client" et de "produit":
Bubble Matrix - cliquez pour original
En voici une autre, où la troisième dimension est montrée par couleur plutôt que par taille. Les couleurs représentent une variable continue, mais vous pouvez facilement choisir un ensemble de couleurs très contrastées pour représenter les catégories:
Matrice de couleurs - cliquez pour original
Bien entendu, un graphique à barres empilées ancien est une autre façon de montrer deux catégories et une quantité numérique:
Et vous ne devez pas vous arrêter à trois variables de données. Si deux des variables de données sont des catégories ou des chiffres que vous ne craignez pas de les regrouper en catégories, vous pouvez représenter quatre variables avec une approche "petit multiple", où vous créez un tableau représentant les variables catégorielles, puis répétez un graphique du deux autres variables à l'intérieur de chaque cellule du tableau.
Comme ça:
Ou ceci (où semaine et jour de la semaine sont deux dimensions des données et catégorie/montant sont les deux autres):
Camembert Petits Multiples - cliquez pour original
J'espère que cela vous a donné beaucoup d'idées ...
Voici un exemple qui ressemble à ce que vous recherchez:
Sachez que cet exemple utilise X3DOM , tentative relativement nouvelle de standardisation du rendu 3D en HTML, qui n’est pas prise en charge par tous les navigateurs.
Quelques exemples de test supplémentaires sur l’utilisation de D3.js avec X3DOM:
Recherchez également X3DOM dans le groupe Google D3.
Une autre approche potentiellement intéressante serait d'utiliser D3.js et Three.js, comme ici:
Affichage des traces GPS en 3D avec three.js et d3.js
En général, D3.js est davantage orienté vers la visualisation de données que la visualisation scientifique, ce qui signifie qu'il ne supporte pas beaucoup l'affichage de l'espace 3D ce n’est pas ce dont on a besoin).
Par exemple (cet exemple n'est pas directement lié à vos exemples, c'est juste pour une explication): D3 fournit un algorithme pour le dessin 2D d'arbres, mais ne fournit aucun appareil pour le placement 3D d'arbres et le rendu ultérieur de ce placement sur un écran 2D.
Si vous n'êtes pas limité à D3.js, vous pourriez peut-être atteindre les mêmes objectifs plus facilement et plus rapidement avec d'autres bibliothèques, écrites spécifiquement à des fins similaires à la vôtre. Par exemple, vous pouvez utiliser Pre3D . Jetez un oeil à cet exemple . Pre3D n'utilise pas X3DOM, mais simplement un rendu HTML simple sur un canevas 2D. Je pense que l’animation (rotation) de ses graphes 3D est plus fluide que celle du premier exemple D3/X3DOM.
J'espère que cette réponse pourrait vous aider.
Les meilleurs exemples que j'ai pu trouver (qui étaient tous deux incroyablement simples) étaient:
Highcharts (diffusion 3D)
http://www.highcharts.com/demo/3d-scatter-draggable
Vis.js (diverses options 3D telles que barre et point)
http://visjs.org/examples/graph3d/playground/index.html
Fournissez simplement les coordonnées x, y et z, configurez la configuration comme vous le souhaitez et vous rirez.
Il semble qu'un nouvel exemple de quelque chose de plus proprement dit "3D" soit sorti . http://bl.ocks.org/supereggbert/aff58196188816576af0
Et voici une adaptation que j'ai faite:
J'ai créé d3-3d , un plugin d3 qui vous aide à visualiser vos données 3d. J'espère que cela vous aidera à atteindre votre objectif.
Stefan Nieke a récemment réalisé des trucs cools avec son plugin d3-3d: https://bl.ocks.org/Niekes