OSS探訪ページ内ナビ
概要
visxはD3のscale・shape等の計算をReact componentとして扱う低レベルvisualization toolkitです。bar、line、axis、grid、tooltip、responsive layout等をpackage単位で選び、完成済みchart libraryではなく自社のchart componentや一回限りのcustom visualizationを構築できます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
D3のscale・shape計算をReact componentから利用する
@visx/scaleはD3 scaleをReact application向けAPIとして提供し、@visx/shapeはBar、LinePath、Area、Pie等のSVG shape componentを提供します。DOM更新はReact側へ寄せつつD3の数学処理を再利用できます。
必要なpackageだけ選んでbundleとAPI surfaceを絞る
visxはmonorepo内にshape、scale、axis、grid、tooltip、responsive、xychart等を分割しており、application要件に必要なpackageだけを導入できます。
出典：[1]
既製chart APIではなく自社chart libraryの基盤として使う
READMEはone-off chartとreusable internal chart libraryの両方を想定し、animationやvisual styleを固定しません。既存React animation libraryやdesign tokenと組み合わせられます。
出典：[1]
向いている用途
data visualizationをReact componentとして細かく設計したい場合に向く
既製chartのoption APIでは表現しにくいlayout、interaction、brand stylingを持つdashboardやanalytics UIで、scaleとSVG primitiveを自由に構成したい場合に適します。
出典：[1]
導入前の確認
v4はReact 18または19を必須とするmajor release
v4 READMEとrelease notesはReact 18/19をpeer dependency rangeとし、v3からのmigration guideを案内しています。React 17以下ではv4を前提にできません。
v4にはD3 dependency更新やtoolchain変更を含むbreaking changesがある
4.0.0ではd3-shape/d3-pathのmajor更新、prop-types除去、Node/TypeScript等のtoolchain更新が含まれます。既存visx v3 projectはpackageごとのAPIだけでなくbuild environmentも確認してください。
出典：[2]
参考にした公式資料
- [1]visx v4.0.0 README(2026-10-05)
- [2]visx v4.0.0 release(2026-10-05)
- [3]@visx/xychart 4.0.0 package metadata(2026-10-05)
- [4]@visx/shape v4 exports(2026-10-05)
- [5]@visx/scale v4 exports(2026-10-05)
- [6]visx MIT license(2026-10-05)
編集部からの補足
完成済みchartをそのまま使うlibraryではなく、必要なpackageだけを組み合わせて独自chart/design systemを構築する用途に向きます。v4へ上げる場合はReact要件とmigration guideを確認してください。
3ステップで試す
- 1
visx 4.0.0の最小packageを固定して導入する
一時npm projectへshape/scaleとReact peer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/visx.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @visx/shape@4.0.0 @visx/scale@4.0.0 react@19.2.0 react-dom@19.2.0 - 2
scale計算を確認する
DOMを使わず、0〜10を0〜100へ写像するlinear scaleの中間値が50になることを確認します。
test "$(node --input-type=module -e "import {scaleLinear} from '@visx/scale'; console.log(scaleLinear({domain:[0,10],range:[0,100]})(5))")" = '50' - 3
SVG shape exportを確認する
Bar・LinePath・Pieの主要shape componentが利用可能であることを確認します。
test "$(node --input-type=module -e "import * as S from '@visx/shape'; console.log(['Bar','LinePath','Pie'].every(k=>k in S))")" = 'true'
成長
成長の推移 · 直近30日
21,075 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 0
- Open PR
- 40
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- vx
- react
- d3
- visualization
- chart
- svg
- data-visualization
- visx
- Stars
- 21,075
- Forks
- 772
- Watchers
- 136
- Open Issues
- 116
- Contributors
- 161
- 所有者種別
- Organization
- 主要言語
- TypeScript
- ライセンス
- MIT
- リポジトリ最終更新
- 2026/06/22
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Ant Design99,682 Stars
共通タグ 3件 · 同じ言語
enterprise向けReact UIを完成済みcomponents・design token・theme機構で統一し、管理画面や業務画面を素早く構築する
TypeScript - Storybook91,200 Stars
共通タグ 3件 · 同じ言語
UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop
TypeScript - Zustand58,786 Stars
共通タグ 3件 · 同じ言語
Reactの状態をproviderなしのhook storeで管理し、selectorで必要な部分だけ購読する
TypeScript - React Router56,590 Stars
共通タグ 3件 · 同じ言語
URL・nested route・navigation・data flowをReact applicationへ組み込むmulti-strategy router
TypeScript - Expo52,566 Stars
共通タグ 3件 · 同じ言語
React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する
TypeScript - styled-components41,099 Stars
共通タグ 3件 · 同じ言語
template literalでscoped CSS・theme・SSRをReact componentへ統合するCSS-in-JS library
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。