visxに触ってみた話

Transcript

1. visxに触ってみたお話

2. 自己紹介
 • カブ(@kab__nan) • 昨年4月に転職しました
 • フロント(しかできない) エンジニア
 • 最近気になるのは映画館の貸し切り
 • 「花は咲く、修羅の如く」を見てください

3. visxとは
 • Airbnbが作ったビジュアライゼーションライブラリ
 
 • D3.jsをReactで使いやすくラップしたもの
 
 • 最終的にはsvgで出力してくれる
 
 • 自由度は高いけどコードの記述量も増える

4. 使った理由
 右のようなレーダーチャートを作りたかった
 既にvisxで散布図を表示している箇所があった
 じゃあvisxで試してみるか

5. visxのサンプル一覧を見てみると...

8. サンプルコード
 • @visx/scaleと@visx/shapeを使うと作れるらしい
 
 • @visx/scale
 const scale = Scale.scaleLinear({ domain: [0, 1000], // 実データの値のレンジ range: [0, 250], // グラフ上の値のレンジ }); scale(200) // 50が返ってくる • @visx/shape
 ◦ 指定した座標間に線を引ける

9. 触ってみた感想
 • 座標計算とかを自分でやるのは面倒だった
 
 • 今回のようにシンプルなものを表現するなら
 他のライブラリ使った方がいい
 
 • サンプル見てるとかなり色々なことができそう
 
 • 日本語の記事が少ない
 ◦ visxで検索して3件しか出てこない。
 内1件は幣チームのフロントエンドのリーダーの記事