水域のグラフ化:ボケとD3の間

水域のグラフ化:ボケとD3の間

前書き

彼らがチャートライブラリの世界に入らなければならないとき、新進の「控えめなだけでなく、フロントエンドのデザイナーと開発者になろうとしているハイキー」の人生の時代が来ます。

チャートライブラリは、データ駆動型の視覚化を生成します。これが、ファイブサーティエイトの平均余命の傾向をすばやく把握したり、ニューヨークタイムズで開催される大統領選挙(イケ)についての国民の感情を測ったりできる理由です。

Googleスプレッドシート内で作成できるグラフについて考えてみてください。ただし、これらのグラフを駆動するライブラリを直接表示および編集する権限があります。あなたは「チャート」を構成するこれらの低レベルのビルディングブロックのマスターです。

いくつかのグラフ作成ライブラリはJavaScriptで記述されています。これは、ほとんどのWeb開発者よりもWeb開発者に馴染みのある言語であるため、学習が難しくありません。チャートライブラリを正しく実行すると、強力なメッセージ家に持ち帰り、深刻な視覚的なキャンディーを表示する機会が得られます。

最近、私たちのチームは、目標を達成するためにチャートライブラリを統合するために必要なインターフェイスの作成を任されました。その結果、特定のユースケースを満たすライブラリを決定する必要がありました。ニーズを正しく評価し、何らかの形でそれらすべてを満たすライブラリを選択すれば、人生は黄金になります。

ただし、図書館は決して万能の取引ではありません。多くの場合、予期しない障害が発生するため、ライブラリが完全に一致するという最初の仮定は正しくありません。

「それらのオプションは何ですか?」、「オプションの選択にどのようにアプローチしましたか?」と考えているかもしれません。または「なぜあなたは愚かだと感じたのですか?」(上記のSlackメッセージを参照してください)。

この記事では、現在利用可能な無数のJavaScriptチャートライブラリからチャートライブラリを選択するプロセス、2つのチャートライブラリ(BokehとD3.js)を切り替える重要な決定、およびそれぞれの長所と短所について説明します。私にとって、これは「未開拓の」領域でした。ライブラリのグラフ化やデータの視覚化全般について同じように感じれば、これを読んだ後で気分が良くなるでしょう。

さぁ、始めよう!

ボケを最初に試した理由

私たちのニーズは、スピード双方向性という2つの陣営に分類されました。大量のデータを処理していたため、視覚化は電光石火の速度(または少なくとも知覚可能なラグのない速度)で更新できる必要がありました。

また、アプリケーションには、ユーザーが想定した望ましい対話性が必要でした。理想的なシナリオでは、ライブラリには、最初から作成する代わりに、簡単に投入できるこれらのインタラクティブ関数のいくつかがすでに含まれています。

ボケを入力します。

ボケについて

Bokehは、主に大規模なデータセットまたはストリーミングデータセットからブラウザで視覚化を作成することを目的としたライブラリです。これらのビジュアライゼーションは、Pythonを使用して作成します。次に、BokehのJavaScript APIはPythonスクリプトを取り込んで、ブラウザーでのUIインタラクションの処理に加えて、プロットまたはチャートをレンダリングします。

Bokehサーバーを使用してデータのストリーミングを処理することもできます。Bokeh 0.12.13のドキュメントには、「Pythonとブラウザを同期するこの機能がBokehサーバーの主な目的です」と記載されています。

利点

ボケは多くの理由で魔法です。最初にWebGLとHTML5Canvasフォールバックを使用してレンダリングし、グラフを操作するためのいくつかの組み込みツールを提供し、非常に大きなデータセットを処理し、最終的にはWeb上ですぐに実行できるものを作成します。

PythonとJavaScriptの間を移動する機能は、グラフ化にも非常に強力です。Pythonを使用すると、便利なデータ構造とデータ分析ツールを利用でき、JavaScriptは操作されたデータをブラウザーに適した視覚化に変換します。

短所

ただし、Bokehの欠点の1つは、視覚化で得られる対話性の程度が制限されていることです。Bokehを使用すると、従来の意味で「グラフ化」できます。軸をベースラインとする2Dのグリッド状のキャンバスが提供されます。そしてそれは大丈夫です、なぜならそれはしばしばユーザーが必要としそして望んでいるものだからです。経験豊富なBokehユーザーは、本当に美しいものを作ることができます(ここの例を参照)。

しかし、原子間の力をシミュレートしたり、原子をドラッグしたりするなど、チャートの従来の特性を超えた視覚化を作成したい場合、ボケでそれをどのように達成するかわかりません。

Bokehは、JavaScriptではなくPythonでの開発も目的としています。以下は、Pythonを使用したBokehの棒グラフの例です。とてもシンプルでクリーンです。

Pythonを使用したBokehBarchart(Jupyter Notebook経由)

Bokehの使用を開始する前に、Webアプリケーション全体がJavaScriptフレームワーク上に構築されていたため、PythonではなくJavaScriptでスクリプトを作成することを意識的に決定しました。BokehのドキュメントはどれもJavaScriptで作成されておらず(ご想像のとおりPythonで作成されています)、JavaScriptの内部に潜入しようとするのは困難でした。

低レベルのグリフを使用している場合、Pythonで可能なことはすべてBokehを使用したJavaScriptで可能であることは事実です。ただし、私のように両方の言語を学び始めたばかりの場合、2つの言語間の構文の翻訳は直感的ではありません。

さらに、高レベルのJavaScriptBokeh.ChartsBokeh.PlottingAPIには制限があります。非推奨のものもあれば、プロットの機能を変更するのが非常に難しいものもあります。以下の例は、JavaScriptでボケプロットを作成するための私の試みです。

Javascriptを使用したBokeh低レベル棒グラフ

Bokeh.Charts JavascriptAPIを使用したBokeh高レベル棒グラフ

Bokehを使用したJavaScriptでの開発について詳しくは、こちらをご覧ください。ご覧のとおり、Bokehのライブラリを使用したJavaScriptでは、Pythonで開発したときに観察された単純なコード行が失われます。バーに白いアウトラインを追加し、高レベルのグラフにタイトルを追加するのに、コンソールをいじるのに約1時間かかったと思います。これは、Bokeh.Charts視覚的な詳細を変更したいときにJavaScriptAPIの境界の外をナビゲートするのに苦労したことを繰り返しています。チャートの。

最後に、Bokehと比較して、D3.jsやthree.jsなどの他のチャートライブラリのドキュメントと積極的な使用法が多くあります。より積極的な寄稿者とライブラリのユーザーには、特定のバグを修正するために必要な解決策を見つける可能性が高くなります。

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

D3に切り替えた理由

だから私たちは立ち往生しました。「このライブラリは私たちのニーズに合っていますが、JavaScriptで物を作り続けるのは苦痛であり、ボケでは利用できないものが必要だと気付いたときに、いつか天井にぶつかるでしょう。今。」涼しい。

D3と入力します。

D3に関する最初の懸念は、大量のデータを使用してブラウザーでSVGをレンダリングした過去の経験を考えると、視覚化のレンダリングが遅すぎることでした。また、D3の学習曲線がボケの学習曲線よりも大幅に高いこともわかっていました。

しかし、D3の人気、美しく文書化されたD3アプリケーションの無限の量、そして「Get Sh * t Done」の姿勢を考えると、私たちはまだ楽観的でした…とにかく試してみることにしました。

D3について

D3.jsは、データバインディングを強調するJavaScriptライブラリです。これにより、DOMで要素を生成し、データム/データを要素に同時にバインドする独自の機能が提供されます。完全にデータ駆動型のライブラリを使用すると、データポイントの追加または削除、およびデータセット間の遷移時に要素を動的に追加できます。D3はまた、最終結果の美的および双方向性をより細かく制御できるため、最も奇妙で素晴らしい視覚化を作成する必要がなくなります。

利点

驚いたことに、データセットを使用して作成したD3ビジュアライゼーションは非常にバターでした。ライブラリに渡した大規模な配列にもかかわらず、D3は高速レンダリング用に特別に構成されていることにすぐに気付きました。

データポイントを1つずつ渡し、それぞれのSVGを生成するのは非常に面倒ですが、D3を使用すると、データセット全体をSVGが存在する前にバインドできます。その後、SVGは急速に生成され、それぞれのデータポイントに一度に関連付けられます。

これは、キッチンのシェフが注文のリストを一度に受け取り、1つの料理を準備した後、常に次の注文を待つのではなく、不要な待ち時間を省略して料理を準備できるようなものです。

D3の最も優れている点は、データセット間のスムーズな相互作用と移行のための十分な機会を提供することです。私たちの最終的な目標はユーザーに力を与えることであり、それであるため、個人がそれに従事するように誘う視覚化を作成したかったのです。

D3はJavaScript開発用でもあります。Bokehで行っていたように、JavaScriptAPIの「内部を掘り下げる」ことはもうありません。この記事で以前にBokehJSを使用して作成した棒グラフの例を、D3ライブラリを使用して以下に示します。

D3棒グラフ

はい、ボケチャートに必要なコードと比較して、より複雑なコード行があります。拾うのにもっと時間とエネルギーがかかりました。しかし、あなたは、完全に制御していすべてのあなたのチャートの小さなディテールを、そしてそれは、すべての(おそらく、作成者、マイク・ボストック経由)、オンラインどこかに文書化されています。それはかなり素晴らしいです。

最後に、2017年の米国の選挙、難民人口の移動、WHOの乳幼児の予防接種率、およびその他の無数の傾向やストーリーを視覚化するために、近年D3が広く使用されています。その結果、D3はかなりの量の露出と注目を集め、よりアクティブなユーザーとライブラリを毎日使用する新しい方法につながりました。

長期にわたって図書館を選択し、チームメートも最終的にそれを学ぶ必要があることを念頭に置いて、図書館の現在および将来の寄稿者のコミュニティを考慮することは絶対に重要です。コミュニティが継続的に繁栄している図書館が理想的であり、D3はそのタイプのコミュニティを育成しているようです。

短所

PythonでBokehを使用して開発していると仮定すると、D3の初期学習曲線はBokehと比較して高くなります。JavaScriptはPythonよりも冗長です。ただし、JavaScriptでの開発を計画している私たちのように、D3チュートリアルを検討する価値があります。

選択がどのように機能するか、.enter()と.exit()が何を意味するのか、そして1行の単純なコード(.transition()誰か?)で発生する魔法を理解するのは難しいです。しかし—物事が存在する前に存在すると仮定するというD3のユニークな構造に頭を悩ませたら、可能性は無限大です。

最終的に、D3の利点は、それを学ぶための労力と時間を上回り、D3への切り替えは長期的な投資として適切であるという予感がありました。

結論

だからあなたはそれを持っています!ライブラリをアプリケーションとチームに統合する際に、D3を引き続き積極的に使用および学習しています。D3を進めているからといって、将来、別のアプリケーションにBokehを使用しないという意味ではありません。すべてのグラフ作成ライブラリには長所と短所があり、現在のライブラリを続行するか、他のオプションの調査を開始するかを常に検討することが重要です。

チャートライブラリを選択する前に、特定のニーズを理解し、それらのニーズを念頭に置いて、チャートライブラリの未知の海に真っ向から飛び込むことを恐れないでください。何かが最初にうまくいかない場合は、有望と思われる新しいものを試してください。

それは、プロジェクトを生産的な方法で進化させ続けるために、自分自身とチームメートを探索し、文書化し、チェックインすることです。

以降!

コメント、訂正、提案がある場合、または単に話したい場合は、mandicai @ gmail.comまでメールでお問い合わせください。私の作品のいくつかは//mandilicai.com/で見つけることができます。