Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
visxに触ってみた話
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
kab0718
January 10, 2025
0
230
visxに触ってみた話
kab0718
January 10, 2025
Tweet
Share
More Decks by kab0718
See All by kab0718
アルゴリズムと計算量
kab0718
0
45
お嬢様言葉
kab0718
0
130
アイドルとコミュニケーション
kab0718
0
27
ブラウザレンダリングについて(簡易版)
kab0718
0
60
コーディングで意識してること
kab0718
0
49
趣味とぷよぐらみんぐ
kab0718
0
220
SDLアプリコンテスト2019プレゼン資料
kab0718
0
56
近況報告
kab0718
0
1.3k
アイドル×アイドル
kab0718
0
150
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
527
40k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
Thoughts on Productivity
jonyablonski
74
5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Designing for Performance
lara
610
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
780
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
66
So, you think you're a good person
axbom
PRO
2
1.9k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
140
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Transcript
visxに触ってみたお話
自己紹介 • カブ(@kab__nan) • 昨年4月に転職しました • フロント(しかできない) エンジニア • 最近気になるのは映画館の貸し切り
• 「花は咲く、修羅の如く」を見てください
visxとは • Airbnbが作ったビジュアライゼーションライブラリ • D3.jsをReactで使いやすくラップしたもの • 最終的にはsvgで出力してくれる
• 自由度は高いけどコードの記述量も増える
使った理由 右のようなレーダーチャートを作りたかった 既にvisxで散布図を表示している箇所があった じゃあvisxで試してみるか
visxのサンプル一覧を見てみると...
None
None
サンプルコード • @visx/scaleと@visx/shapeを使うと作れるらしい • @visx/scale const scale = Scale.scaleLinear({
domain: [0, 1000], // 実データの値のレンジ range: [0, 250], // グラフ上の値のレンジ }); scale(200) // 50が返ってくる • @visx/shape ◦ 指定した座標間に線を引ける
触ってみた感想 • 座標計算とかを自分でやるのは面倒だった • 今回のようにシンプルなものを表現するなら 他のライブラリ使った方がいい • サンプル見てるとかなり色々なことができそう
• 日本語の記事が少ない ◦ visxで検索して3件しか出てこない。 内1件は幣チームのフロントエンドのリーダーの記事