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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ak2ie
October 03, 2024
Technology
0
47
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
70
Notion APIと学ぶNext.js
ak2ie
0
570
NestJSのはじめ方
ak2ie
0
140
フロントエンドでDDDやってみた
ak2ie
0
78
初心者がシビックテックに参加してみた
ak2ie
0
110
Firebase についてとことん語りたい
ak2ie
0
110
D3.jsでグラフを描いてみた
ak2ie
0
110
Flutterはじめます
ak2ie
0
150
Other Decks in Technology
See All in Technology
ECS障害を例に学ぶ、インシデント対応に備えたAIエージェントの育て方 / How to develop AI agents for incident response with ECS outage
iselegant
4
460
(技術的には)社内システムもOKなブラウザエージェントを作ってみた!
har1101
0
350
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
AI駆動開発を事業のコアに置く
tasukuonizawa
1
400
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
hiro_torii
0
190
今こそ学びたいKubernetesネットワーク ~CNIが繋ぐNWとプラットフォームの「フラッと」な対話
logica0419
5
540
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
410
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
kazzpapa3
0
190
SchooでVue.js/Nuxtを技術選定している理由
yamanoku
3
210
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
210
猫でもわかるKiro CLI(セキュリティ編)
kentapapa
0
130
AWS Network Firewall Proxyを触ってみた
nagisa53
1
250
Featured
See All Featured
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
99
Building a Scalable Design System with Sketch
lauravandoore
463
34k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Leo the Paperboy
mayatellez
4
1.4k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
440
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
260
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
Visualization
eitanlees
150
17k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
110
Prompt Engineering for Job Search
mfonobong
0
160
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を使うことで画像を埋め込むことができる