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
SVG完全に理解してグラフ書いてみた
Search
ak2ie
October 03, 2024
Technology
0
35
SVG完全に理解してグラフ書いてみた
スカラLT vol.1での発表内容です
ak2ie
October 03, 2024
Tweet
Share
More Decks by ak2ie
See All by ak2ie
Go言語CLIツールで生産効率UPした話
ak2ie
0
110
Goではじめるバックエンド開発
ak2ie
0
63
Notion APIと学ぶNext.js
ak2ie
0
550
NestJSのはじめ方
ak2ie
0
140
フロントエンドでDDDやってみた
ak2ie
0
75
初心者がシビックテックに参加してみた
ak2ie
0
110
Firebase についてとことん語りたい
ak2ie
0
110
D3.jsでグラフを描いてみた
ak2ie
0
110
Flutterはじめます
ak2ie
0
150
Other Decks in Technology
See All in Technology
LLM時代の検索
shibuiwilliam
2
170
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
ビギナーであり続ける/beginning
ikuodanaka
3
760
OPENLOGI Company Profile for engineer
hr01
1
34k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
210
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
240
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Docker and Python
trallard
44
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Embracing the Ebb and Flow
colly
86
4.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
KATA
mclloyd
30
14k
Transcript
SVG完全に理解して グラフ書いてみた スカラLT vol.1 2024年9月29日
あっきー エンジニア フロントエンド:Flutter バックエンド:TypeScript 趣味 お笑いYouTube見ること タイムマシーン3号 ラランド 自己紹介 @ak2ie_tech
グラフってよく使われてますよね
えっ、そんな簡単なこと? 😅 意外と難しかったんです... この夏アウトプットしたもの Y軸を固定表示して、横スクロールできるグラフを作りました!
グラフ Recharts フロントエンド React その他 SVG 使った技術
Rechartsとは? Reactで簡単にグラフをかけるライブラリ SVG 拡大縮小、アニメーション容易 スクロールなどは難しいことも シンプルな構文 折れ線グラフなら 👇️ カスタマイズが簡単 目盛りにアイコンを表示
100 ー 50 ー 0 ー スクロールするとY軸が消えてしまう 横スクロール
Y軸のSVG(画像)をコピーして 固定表示させよう!
100 ー 50 ー 0 ー 100 ー 50 ー
0 ー どうやってY軸を固定表示させるか Y軸をコピーして固定 ここだけ見える ー300 ー200 ー100 ー0 ー300 ー200 ー100 ー0
コピーする範囲を決める 座標系 SVGの座標系はY軸が下向き(左上原点) (0, 0) (50, 100) y x
コピー先での描画内容を決める viewBoxとは? どの範囲(左上座標)を どれくらいの大きさで表示させるのか viewBox=”0 0 200 200" viewBox=”25 25
50 50" ー300 ー200 ー100 ー0 (1000, 0) viewBox=”1000 0 ... ...." viewBox=”100 200 500 500" 100 100 中心:(50, 50) 半径:25
コピー先での描画 データURLとは? <img src=”URL” /> data:image/svg+xml.... SVG(画像) 小さなファイルをURLで表し 埋め込むことができる エンコード
埋め込み
デモ
まとめ 横スクロール時にY軸を固定表示したグラフ RechartsはReactで簡単にグラフをかけるライブラリ SVGはY軸が下向き viewBoxは表示範囲と大きさを決める データURLを使うことで画像を埋め込むことができる