visx（旧称vx）は2017年にAirbnbのデータ可視化チームが公開したReact向け可視化ライブラリ集合です。Rechartsのような「完成品コンポーネント」ではなく、Scale、Shape、Axis、Group、Glyph、Tooltipといったプリミティブを30以上のサブパッケージに分割し、必要なものを組み合わせて自前のチャートを構築する設計を採用しています。「D3とReactのいいとこ取り」を最も忠実に実装した低レベル可視化キットとして、データジャーナリズムやBI製品の社内可視化基盤で採用されてきました。本記事ではvisxの設計思想を整理します。
この記事の目次
- 30+のサブパッケージで部品提供
- Airbnb のデータ基盤発祥
- RechartsやD3との立ち位置
- どんなプロジェクトに向くか
- まとめ
30+のサブパッケージで部品提供
visxは@visx名前空間の下に30以上のnpmパッケージが配置されており、必要な部品だけをimportして使う構造です。@visx/scaleはD3-scaleの薄いラッパー、@visx/shapeはLine/Bar/Arc/Area/Pieといった図形コンポーネント、@visx/axisはXAxis/YAxis、@visx/groupはSVGのg要素ラッパー、@visx/glyphはマーカー（円・四角・三角）と、それぞれが独立して機能します。Tree Shakingが効くため、バンドルサイズを最小限に抑えられます。
完成品チャートは存在せず、開発者がscale関数で座標を計算し、shapeで描き、axisで目盛りを付け、tooltipで重畳する工程を自分で組み立てます。これによりカスタマイズの自由度は最大化される一方、Rechartsのように数行で済む手軽さは失われます。「D3に近い柔軟性をReactで得たい」中上級者向けの選択肢です。
Airbnb のデータ基盤発祥
visxはAirbnbのデータ可視化エンジニアHarrison Shoffがリードする形で2017年にvxという名称で公開されました。もともとは社内BI製品のチャートエンジン基盤として開発されていた部品群を、OSSとして整理したものです。Airbnbはこの種の「内製ツールをOSS化する文化」が強く、React Sketch.app、Lottie、Visx、Superset（後にApache）、Knowledge Repoなど多数のプロジェクトを世に送り出してきました。
2020年に商標問題でvxからvisxへ改名し、現在のロゴと配色になりました。GitHubスター数は1.9万を超え、ライセンスはMITです。Airbnbの社内利用に加えて、PalantirのBlueprint、Vercelの管理画面、Stripeのアナリティクス機能などでvisxが採用されているとされ、エンタープライズグレードのプロダクトに組み込まれる事例が増えています。
RechartsやD3との立ち位置
RechartsとvisxはどちらもReact向け可視化ですが、抽象度が大きく異なります。Rechartsは「LineChartコンポーネントを置けば終わり」という完成品志向、visxは「scaleで座標を計算し、shapeで描く」というレゴブロック志向です。Rechartsで実現できないオリジナル設計のチャートが必要な場面でvisxが選ばれ、逆に定型チャートで足りる場面ではRechartsの方が生産的です。
D3.jsとの関係でも興味深い立ち位置にあります。visxはd3-scale、d3-shape、d3-interpolate、d3-pathといったD3のサブパッケージを内部で利用しているため、D3経験者には概念が馴染みやすくなっています。一方でDOM操作は完全にReact側に任せるため、「Reactと衝突しないD3」として活用できます。D3を直接使うかvisx経由で使うかは、プロジェクトのReactへの依存度と、可視化チームのスキルセットによって判断するのが現実的です。
どんなプロジェクトに向くか
visxが力を発揮するのは、デザインチームが用意した独自のチャートデザインを忠実に実装したい場面です。ブランド統一が求められるBI製品、報道機関のインタラクティブ記事、データジャーナリズム系プロダクトなどでは、Rechartsの既定スタイルでは差別化できないため、低レベル部品から組み上げる必要があります。また、サンキー、コード、ボロノイ、フォースシミュレーションといった特殊レイアウトの実装にも適しています。
逆に、社内ダッシュボードや管理画面の「定型チャート8割」をスピード重視で実装する場合は、visxは過剰です。学習コストが高く、軸目盛り・ツールチップ・凡例まで全て自前で組む必要があるため、開発工数が膨らみます。Recharts→visx→D3.jsという段階で抽象度を下げていき、必要に応じて使い分けるのがエンジニアリング上の定石です。visxはこの「中間層」を埋める存在として現代Reactスタックで価値を持っています。
まとめ
visxはAirbnb発のReact向け低レベル可視化キットで、D3.jsの自由度とReactの宣言的UIを両立する設計です。完成品コンポーネント志向のRechartsとは正反対の方向性で、デザインを忠実に再現したい場面や特殊なチャートを構築したい場面で真価を発揮します。学習コストは大きいものの、エンタープライズ製品の可視化基盤として選ぶ価値のある成熟度を備えています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント