web-dev-qa-db-fra.com

Protovis vs D3.js

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 que j'ai 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. J'ai donc commencé à regarder D3.js:

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

Cela ressemble beaucoup, mais:

  • Semble plus léger
  • Semble orienté vers l'interaction avec d'autres éléments DOM ainsi que SVG
  • Semble orienté vers l'ajout d'animations

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

Je serais très reconnaissant pour toute contribution

javascriptprotovisd3.js
84
By Richard Powell

J'ai fait pas mal de travail avec Protovis et quelques choses avec D3. En plus des points que vous mentionnez, je pense que les différences suivantes se distinguent pour moi:

  • 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 banale, 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 constatez, Protovis est tout 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 le traitement 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 comme les échelles et la manipulation des données. Je suis à plusieurs reprises ennuyé que les utilitaires de base comme pv.sum() ou pv.mean() n'aient pas d'équivalents D3, bien que certains, comme .nest(), soient partagés entre les deux bibliothèques. Edit 01/10/12: D3 a rempli ses utilitaires de données, mais il y en a encore quelques-uns que Protovis inclut et D3 non, par exemple pv.dict, pv.numerate, et pv.repeat. Vraisemblablement, ils ont été laissés de côté parce qu'ils étaient considérés comme moins généralement utiles.

  • D3 fournit des utilitaires pour les demandes asynchrones. Lorsque je veux cela dans Protovis, je dois généralement utiliser une bibliothèque externe (c'est-à-dire jQuery).

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

  • Enfin, je n'ai pas fait grand chose 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 ne prend pas en charge l'exécution d'une animation de durée limitée - vous devez tout coder à la main avec setInterval. D3 semble en faire une partie beaucoup plus intégrante de la bibliothèque.

Edit (7/12/11) : Il semble qu'il y ait une nouvelle différence majeure - au 28 juin 2011, Protovis n'est plus en développement actif , et l'équipe Protovis pousse plutôt 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.

115
nrabinowitz

Il y a 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 vaste documentation API .

32
mbostock

Il existe 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 certains des raisons pour lesquelles ils ont changé certaines choses sur le chemin de Protovis à d3.js.

6
pintxo