Visxは、Airbnbによって構築されたReactアプリのグラフィカルプリミティブのコレクションです。

3年間の開発とAirbnbプロダクションプロジェクトでの2。5年間の使用の後、TypeScriptでコードを書き直した後、グラフィカルプリミティブのvisx 1.0コレクション（以前はvxと呼ばれていました）の公式リリースをお知らせします。これがGitHubのプロジェクトページです。ドキュメントと例はairbnb.ioにあります。 私たちの目標は、すべてのAirbnbプロジェクトにわたってデータ視覚化テクノロジーのスタックを統合することでした。この目標を追求するために、D3のパワーとReactの利便性を組み合わせた新しいプロジェクトを作成しました。 visxの長所の中で、次の点を強調できます。

• . , visx . , .
• , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
• これは、グラフを作成するために「シャープ化」された要素のコレクションではありません。視覚化プリミティブを使用してグラフを作成する場合、最終的にはこの問題を解決する独自のライブラリを作成します。さらに、それはあなたのニーズに最適化されたライブラリになります。彼女はあなたの完全な管理下にあります。

visxの最も重要な強みは、本質的にReactコンポーネントの通常のセットであるということです。Reactライブラリの操作方法を知っているということは、visxを使用して視覚化を作成できることを意味します。React開発者に馴染みのある標準のAPIとパターンを使用します。どのReactプロジェクトでも、visxは自宅にいるように感じるはずです。visxで作成したものを見てみたいと思います。

課題：フロントエンド開発におけるデータの視覚化

データの視覚化は、さまざまな分野の専門家が必要としています。このため、グラフィック要素を作成するためのフレームワークが存在する必要があります。これらの人々の問題を解決することができるそのようなフレームワーク。これらの人々が本当に習得できる種類。



そのようなグループの1つは、Webプロジェクトのデータ視覚化を常に作成する必要があるフロントエンド開発者です。 Webグラフィックを作成するための優れたライブラリとフレームワークがたくさんあります。D3から、Highcharts、Plotly、Echarts、Victory、G2、Recharts、react-vis、vega、vega-lite、Semioticおよび他の同様のプロジェクトへ。この多様性にもかかわらず、12を超える既存のライブラリを分析し、Airbnbでの使用を検討したところ、フロントエンド開発者にとって重要な3つの領域の少なくとも1つに欠点があることがわかりました。

• ( ?). - . API D3 vega. , -.
• ( , ?). , ? ( — airbnb.com), . ? .
• . -, , -, , airbnb.com, . , , , , , .

データ視覚化ツールの表現力とそれらをすばやく探索する能力の間には、しばしば直接的な関係があることが指摘されました。これらの特性の1つが優れているほど、もう1つは悪化する可能性があります。これらすべてが、迅速に探索できるライブラリ、十分に表現力のあるライブラリ、そして同時に高性能を作成する方法の問題につながりました。この質問への答えは、「反応する」という1つの単語で構成されています。

解決策：Reactに基づく低レベルのビジュアルプリミティブ

近年、ReactライブラリはWeb開発の主流になっています。これは、保守が容易でクリーンで読みやすいコードを作成するのに役立つ宣言型APIがあるという事実に一部起因しています。このライブラリは多くのフロントエンド開発者によく知られています。Reactアプリケーションのパフォーマンスを最適化するための資料はたくさんあります。このプロジェクトは、Reactとこのライブラリのエコシステムに基づいています。つまり、学習と生産性が容易になりました。その中に低レベルのモジュラーAPIを実装することが、その表現力の鍵となりました。



このプロジェクトのこのビジョンについて話すとき、私たちは通常2つの質問をされます。



最初のものは次のとおりです。「Reactアプリケーションで非常に表現力豊かなライブラリであるD3を使用しないのはなぜですか？」



重要なのは、それができるということです。ただし、D3とReactはどちらもDOMを片手で操作する必要があるため、D3を純粋に計算に使用し、ReactをDOMに使用するのが最適であることがわかりました。それ以外の場合、DOMの更新を競合する2つのメンタルモデルは、バグがプロジェクトに侵入する可能性を開きます。ただし、D3を計算にのみ使用するということは、このライブラリの機能の大部分（DOMに関連するもの）が使用されないことを意味します。それはselection.join、ズーム、ドラッグ、ブラシ、トランジションについてです..。また、前述のように、D3は習得するのに時間がかかります。また、開発者には、データの視覚化を行うときに、標準のAPIと使い慣れたパターンを使用するネイティブのReactコードを作成しているように感じてもらいたいと思います。



2番目の質問は次のとおりです。React用に構築された多くのレンダリングライブラリの1つを使用しないのはなぜですか。



私たちの調査（結果は次の図に示されています）は、データ視覚化用の既存のReactライブラリが高レベルの抽象化であり、使いやすさのために最適化されている（つまり、それらを使用するために必要なコードの量を減らすことに焦点を合わせている）ことを示しました。これは、表現力を犠牲にして行われます。それらのどれも開発者にD3プリミティブの表現力を提供せず、計算、アニメーション、状態管理、スタイル、およびレンダリングは互いに密接に関連しているため、多くは生産プロジェクトに必要な最適化を許可しません。





- , , . visx , React-



前の図に示した問題空間を分析することにより、表現力の高いReactライブラリの開発を成功させる機会が明確にわかります。一般的なReactAPIを使用するようにゼロから設計された低レベルのレンダリングプリミティブを作成することで、習得が容易で、表現力があり、パフォーマンスの高いライブラリを作成できることを期待していました。このようなライブラリは、あらゆるフロントエンド開発者にとって役立つと考えました。これがvisxプロジェクトの誕生です。

visxに関する詳細

visxコンポーネントコレクション（以前はvxと呼ばれていました）は、その名前に「視覚化コンポーネント」という単語を隠します。これは、Reactデータ視覚化プリミティブを含む30以上の個別のパッケージで構成され、いくつかのカテゴリに分類されます（次の図を参照）。これらのプリミティブを使用する人は誰でも、ある種のアプリケーション状態管理スキームに強制されることはありません。開発者は、要素のアニメーションとそのスタイリングへのアプローチを選択できます。これはすべて、visxプリミティブをReactベースのコードベースに統合できることを意味します。また、visxを作成する際にモジュール性に重点が置かれているため（これによりvisxはD3に似ています）、繰り返し使用することを目的としたデータ視覚化用に独自のライブラリを実装するために必要なものだけを構成に含めて、コンパクトなサイズのアプリケーションのバンドルを作成できます。 、単一のコピーに存在するいくつかの一意のスケジュールを形成するために必要なもの。





Visxは、Reactアプリケーションの一般的なデータ視覚化タスクに対応する30を超えるパッケージのモジュラーコレクションです。

質問と回答

▍visxでD3はどのように使用されますか？

visxに含まれているパッケージのいくつかは、D3を使用して、ページ上の要素の配置など、さまざまな計算を実行します。使用するD3パッケージを機能的に複製し、宣言的なReactAPIを装備します。このようなパッケージの例には、@ visx / axis、@ visx / geo、@ visx / Hierarchy、および@ visx / shapeが含まれます。他のパッケージは、D3のDOM管理機能を置き換え、要素と対話するためのReactプリミティブを開発者に提供します。これらは、たとえば、@ visx / Brush、@ visx / drag、および@ visx / zoomです。

▍D3ができないことをvisxは何ができますか？

多くのパッケージはD3とは完全に無関係であり、ピクセル精度でレイアウトを再現するReactでデザインレイアウトを作成するときに直面した一般的な問題の解決策を抽象化します。これらのツールの多くは、複雑なオブジェクトサイズの問題を抽象化および簡素化し、SVGAPIを簡素化します。下記は用例です。

@ visx / tooltip

ここだインタラクティブな例。





ツール



チップツールチップは、Webプロジェクトでよく使用される要素です。しかし、そのような要素とのすべてのマイクロインタラクションを実現することは簡単な作業ではありません。 @ visx / tooltipパッケージは、ツールチップの状態管理を抽象化します。コンテンツ、座標、表示と非表示の管理に役立ちます。これは、Reactフック（useTooltip）と高次コンポーネント（withTooltip）を使用して行われます。 @ visx / tooltipパッケージを使用すると、自動配置（結果として、ツールチップがコンテナによってクリップされない）やポータル内のオプションのレンダリングなど、ツールチップのレンダリングに関連するタスクも簡素化されます。コンテキストオーバーレイの問題をトラブルシューティングする

@ visx / text

インタラクティブな例はここにあります。





SVG1.1でのテキストの操作



。HTMLの場合と同様に、複数行のテキストを操作する可能性はありません。たとえば、CSSを使用して、長いテキストの複数行の表現を簡単に実装できます。このようなメカニズムをReact（または純粋なJavaScript）に実装するには、通常、テキストのサイズを測定し、テキストを行に分割するためのパラメーターを見つけるために使用される非表示のDOM要素をレンダリングする必要があります。@ visx / textパッケージは、これらすべてのタスクを抽象化し、視覚化で長いテキストをサポートしやすくします。

@ visx /レスポンシブ

ここだインタラクティブな例。





レスポンシブWebアプリケーション



レスポンシブWebアプリケーションは、HTMLを使用して簡単に作成できます。SVGグラフィックとcanvas要素の機能に基づいて図を作成する場合は、応答性を高めるためにピクセル精度の測定を行う必要がありますが、Reactではそれほど簡単ではありません。@ visx /レスポンシブパッケージは、レスポンシブチャートを簡単に作成できるように、要素のピクセル寸法を簡単に取得できるさまざまなヘルパーツールを開発者に提供します。

@ visx /グラデーション、@ visx /パターン

ここでは「対話型の例です。





グラデーションとパターン



カラーグラデーションとパターン塗りつぶしは、チャートを設計する人の能力を大幅に向上させます。これらのグラフィック効果は、背景から際立つ目を引く画像を作成します。しかし、そのような画像をSVGで記述することは多くのコードであり、困難な作業になる可能性があります。@ visx / gradientおよび@visx / patternパッケージは、適切なスタイルを宣言するための構文を大幅に簡素化し、誰でもかわいい図を作成できるようにします。

▍visxを使用して何を作成できますか？

私たちは過去2。5年間、visxを使用しており、このアイテムのコレクションを数十の内部データツールとairbnb.comで使用しています。





visxを使用して作成されたビジュアライゼーション



前の図は、visxを使用して作成したものの例を示しています。これらは、左上隅から時計回りに進むと、次のプロジェクトです。依存関係のあるガントチャート、組織の円グラフ、放射状のチャート、ビジネスメトリックレポート、サービスの相互作用の概要。



また、visxを使用して、再利用可能な図を作成するための高レベルのライブラリを作成しました。これにより、単純なグラフィック要素を生成する際の定型コードの量を減らすことができました。





Visxは低レベルの要素のコレクションです。これは、それに基づいてより高いレベルのシステムを作成するために設計されています。独自の高レベルライブラリを作成したり、Webアプリケーションのカスタムビジュアライゼーションを作成したりするために使用する必要があります。

▍Visxは面白そうに見えますが、D3が本当に好きな場合はどうなりますか？

D3も大好きです！

▍visxはどのように開発されていますか？

visxでの3年間の作業のために、このプリミティブのコレクションを次の3つの方向で開発しました。

• . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
• . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
• . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .

visxのドキュメントでは、CodeSandboxプラットフォームで試すことができるblocks.orgスタイルの例を使用しています。すべての例は、対応するコレクションパッケージと密接に関連してい



ます。visxを使用したことがありますか？