Vous cherchez un javascript graphique de la bibliothèque qui peut attirer l' ~200 000 points sur une courbe de dispersion
Je fais construire une application web qui est de l'interface comprend un grand nuage de points pour donner à l'utilisateur une vue d'ensemble de ses données. Le nuage de points a environ 200 000 points. Actuellement, je suis en utilisant le JFreeChart bibliothèque Java côté serveur qui fait un excellent travail de dessin de l'intrigue, il ne prend environ une seconde à le rendre.
Pour rendre mon application de plus en plus interactif, j'aimerais passer à l'utilisation de Javascript pour dessiner le graphique côté client. Cela permettez-moi de façon interactive filtrage de points, les info-bulles, cliquable points, etc. J'ai testé avec Google Charts, mais cela prend du temps de rendu, et apporte le navigateur à un statu quo.
Quelqu'un sait d'un Javascript de cartographie de la bibliothèque qui peut faire face à un grand jeu de données? Ou dois-je abandonner l'idée et le bâton avec JFreeChart? Je n'ai pas l'esprit si la page elle-même prendra un certain temps à charger (ce qui est inévitable, étant donné la grande quantité de données à transférer) mais j'ai besoin de le tableau de mise à jour dans un délai raisonnable en réponse à une entrée utilisateur.
OriginalL'auteur mojones | 2011-09-21
Vous devez vous connecter pour publier un commentaire.
Ma suggestion serait d'aller aux Highcharts et Highcharts Stocks (http://www.highcharts.com).
Vous pouvez trouver une démo avec 52k points de données, avec des zooms, des bulles d'aide et d'interaction : http://www.highcharts.com/stock/demo/data-grouping, et le tableau prend environ 90ms de construire sur mon (très rapide) de la machine.
Cependant, très grands ensembles de données sont les plus susceptibles de poser de gros problèmes de performances, si il est sur le réseau de transfert, de la consommation de mémoire, temps d'affichage, etc... d'Ailleurs, 200k de points de données montant d'environ 1 point de données/pixel sur un 600*400 graphique, ou 400 points de données par colonne, il n'a juste aucun sens. Peut-être que certains de regroupement et/ou de filtrage serait utile.
OriginalL'auteur
Pour ceux d'entre vous qui sont à la recherche à cette question aujourd'hui, DC.js est une puissante bibliothèque pour la cartographie, de grands ensembles de données, qui est construit sur D3.js. Il dispose de plusieurs types de diagramme à nuage de points, y compris, bar, et des graphiques en ligne. Ils courent si Square crossfilter bibliothèque pour réduire la carte de données avant de traçage.
OriginalL'auteur
Comme un intermédiaire ou une solution alternative, d'envisager le déploiement de votre
JFreeChart
via Java Web Start. Cette exemple suggère des moyens pour mettre à jour l'aspect d'un diagramme de manière interactive.OriginalL'auteur
Si vous avez le luxe de ne pas développer pour IE7 ou IE8, puis pour un grand nombre de points de données, vous voudrez peut-être essayer de tirer parti de votre carte graphique à l'aide de webgl. Je n'ai pas encore essayé mais
three.js
semble intéressant.OriginalL'auteur
Comme d'autres l'ont souligné -
Vous pouvez utiliser la fenêtre actuelle et le niveau de zoom actuel à la limite de ce que vous avez besoin de montrer
Niveau de Zoom de regroupement et à la rupture de
Vous pouvez utiliser le niveau de zoom actuel pour dessiner des diagrammes en conséquence, tel qu'une vue récapitulative présente regroupés info et que vous faites un zoom avant pour une région en particulier, vous décomposer les données en plusieurs parcelles.
Je suggère que vous groupe ensemble de petites variations de vos données et que votre utilisateur effectue un zoom avant, vous pouvez décomposer les données affichables en petits morceaux.
Fenêtre actuelle/dessiner uniquement les données dans la fenêtre d'affichage
De dessiner des points seulement quand ils sont seuls dans la fenêtre d'affichage - éviter d'attirer tous les points de vous nuage de points sur chaque niveau de zoom. Votre utilisateur le plus probable veut concetrate sur un point qui serait la raison pour laquelle il a effectué un zoom avant sur ce point - donc éviter de tirer tous en panne points de niveau de zoom.
Ne vous limitez pas à comploter bibliothèques
Un nuage de points est assez simple à mettre en oeuvre dans une Toile/SVG bibliothèque qui permet les opérations de base de dessin de formes/points - Puisque c'est un assez avancée de cas d'utilisation, je voudrais abandonner l'idée de me limiter à des bibliothèques qui permettent de traçage et de regarder autour pour les bibliothèques générales qui permettent SVG/Toile dessins.
Une idée folle, mais je voudrais l'essayer:
Il y a une bibliothèque qui utilise WebGL pour les dessins 2D sur HTML5 canvas(il utilise la carte graphique ainsi que le CPU pour dessiner des graphismes), appelé Pixi.js.
Il est ciblé pour le développement de jeux pour la plupart, mais il serait un slam-dunk pour tracer un nuage de points avec elle, un zoom autour et laisser les événements click sur vos points.
OriginalL'auteur
Je vous suggérons d'utiliser le graphique ExtJs 4 bibliothèque
http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html
Vous avez besoin de transférer des données en json si c'est important de données.
OriginalL'auteur
Vous pourriez voulez expérimenter avec la cartographie des bibliothèques qui se sont construits sur
raphael.js
.Pas sûr au sujet de leurs performances de rendu, mais ils sont d'excellents html5 bibliothèques.
Vaut la peine d'essayer.
http://g.raphaeljs.com/
OriginalL'auteur