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
36
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
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
620
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
240
LLMエージェント時代に適応した開発フロー
hiragram
1
410
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
6
1.8k
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
広島発!スタートアップ開発の裏側
tsankyo
0
240
知られざるprops命名の慣習 アクション編
uhyo
10
2.5k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
8
2.3k
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
310
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
170
Backboneとしてのtimm2025
yu4u
4
1.5k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Side Projects
sachag
455
43k
Agile that works and the tools we love
rasmusluckow
329
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Site-Speed That Sticks
csswizardry
10
790
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
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を使うことで画像を埋め込むことができる