Protovis contre D3.js


84

TLDR: Quelqu'un a-t-il une expérience des deux protovis et D3.js pour éclairer les différences entre les deux?

Je joue avec protovis depuis 2 semaines et ça a été génial jusqu'à présent. Sauf que maintenant, il me semble avoir heurté un peu un mur de briques avec de l'animation.

protovis: http://vis.stanford.edu/protovis/

Je veux faire une animation assez simple, mais avec protovis, cela semble moins qu'intuitif - je commence à penser que protovis n'a jamais été vraiment destiné à l'animation. Alors, j'ai commencé à regarder D3.js:

http://mbostock.github.com/d3/ex/stack.html

Cela ressemble beaucoup, mais:

  • Semble plus léger
  • Semble conçu pour interagir avec d'autres éléments DOM ainsi qu'avec SVG
  • Semble destiné à ajouter des animations

Quelqu'un peut-il éclairer d'autres différences?

Je serais très reconnaissant pour toute contribution

Réponses:


117

J'ai fait pas mal de travail avec Protovis et quelques trucs avec D3. En plus des points que vous mentionnez, je pense que les différences suivantes me ressortent:

  • Là où Protovis fournit une couche d'abstraction simplifiée entre les propriétés visuelles que vous spécifiez, D3 utilise les spécifications CSS et DOM réelles - donc au lieu de .width(10)ou .fillStyle('#00C')vous utiliseriez .style('width', 10)ou .attr('fill', '#00C'). Dans ces exemples, la différence est assez triviale, mais lorsque vous faites quelque chose comme dessiner une ligne dans une image SVG, il y a de grandes différences. Le résultat est que l'utilisation de D3 peut sembler un peu plus bas - vous avez plus de contrôle, mais vous devez être assez familier avec la syntaxe SVG pour faire certaines des choses que Protovis fait beaucoup plus facilement.

  • Comme vous le notez, Protovis est entièrement rendu en SVG, tandis que D3 peut utiliser d'autres parties du DOM. Cela signifie que, pour les visualisations qui ne nécessitent pas d'éléments visuels basés sur SVG, vous pouvez utiliser D3 même avec des navigateurs qui ne prennent pas en charge SVG. Cela signifie également qu'il est beaucoup plus facile d'intégrer HTML et SVG dans la même visualisation, ce qui est vraiment bien pour des choses comme traiter du texte (la manipulation et la mise en page du texte sont assez faibles dans Protovis).

  • D3 modifie ou supprime certains des utilitaires de base de Protovis tels que les échelles et la manipulation des données. Je suis à plusieurs reprises ennuyé par le fait que les utilitaires de base comme pv.sum()ou pv.mean()n'ont pas d'équivalents D3, bien que certains, comme .nest(), soient partagés entre les deux bibliothèques. Modifier 01/10/12: D3 a rempli ses données services publics, mais il y a encore quelques - uns qui comprend Protovis et D3 ne est pas, par exemple pv.dict, pv.numerateet pv.repeat. Vraisemblablement, ils ont été laissés de côté parce qu'ils étaient généralement considérés comme moins utiles.

  • D3 fournit des utilitaires pour les requêtes asynchrones. Quand je veux cela dans Protovis, je dois généralement utiliser une bibliothèque externe (ie jQuery).

  • La documentation de l'API D3 est presque complètement incomplète, comparée à des documents assez détaillés pour Protovis. Edit (30/08/13) : D3 a maintenant une documentation API complète et détaillée sur GitHub , donc ce point n'est plus pertinent.

  • Enfin, je n'ai pas beaucoup fait avec l'animation, mais je pense que vous avez tout à fait raison - D3 fournit plus de support d'animation que Protovis, en particulier en termes de transitions animées. Protovis peut restituer une partie ou la totalité de la visualisation à la demande, mais n'a pas de support pour parcourir une animation de durée limitée - vous devrez tout coder à la main setInterval. D3 semble en faire une partie beaucoup plus intégrale de la bibliothèque.

Edit (7/12/11) : Il semble qu'il y ait une nouvelle différence majeure - depuis le 28 juin 2011, Protovis n'est plus en développement actif, et l'équipe Protovis pousse à la place D3.js. La dernière version est assez stable, donc cela ne devrait pas vous empêcher de l'utiliser, mais c'est certainement un point à considérer.


Plutôt correct, sauf pour le troisième point. Vous pouvez incorporer un graphique Protovis dans un élément HTML arbitraire.
Geoff

@Jeff - J'ai peut-être exagéré le cas. Mon point était que D3 est destiné à travailler avec des éléments arbitraires, alors que faire cela avec Protovis (AFAIK) nécessite de travailler en dehors de l'API établie (par exemple en définissant la $dompropriété racine ). Je vais atténuer ce point.
nrabinowitz

1
@Jeff - Après réflexion, j'abandonne complètement ce point - je n'avais jamais remarqué la Panel#canvaspropriété. Merci pour la note.
nrabinowitz le

Merci beaucoup pour la réponse détaillée - cela a été vraiment utile
Par Richard Powell

2
depuis mars 2013, la référence API pour la v3 de D3 semble être complète et cela fait vraiment bonne impression. De plus, il existe une bonne documentation avec de nombreux tutoriels et de beaux exemples.
Mobiletainment

32

Il existe un tutoriel qui couvre les différences entre D3 et Protovis en détail. Je suis d'accord avec la description de @ nrabinowitz, bien que je souligne que nous avons récemment ajouté une documentation complète sur l' API .


1
Oui, je viens de le remarquer hier (très apprécié!). Je mettrai à jour ma réponse pour la postérité :).
nrabinowitz le

6

Il y a un article récent des auteurs de Protovis / d3.js publié en 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf principalement sur d3.js mais contenant certaines des raisons pour lesquelles ils ont changé certains choses sur le chemin de Protovis à d3.js.


J'ai trouvé ce document utile . Sans faire aucun test, cela me donne une idée de là où cela fonctionne et où c'est imparfait. Merci.
Mike Gale
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.