Protovis vs D3.js


84

TLDR:protovisとD3.jsの両方の経験があり、両者の違いを明らかにした人はいますか?

私は過去2週間プロトビスで遊んでいて、これまでのところ素晴らしいです。今を除いて、私はアニメーションで少しレンガの壁にぶつかったようです。

プロトビス:http://vis.stanford.edu/protovis/

非常に単純なアニメーションを作成したいのですが、protovisを使用すると、直感的ではないように感じます。protovisは実際にはアニメーション用ではなかったと思い始めています。それで、私はD3.jsを見始めました:

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

見た目は非常に似ていますが、次のようになります。

  • より軽量のようです
  • SVGだけでなく他のDOM要素との相互作用を対象としているようです
  • アニメーションの追加を対象としているようです

誰かが他の違いを明らかにすることはできますか?

私はすべての入力に非常に感謝します

回答:


117

私はProtovisでかなりの量の作業を行い、D3でいくつかのことを行いました。あなたが言及した点に加えて、私は次の違いが私にとって際立っていると思います:

  • 以下のように代わりに- Protovisはあなたが指定している視覚特性との間に簡略化され抽象化レイヤを提供する場合、D3は実際のCSSやDOMの仕様を使用しています.width(10).fillStyle('#00C')あなたが使用したいです.style('width', 10).attr('fill', '#00C')。これらの例では、違いはごくわずかですが、SVG画像に線を引くようなことをしているときは、大きな違いがあります。その結果、D3を使用すると、少し低レベルに感じる可能性があります。より詳細に制御できますが、Protovisがはるかに簡単に実行できることのいくつかを実行するには、SVG構文にかなり精通している必要があります。

  • お気づきのとおり、ProtovisはすべてSVGでレンダリングされますが、D3はDOMの他の部分を使用できます。つまり、SVGベースの視覚要素を必要としない視覚化では、SVGをサポートしていないブラウザーでもD3を使用できます。また、HTMLとSVGを同じ視覚化に統合する方がはるかに簡単であり、テキストの処理などに非常に便利です(Protovisではテキストの操作とレイアウトがかなり弱いです)。

  • D3は、スケールやデータ操作などの基本的なProtovisユーティリティの一部を変更または削除します。のようないくつかは2つのライブラリ間で共有されていますが、D3に相当するもののような、pv.sum()またはpv.mean()持っていない基本的なユーティリティに繰り返し悩まされてい.nest()ます。編集10/1/12: D3は、そのデータユーティリティを記入しましたが、Protovisが含まれており、D3にはないことを、いくつかは、まだあります、例えばpv.dictpv.numeratepv.repeat。おそらく、それらは一般的にあまり有用でないと考えられたために除外されました。

  • D3は、非同期要求用のユーティリティを提供します。Protovisでこれが必要な場合、通常は外部ライブラリ(jQueryなど)を使用する必要があります。

  • D3 APIドキュメントは、Protovisの非常に詳細なドキュメントと比較して、ほぼ完全に不完全です。編集(8/30/13):D3にはGitHubに関する完全で詳細なAPIドキュメントが含まれているため、この点は関係ありません。

  • 最後に、私はアニメーションについてあまり行っていませんが、あなたは完全に正しいと思います-D3は、特にアニメーショントランジションに関して、Protovisよりも多くのアニメーションサポートを提供します。Protovisは、オンデマンドで視覚化の一部またはすべてを再レンダリングできますが、期間限定のアニメーションをステップスルーするためのサポートはありませんsetInterval。すべてを手動でコーディングする必要があります。D3は、これをライブラリのより不可欠な部分にしているようです。

編集(7/12/11):新しい大きな違いがあるようです-2011年6月28日の時点で、Protovisはもはや活発な開発中ではなく、Protovisチームは代わりにD3.jsをプッシュしています。前回のリリースは非常に安定しているので、これで使用できなくなることはありませんが、それは間違いなく考慮すべき点です。


3番目のポイントを除いて、かなり正しいです。Protovisグラフィックを任意のHTML要素に埋め込むことができます。
ジェフ

@ Jeff-私はその事件を誇張しているかもしれません。私のポイントは、D3は任意の要素で動作すること目的としていますが、Protovis(AFAIK)でこれを行うには、確立されたAPIの外部で動作する必要があります(たとえば、root$domプロパティを設定することによって)。その点をトーンダウンします。
nrabinowitz 2011年

1
@ Jeff-考え直して、私はその点を完全に捨てています-どういうわけか私はPanel#canvasプロパティに気づかなかった。メモをありがとう。
nrabinowitz 2011年

詳細な返信をありがとうございました
それは

2
2013年3月以降、D3のv3のAPIリファレンスは完成しているようで、非常に良い印象を与えています。さらに、たくさんのチュートリアルと素晴らしい例を含む優れたドキュメントがあります。
モバイルテインメント2013年


6

2011年に公開されたProtovis / d3.jsの作成者からの最近の論文がありますhttp://vis.stanford.edu/files/2011-D3-InfoVis.pdf主にd3.jsについてですが、特定の変更が行われた理由のいくつかが含まれていますProtovisからd3.jsに向かう途中のもの。


私はその紙が役に立つと思いました。テストを行わなくても、どこで機能し、どこが不完全であるかを理解できます。ありがとう。
マイクゲイル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.