BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース AirbnbがVisxをリリース:Reactを使ったインタラクティブな視覚化のための低レベルでプリミティブなコンポーネントの集合

AirbnbがVisxをリリース:Reactを使ったインタラクティブな視覚化のための低レベルでプリミティブなコンポーネントの集合

原文(投稿日:2020/12/07)へのリンク

Airbnb Engineeringは最近、visxの最初のメジャーイテレーションをリリースした。visxは、インタラクティブに視覚化を構成できる低レベルのReactコンポーネントの集合である。visxは、D3プリミティブ、Reactコンポーネントモデル、React DOM処理をベースに構築されている。visxは、表現力を犠牲にすることなく簡単に習得できるデータ視覚化フロントエンドソリューションを提供することに努めている。

visxのリリースノートでは、visxの起源と設計目標について説明している。

3年間の開発、Airbnbでの2.5年間の本番環境での使用、TypeScriptでの書き直しの後、visx(以前のvx)の公式1.0リリースを発表できることを嬉しく思っています。

[visx]は、D3[データ視覚化ライブラリ]のパワーとReactの喜びを共にもたらし、[…]学習可能で、表現力豊かで、パフォーマンスの高いWebの視覚化を提供します。

Airbnbは、Reactをフロントエンドフレームワークとして使用することで学習可能性とパフォーマンスが達成されると主張している。ただし、visxと高レベルのデータ視覚化ライブラリのパフォーマンス比較に関するベンチマークは提供されていない。

visxは、必要に応じて構成される低レベルでフォーカスを絞ったビルディングブロックの集合を中心に設計されているため、開発者は使用している特定のパッケージのコストのみを支払うことなる。visxは、状態管理、アニメーション、スタイリングに関するいかなる意思も強制しない。これにより、モジュール性と構成がさらに促進される。

最近リリースされた一方で、visxはAirbnb.comの視覚化、高レベルの再利用可能なチャート、内部データツールのためにAirbnbによって2年以上使用されてきた。visxはTypeScriptで記述されており、広範な単体テストが付属している。

開発者は、visxを構成する31のパッケージのいずれも使用できる。それらのパッケージは、測定、対話性、チャートプリミティブなどの一般的なデータ視覚化の課題に対処するものである。visxには、ユーティリティ関数と特殊なチャート(ヒートマップツリーマップコード図地理マップなど)も含まれている。

この戦略は、対話性とDOM処理にUIフレームワークを使用する一方で、算術関数とユーティリティ関数にD3を使用することで構成される。この戦略は、Svelte、Vueなどでも使用できる。Tom Fevrier氏は、Svelte Societyが主催した講演でその戦略を説明した。講演で、Fevrier氏は、アニメーション化されたレスポンシブグラフの2つの例を示した。このグラフは、いくつかのD3 APIとSvelteのアニメーションおよびイベント管理を使用して直接実装されたものである。

ただし、D3にはインタラクティブな機能またはDOM処理機能がいくつか含まれており、UIフレームワークでのD3の実装は、別のライブラリに抽出した方がよいほど複雑、あるいは反復的かもしれない。フィルタリング、ズーム、リンク、ブラッシングのインタラクションは、その説明にフィットするであろう。visxには、brushdragzoomvoronoiのインタラクションに焦点を当てた4つのパッケージが付属している。voronoiパッケージを使用すると、ポインターがポイントの正確な位置に到達する前にデータポイントを選択することで、ユーザーフレンドリーでオンデマンドで詳細を視覚化する手法を実装できる。

visxで実装されたブラッシングインタラクションの例は次のとおりである。
Demo of brushing interaction with visx

visxは、MITライセンスの下で配布されているオープンソースソフトウェアである。フィードバックとコントリビューションは歓迎されており、プロジェクトのコントリビューションガイドライン行動規範に従う必要がある。

この記事に星をつける

おすすめ度
スタイル

特集コンテンツ一覧

BT